如何將 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手動添加高度。