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

user_14313917 0
Viewed 4347

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: enter image description here

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

facebook-chat reactjs javascript
4 Answers

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.

user_172923810
user_80749200

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.[https://i.stack.imgur.com/rDk5d.png]

2)Click on setup to add your domain. [https://i.stack.imgur.com/exOi2.png]

3)Pick a setup method(standard for react/nextjs) and setup chat plugin(add language, domain , copy code and paste it) [https://i.stack.imgur.com/hDArZ.png]

4)You can add multiple domains[https://i.stack.imgur.com/zGdgx.png]

5)You will get pageId already embedded[https://i.stack.imgur.com/iRT13.png]

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 ☺

user_141085190
user_79500700
Related