I got an error implementing the code below inside the body:

<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", "YOURPAGEIDHERE");
  chatbox.setAttribute("attribution", "biz_inbox");

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

Error:

I already Whitelisted the Domains inside FB Advanced Messaging. I'm not sure if I missed something else on the code.

I got an error implementing the code below inside the body:

<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", "YOURPAGEIDHERE");
  chatbox.setAttribute("attribution", "biz_inbox");

  window.fbAsyncInit = function() {
  FB.init({
    xfbml            : true,
    version          : 'v12.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'));
</script>

Error:

I already Whitelisted the Domains inside FB Advanced Messaging. I'm not sure if I missed something else on the code.

• javascript
• reactjs
• facebook-chat

• What's your referrer policy set to? developers.facebook.com/docs/messenger-platform/discovery/… – C3roe Commented Oct 7, 2021 at 9:10
• Ive got the below info on my pages in inspect network headers. Im checking it if i can fix it via HTML or in another way..any help? Referrer Policy: strict-origin-when-cross-origin – clarkf Commented Oct 8, 2021 at 8:04
• That should still send the origin portion of the referrer, so that's probably fine. (You could check if a referrer is actually send with the iframe request, to make sure.) – C3roe Commented Oct 8, 2021 at 8:06
• 1 yeah i mean fb customer chat still working even though they have an error like that. Im just wondering how to fix it.:) – clarkf Commented Oct 8, 2021 at 9:23
• @clarkf yep me too, it's working, but with error log in console, u know why? – Dan D. Commented Sep 1, 2023 at 13:24

6 Answers 6

I was also getting this error. I found that the pageId I was using was wrong. These errors come only when your pageId is wrong or the domain is not whitelisted properly (I even tried with a ngrok url and it worked).

So the steps which I followed were:

1. In business.facebook.com go to inbox from sidebar and select chat plugin.

2. Click on setup to add your domain.

3. Pick a setup method(standard for react/nextjs) and setup chat plugin(add language, domain , copy code and paste it)

4. You can add multiple domains

5. You will get pageId already embedded

Use this code and paste it in _document.js file in nextjs and after deploying it will work perfectly. If there is any confusion, please let me know.

Thanks, Happy Coding

In settings page > advanced messaging > Whitelisted domains. Add your domain. Verify if your domain is in https or http.

After go to the configuration plugin pannel > configure and add your domain.

If you're reading this after May 9th 2024, then I have bad news - the plugin is discontinued. The symptoms for me were CORS errors in browser console, so maybe this saves a bit of time for people who end up here.

Chat plugin page with the notice here.

One of the Facebook requirements is to have an HTTPS domain. HTTP will not be accepted.

I encountered same error, besides whitelisted domains, I removed age/country restrictions, and it works.

doc: https://developers.facebook.com/docs/messenger-platform/discovery/facebook-chat-plugin/?locale=en_US

Whitelisting your domain on facebook should fix this problem.

You can find it on Page Settings > New Pages Experience > Advanced Messaging > Whitelisted Domains

Also if you just type yourdomain.com without 'www', it will still not work, you can bypass this by adding this line of code to your .htaccess file.

RewriteEngine on
RewriteCond %{HTTP_HOST} !^www\.
RewriteCond %{HTTPS}s on(s)|offs()
RewriteRule ^ http%1://www.%{HTTP_HOST}%{REQUEST_URI} [NE,L,R]

This redirect non-www inputs to www