How to implement Facebook Messenger customer chat SDK in Nuxt, Vue?

Question

i was doing this implementation with Facebook Messenger customer chat SDK into my Nuxt app.

Solution 1 (worked 0%):
I tried the https://www.npmjs.com/package/vue-fb-customer-chat package, and it didn't work, the package's site itself is down -.-! i import it and use it as a plugins and so on, i did as exactly as instructed, i even tried to use <VueFbCustomerChat /> and <vue-fb-customer-chat /> as extra too, but nothing seem to work!

Solution 2 (worked 50%):
Moreover, i tried to use it as a static file by creating a static file called fb-sdk.js and successfully deploy it:

window.fbAsyncInit = function() {
  FB.init({
    xfbml: true,
    version: "v6.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")

but i got this error when begin to chat using it:

ErrorUtils caught an error:

a.substr is not a function. [Caught in: React reported an error]

Subsequent errors won't be logged; see https://fburl.com/debugjs.

The chat box came up and disappear, then it was no longer clickable @@

So please help me adding Facebook Messenger customer chat SDK into NuxtJS, is there a package? a step-by-step tutorial?

Mating

I am facing the same error. Interestingly, it works fine on some of my colleagues' machines(not all). For one of the colleague, it worked with Incognito mode. – Foredeck

Answer 1

https://www.npmjs.com/package/vue-fb-customer-chat works, but the URL page must be https, for that reason it just works in production mode.

Mauve

I can'tseem to get it to work after following the doc. After adding a .js file in the plugin folder and include the plugin in the nuxt config file. Do I have to do anything else? – Laban

I have the same issue, I have implemented it on a real url that is https and I still get nothing. – Newkirk

@JamieBonnett, are you using Nuxt or Vue? – Mauve

@StivenRamírezArango Nuxt – Newkirk

Answer 2

FWIW, here’s how I implemented it in Nuxt without installing a 3rd party package, and it’s working.

Your default.vue layout:

...

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

...

Your nuxt.config.js (which is the script Facebook asks you to insert so copy it from your own instructions):

...

script: [
  {
    type: 'text/javascript',
    hid: 'fb-customer-chat',
    body: true,
    innerHTML: `
      var chatbox = document.getElementById('fb-customer-chat');
      chatbox.setAttribute("page_id", YOUR_PAGE_ID);
      chatbox.setAttribute("attribution", "biz_inbox");

      window.fbAsyncInit = function() {
        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/en_US/sdk/xfbml.customerchat.js';
        fjs.parentNode.insertBefore(js, fjs);
      }(document, 'script', 'facebook-jssdk'));`
  },
],
__dangerouslyDisableSanitizersByTagID: { 'fb-customer-chat': ['innerHTML'] },

...

The __dangerouslyDisableSanitizersByTagID setting ensures that the code inside innerHTML with the hid fb-customer-chat won’t be sanitized.

Monstrous

Answer 3

You might also need to whitelist your website domain in your page messaging settings.

To do that, you follow this link https://developers.facebook.com/docs/messenger-platform/discovery/facebook-chat-plugin/

Saleable