Refused to display..... frame-ancestors https://www.facebook.com

Question

I have included Facebook customer chat plugin on my website. It works fine for the first day. From the second day, it's not working. I have seen an error message in Google Chrome console:

Refused to display 'https://www.facebook.com/v2.11/plugins/customerchat.php?app_id=214160985792954&channel=https%3A%2F%2Fstaticxx.facebook.com%2Fconnect%2Fxd_arbiter%2Fr%2FlY4eZXm_YWu.js%3Fversion%3D42%23cb%3Df157c0f5ff1898c%26domain%3Dwww.fast-pay.cash%26origin%3Dhttps%253A%252F%252Fwww.fast-pay.cash%252Ff11cff6d515fe88%26relation%3Dparent.parent&container_width=0&locale=en_US&minimized=false&ref=front-page&sdk=joey' in a frame because an ancestor violates the following Content Security Policy directive: "frame-ancestors https://www.facebook.com/"."

I googled the solution. Every answer I have seen that this is domain white listing problem. But I have whitelisted my domain in facebook page.

Here is the process how I white listed my domain

1. First I go to my page settings
2. Under messenger platform settings I put my domain name for whitelisting

3. I have put my domain name in several patterns. Here I give you my patterns

   1. https://www.my-domain.com/
   2. https://www.my-domain.com/
   3. https://my-domain.com/
   4. http://www.my-domain.com/
   5. http://my-domain.com/

Here is the console error image

Answer 1

There are two things required to avoid this message:

1. Ensure you have the correct Facebook page ID set in your HTML. This should be the numeric ID, not what you see in the URL. I found my page's numeric ID via https://findmyfbid.com

   Example:

   <div class="fb-customerchat" page_id="6708927376315932">
   </div>
   

2. Whitelist your domain at Your Page > Settings > Messenger Platform. Ensure this matches your domain, uses HTTPS protocol, and include the port too if using a non-standard port. (And then make sure you hit the Save button!)