How to embed Facebook Messenger into a Gatsby Site?

Question

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

Answer 1

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.