I am trying to add the Messenger Live Customer Chat Plugin dynamically to a site by first whitelisting the domain via the API and then injecting the script tag to the whitelisted domain site.

Now, after injecting the script to the whitelisted site it fails with CORS error. But, if I manually whitelist the URL via the Facebook app using the UI it works fine. I dont understand why does whitelisting via API does not work when the docs clearly say it should work.

1. Successfully whitelisting a domain for a FB page via the API

curl '.0/me/messenger_profile?access_token=EAxxxxxxxPr' \
  -H 'authority: graph.facebook' \
  -H 'sec-ch-ua: " Not A;Brand";v="99", "Chromium";v="96", "Google Chrome";v="96"' \
  -H 'accept: application/json, text/plain, */*' \
  -H 'content-type: application/json' \
  -H 'sec-ch-ua-mobile: ?0' \
  -H 'user-agent: Mozilla/5.0 (Macintosh; Intel Mac OS X 10_15_7) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/96.0.4664.55 Safari/537.36' \
  -H 'sec-ch-ua-platform: "macOS"' \
  -H 'origin: ' \
  -H 'sec-fetch-site: cross-site' \
  -H 'sec-fetch-mode: cors' \
  -H 'sec-fetch-dest: empty' \
  -H 'referer: /' \
  -H 'accept-language: en-GB,en-US;q=0.9,en;q=0.8' \
  --data-raw '{"whitelisted_domains":[";]}' \
  --pressed

Result: {success: true } and I can also GET the whitelisted_domains and see it is already whitelisted

2. Injecting script dynamically to the whitelisted site so that it loads the Messenger Live Chat Plugin

        var fbCustomerChat = document.createElement('div');
        fbCustomerChat.id = "fb-customerchat";
        fbCustomerChat.classList.add("fb-customerchat");
        fbCustomerChat.setAttribute('page_id', 'xxx')
        document.body.appendChild(fbCustomerChat);

        window.fbAsyncInit = function() {
            FB.init({
              appId            : 'xxx',
              autoLogAppEvents : true,
              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'));

3. Browser Logs

Access to XMLHttpRequest at '/?page_id=106040728582517&suppress_http_code=1' from origin '' has been blocked by CORS policy: No 'Access-Control-Allow-Origin' header is present on the requested resource.
xhr-patch.js:87 GET /?page_id=106040728582517&suppress_http_code=1 net::ERR_FAILED 200

Access to XMLHttpRequest at ' co

Refused to frame '/' because an ancestor violates the following Content Security Policy directive: "frame-ancestors ;.

I am trying to add the Messenger Live Customer Chat Plugin dynamically to a site by first whitelisting the domain via the API and then injecting the script tag to the whitelisted domain site.

Now, after injecting the script to the whitelisted site it fails with CORS error. But, if I manually whitelist the URL via the Facebook app using the UI it works fine. I dont understand why does whitelisting via API does not work when the docs clearly say it should work.

1. Successfully whitelisting a domain for a FB page via the API

curl 'https://graph.facebook./v12.0/me/messenger_profile?access_token=EAxxxxxxxPr' \
  -H 'authority: graph.facebook.' \
  -H 'sec-ch-ua: " Not A;Brand";v="99", "Chromium";v="96", "Google Chrome";v="96"' \
  -H 'accept: application/json, text/plain, */*' \
  -H 'content-type: application/json' \
  -H 'sec-ch-ua-mobile: ?0' \
  -H 'user-agent: Mozilla/5.0 (Macintosh; Intel Mac OS X 10_15_7) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/96.0.4664.55 Safari/537.36' \
  -H 'sec-ch-ua-platform: "macOS"' \
  -H 'origin: https://livechat.frangout.' \
  -H 'sec-fetch-site: cross-site' \
  -H 'sec-fetch-mode: cors' \
  -H 'sec-fetch-dest: empty' \
  -H 'referer: https://livechat.frangout./' \
  -H 'accept-language: en-GB,en-US;q=0.9,en;q=0.8' \
  --data-raw '{"whitelisted_domains":["https://my-domain."]}' \
  --pressed

Result: {success: true } and I can also GET the whitelisted_domains and see it is already whitelisted

2. Injecting script dynamically to the whitelisted site so that it loads the Messenger Live Chat Plugin

        var fbCustomerChat = document.createElement('div');
        fbCustomerChat.id = "fb-customerchat";
        fbCustomerChat.classList.add("fb-customerchat");
        fbCustomerChat.setAttribute('page_id', 'xxx')
        document.body.appendChild(fbCustomerChat);

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

3. Browser Logs

Access to XMLHttpRequest at 'https://www.facebook./plugins/customer_chat/facade_gating/?page_id=106040728582517&suppress_http_code=1' from origin 'https://sid-s-school-12f2.thinkific.' has been blocked by CORS policy: No 'Access-Control-Allow-Origin' header is present on the requested resource.
xhr-patch.js:87 GET https://www.facebook./plugins/customer_chat/facade_gating/?page_id=106040728582517&suppress_http_code=1 net::ERR_FAILED 200

Access to XMLHttpRequest at 'https://www.facebook./plugins/customer_chat/SDK/trucnated co

Refused to frame 'https://www.facebook./' because an ancestor violates the following Content Security Policy directive: "frame-ancestors https://www.facebook.".

• javascript
• facebook
• facebook-graph-api
• facebook-javascript-sdk
• facebook-messenger

• I've heard there can be issues if you try to do it this way. This might be similar to stackoverflow./questions/50778194/… . Do you get the same error if you add the div directly in the HTML? This might help as well developers.facebook./docs/reference/javascript/… – Andrew L Commented Dec 11, 2021 at 19:54
• I dont have access to the HTML page directly. I have to add it via a script tag – InfinitePrime Commented Dec 12, 2021 at 6:57

4 Answers 4

This might be a different issue. But I also encountered the '..has been blocked by CORS policy' issue for the Facebook Plugin Chat. Even if you already added the website URL in the Whitelisted domains (Advanced Messaging settings), it will still not work if your Facebook page is limited or restricted to only few countries. It needs to be available to all countries.

Hopefully someone will help this post in the future as searching for 'Facebook Chat Cors error' only points to this question.

I had this issue from facebook, in my case I had a / at the end of my whitelisted domain name, updating it fixed my issue.

Also move the Facebook chat SDK code to the top within the body-tag

<body>
<!-- FB-CHAT-SDK-CODE -->
...

<!-- your code -->
...
</body>

OLD: https://www.example./
NEW: https://www.example.

Hope this helps

I experienced the same thing before, after I checked thoroughly, it turns out that I entered the wrong PAGE_ID instead I entered the APP_ID.

You can try to check again on this line

chatbox.setAttribute("page_id", **YOUR_PAGE_ID**);

By default facebook need add following code into html:

<!-- Messenger Chat plugin Code -->
<div id="fb-root"></div>

<!-- Your Chat plugin code -->
<div id="fb-customer-chat" class="fb-customerchat"></div>

You missed fb-root div and Chat plugin's id is fb-customer-chat not fb-customerchat