On my Gatsby site, I've placed the scripting for providing Facebook Messenger's icon onto my site in the files, gatsby-ssr.js / gatsby-browser.js and src/components/MessengerChat.js...

// gatsby-ssr.js & gatsby-browser.js
import React from "react";
import Layout from "./src/components/layout";
import MessengerChat from "./src/components/MessengerChat";

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

...and...

// src/components/MessengerChat.js
import React, { useEffect } from "react";

function MessengerChat() {
  useEffect(() => {
    window.fbAsyncInit = function () {
      window.FB.init({
        xfbml: true,
        version: "v11.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/th_TH/sdk/xfbml.customerchat.js";
      fjs.parentNode.insertBefore(js, fjs);
    })(document, "script", "facebook-jssdk");
  });
  return (
    <>
      <div id="fb-root" />
      <div
        className="fb-customerchat"
        attribution="biz_inbox"
        page_id="106619367753772"
      />
    </>
  );
}

export default MessengerChat;

The Facebook Messenger icon does actually appear on newer iPhones in Facebook's browser and in the mobile Chrome browser (in a newer iPhone).

It also shows up in every desktop browser that I've been able to check, except for one: the Firefox browser in Private Window mode (it does appear in the normal Firefox browser though).

When I inspect the Firefox Private Window, it says,...

Facebook SDK is being shimmed by Firefox. See https://bugzilla.mozilla.org/show_bug.cgi?id=1226498 for details.

Even if I am logged into FB on a particular mobile browser, the Messenger icon still does not display.

I'd assume this is the same problem with Android. Any thoughts on this?