Facebook chat plugin doesn't load because of CSP rule

Question

I am trying to integrate the Facebook customer chat widget:

<div class="fb-customerchat" page_id="{{ fb_app_id }}" minimized="true"></div>

But it doesn't load, I've got the following error:

Chrome:

Refused to display 'https://www.facebook.com/v2.11/plugins/customerchat.php?app_id=APPID&channel=https%3A%2F%2Fstaticxx.facebook.com%2Fconnect%2Fxd_arbiter%2Fr%2FlY4eZXm_YWu.js%3Fversion%3D42%23cb%3Df108c14525cffd8%26domain%3Dtokeeen.com%26origin%3Dhttps%253A%252F%252Ftokeeen.com%252Ff21c2952e6dd8fc%26relation%3Dparent.parent&container_width=0&locale=fr_FR&minimized=true&page_id=APPID&sdk=joey' in a frame because an ancestor violates the following Content Security Policy directive: "frame-ancestors https://www.facebook.com".

Firefox:

Content Security Policy: « x-frame-options » ignoré en raison de la directive « frame-ancestors ».

I have whitelisted the tokeeen.com domain. So I don't why I have this error. Error can been on this page.

Answer 1

It was a configuration problem we had put the application id instead of the page id that you will find on the admin "About" tab of your Facebook page.