如何将 Facebook Messenger 嵌入 Gatsby 站点？

Question

我正在尝试将 Facebook Messenger 嵌入到 Gatsby 站点中。 在 Chrome 的 Inspector 中，我可以看到一个 id="fb-root" 的 div，但是它的高度为 0（宽度是视口的宽度）并且聊天小部件没有出现。

在我的 Facebook 页面的 Settings -> Messaging -> Add Messenger to your website 中使用设置工具后，它会生成一些 html 代码，这些代码不能在 Gatsby（或任何 React Framework）站点中使用。

使用代码，我可以创建一个名为 MessengerChat.js 的自定义组件，其中包含以下内容：

import React, { useEffect } from "react";

function MessengerChat() {
  useEffect(() => {
    window.fbAsyncInit = function () {
      window.FB.init({
        xfbml: true,
        version: "v10.0",
      });
    };
    (function (d, s, id) {
      var js,
        fjs = d.getElementsByTagName(s)[0];
      if (d.getElementById(id)) return;
      js = d.createElement(s);
      js.id = id;
      js.src = "https://connect.facebook.net/en_US/sdk/xfbml.customerchat.js";
      fjs.parentNode.insertBefore(js, fjs);
    })(document, "script", "facebook-jssdk");
  });
  return (
    <>
      <div id="fb-root" />
      <div
        className="fb-customerchat"
        attribution="page_inbox"
        page_id="XXXXXXX"
      />
    </>
  );
}

export default MessengerChat;

然后，在 gatsby-browser.js 中，我可以使用以下代码：

import MessengerChat from "./src/MessengerChat";

export const wrapPageElement = ({ element }) => (
  <>
    {element}
    <MessengerChat />
  </>
);

任何人都可以帮助建议为什么应用程序可能无法正确显示？

谢谢

Answer 1

我认为您的MessengerChat由于wrapPageElement包装而失去了约束。 尝试：

export const wrapPageElement = ({ element, props }) => (
      return <Layout {...props}>
                 {element}
                 <MessengerChat />
             </Layout>
    
    }

请记住，在wrapPageElement gatsby-ssr.js中也需要设置 wrapPageElement，正如您在文档中看到的那样：

注意：在 Gatsby 的SSR API中有一个等效的钩子。 建议同时使用这两个 API。 例如用法，请查看使用 redux 。

如果使用 Layout 不适合您的用例，请尝试使用 CSS 为您的MessengerChat手动添加高度。