[英]How to embed Facebook Messenger into a Gatsby Site?
I'm trying to embed Facebook Messenger into a Gatsby site.我正在尝试将 Facebook Messenger 嵌入到 Gatsby 站点中。 In Chrome's Inspector I can see a div with id="fb-root" however its height is 0 (width is the width of the viewport) and the chat widget is not appearing.
在 Chrome 的 Inspector 中,我可以看到一个 id="fb-root" 的 div,但是它的高度为 0(宽度是视口的宽度)并且聊天小部件没有出现。
After using the setup tool in my Facebook page's Settings -> Messaging -> Add Messenger to your website, it generates some html code, which can't be used in a Gatsby (or any React Framework) site.在我的 Facebook 页面的 Settings -> Messaging -> Add Messenger to your website 中使用设置工具后,它会生成一些 html 代码,这些代码不能在 Gatsby(或任何 React Framework)站点中使用。
With the code I can create a custom component called MessengerChat.js with the following:使用代码,我可以创建一个名为 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;
Then, in gatsby-browser.js I can use the following code:然后,在 gatsby-browser.js 中,我可以使用以下代码:
import MessengerChat from "./src/MessengerChat";
export const wrapPageElement = ({ element }) => (
<>
{element}
<MessengerChat />
</>
);
Can anyone help in suggesting why the app might not be displaying correctly?任何人都可以帮助建议为什么应用程序可能无法正确显示?
Thanks谢谢
I think your MessengerChat
loses its constraints because of the wrapPageElement
wrapping.我认为您的
MessengerChat
由于wrapPageElement
包装而失去了约束。 Try:尝试:
export const wrapPageElement = ({ element, props }) => (
return <Layout {...props}>
{element}
<MessengerChat />
</Layout>
}
Keep in mind that wrapPageElement
needs to be set as well in the gatsby-ssr.js
, as you can see in the docs :请记住,在
wrapPageElement
gatsby-ssr.js
中也需要设置 wrapPageElement,正如您在文档中看到的那样:
Note: There is an equivalent hook in Gatsby's SSR API .
注意:在 Gatsby 的SSR API中有一个等效的钩子。 It is recommended to use both APIs together.
建议同时使用这两个 API。 For example usage, check out Using redux .
例如用法,请查看使用 redux 。
If using Layout is not suitable for your use-case, try adding manually a height to your MessengerChat
using CSS.如果使用 Layout 不适合您的用例,请尝试使用 CSS 为您的
MessengerChat
手动添加高度。
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.