How to embed Facebook Messenger into a Gatsby Site?

user_14033122 0
Viewed 513

I'm trying to embed Facebook Messenger into a Gatsby site. 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.

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.

With the code I can create a custom component called MessengerChat.js with the following:

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:

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

facebook-messenger gatsby facebook javascript
1 Answers

I think your MessengerChat loses its constraints because of the wrapPageElement wrapping. 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:

Note: There is an equivalent hook in Gatsby’s SSR API. It is recommended to use both APIs together. For example usage, check out Using redux.

If using Layout is not suitable for your use-case, try adding manually a height to your MessengerChat using CSS.

user_55853710
Related