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.

Festive

What's your referrer policy set to? developers.facebook.com/docs/messenger-platform/discovery/… – Witchcraft

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 – Festive

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.) – Witchcraft

yeah i mean fb customer chat still working even though they have an error like that. Im just wondering how to fix it.:) – Festive

@Festive yep me too, it's working, but with error log in console, u know why? – Cursor

Answer 1

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

Squawk

worked for me with ngrok url. thanks – Sunk

facing cors issue with mvc views. – Catchings

facebook ui changes so quickly, very annoying. I can't find 'chat plugin' in 'inbox' page – Asyut

Answer 2

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.

Aquiculture

Answer 3

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

Cloris

Answer 4

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.

Estheresthesia

Any alternative integration to display the plugin chat? – Infra

Answer 5

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

Saucedo

Was there any steps took to solve your same error or are they mostly the same steps as the other answer posted? – Enforcement

@Enforcement no other steps, just follow official instruction, and don't restrict Age/Country on Page Settings. – Saucedo

Answer 6

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

Steve