CODEWITHSUNDEEP
reactjsgatsbyfacebook-messenger
Scott Montford
Scott Montford

Reputation: 165

How to add Facebook Messenger to a GatsbyJS website

I am trying to add the Facebook Messenger widget to a website I am building. I have the HTML code to embed it to my website. It says the place it immediately after the "" tag of the page.

The code is here:

<!-- Messenger Chat plugin Code -->
<div id="fb-root"></div>

<!-- Your Chat plugin code -->
<div id="fb-customer-chat" class="fb-customerchat">
</div>

<script>
  var chatbox = document.getElementById('fb-customer-chat');
  chatbox.setAttribute("page_id", "[page-id]");
  chatbox.setAttribute("attribution", "biz_inbox");
</script>

<!-- Your SDK code -->
<script>
  window.fbAsyncInit = function() {
    FB.init({
      xfbml            : true,
      version          : 'v14.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_GB/sdk/xfbml.customerchat.js';
    fjs.parentNode.insertBefore(js, fjs);
  }(document, 'script', 'facebook-jssdk'));
</script>

I have had a look at the GatsbyJS plugin that is mentioned here: How to add Facebook Messenger to react website but it seems that this no longer works as the "appID" attribute no longer works

Does anyone know how I can use the standard HTML widget embed code and add it to the of all of my GatsbyJS pages?

TIA

Upvotes: 1

Views: 164

Answers (1)

Scott Montford
Scott Montford

Reputation: 165

For anyone that is having the same issue this was my solution:

I made a component called "Messenger.js".

This was the file code:

import React from 'react';

export const Messenger = () => {
    const code = `
    <div id="fb-root"></div>

    <div id="fb-customer-chat" class="fb-customerchat">
    </div>

    <script>
      var chatbox = document.getElementById('fb-customer-chat');
      chatbox.setAttribute("page_id", "[insert page id here]");
      chatbox.setAttribute("attribution", "biz_inbox");
    </script>

    <script>
      window.fbAsyncInit = function() {
        FB.init({
          xfbml            : true,
          version          : 'v14.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_GB/sdk/xfbml.customerchat.js';
        fjs.parentNode.insertBefore(js, fjs);
      }(document, 'script', 'facebook-jssdk'));
    </script>
    `;
   
    return <div dangerouslySetInnerHTML={{ __html: code }} />;
  };

Then on my index.js (and any other pages you want the Messenger component to show up on I added the import at the top of the file:

import { Messenger } from "../components/Common/Messenger";

Then in the return function I added:

<Messenger />

You also need to make sure your website is whitelisted on the Messenger widget setup for it to appear properly.

I hope this helped anyone that's having the same frustration I had!

Upvotes: 1

Related Questions