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.

What's your referrer policy set to? https://developers.facebook.com/docs/messenger-platform/discovery/facebook-chat-plugin#debug-tips — CBroe, Oct 07 '21 at 09: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, Oct 08 '21 at 08: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.) — CBroe, Oct 08 '21 at 08:06
yeah i mean fb customer chat still working even though they have an error like that. Im just wondering how to fix it.:) — clarkf, Oct 08 '21 at 09:23
@clarkf yep me too, it's working, but with error log in console, u know why? — Dee, Sep 01 '23 at 13:24

score 3 · Answer 1 · answered Jan 09 '22 at 15:46

3

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.

answered Jan 09 '22 at 15:46

deleplanque dylan

31
2

score 3 · Answer 2 · edited Dec 14 '22 at 11:14

I was also getting these 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 buisness.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[https://i.stack.imgur.com/zGdgx.png]

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. For any confusion please let me know. Thanks, Happy Coding ☺

worked for me with ngrok url. thanks – Asad Ali May 20 '22 at 11:24 — Asad Ali, May 20 '22 at 11:24
facing cors issue with mvc views. – Aikansh Mann Nov 08 '22 at 06:20 — Aikansh Mann, Nov 08 '22 at 06:20

score 1 · Answer 3 · answered Jan 19 '22 at 16:22

1

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

answered Jan 19 '22 at 16:22

Masterpage

111
1
3

score 0 · Answer 4 · edited Aug 05 '22 at 06:26

0

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

edited Aug 05 '22 at 06:26

vimuth

5,064
33
79
116

answered Aug 02 '22 at 09:48

Karott

11
2

Was there any steps took to solve your same error or are they mostly the same steps as the other answer posted? – treckstar Aug 04 '22 at 00:47
@treckstar no other steps, just follow official instruction, and don't restrict Age/Country on Page Settings. – Karott Aug 27 '22 at 03:45

score 0 · Answer 5 · edited Aug 21 '23 at 14:42

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

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

5 Answers5