FB chat plugin error on CORS policy and customerchat net::ERR_FAILED

Question

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.

Answer 1

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.

Answer 2

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

Answer 3

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

Answer 4

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

Answer 5

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