The widget doesn't load due to a CSP rule

Hello guys,
I’ve been trying to integrate a Manychat bot into my Contact page. This requires adding only one script into the <head>: <script src="[//](" async="async"></script>

Tests show the config is fine, but the chatbot window doesn’t show up. Finally we’ve found there’s some CSP rule that prevents the chatbot from displaying. Do you know where and what’s that CSP rule and how to fix it?

The theme I’m using:

Thanks in advance!

to read

The Web-Server must deliver the headers - speak with your server admin!

PS: with Apache

    Header always set Content-Security-Policy: "script-src   'self' *"

@ ju52 Gerhard,
thanks a million for your assistance!

I don’t think this is your server that’s sending the CSP header. It looks more like an error from Facebook that doesn’t have anything to do with the Manychat bot. Would need to see the content of the Network section of dev tools to be sure.

What about the script line you cited? This looks wrong:

<script src="[//](" async="async"></script>

It should be:

<script src="" async="async"></script>

The script in reality is as you said it should be.

I didn’t encounter CSP headers before and don’t know what servers do with them.
What Facebook has to do here? I’m just integrating Manychat into my Contact page.

This picture of errors in console was sent to me by Manychat support - but I don’t see those errors when I look into the console! :face_with_raised_eyebrow:

Right, I looked at Manychat and it’s a chatbot platform based on Facebook Messenger, which is where (I guess) the Facebook script in the CSP error is coming from. That still doesn’t explain the error, because a CSP header of:


says that the website that’s being loaded (in this case the URL that follows “Refused to display”) can only be loaded in an IFRAME from within a page of

For your website, it would be really helpful, if we could see the live site to investigate further.

What do you mean by “live site”?

The said website where you’re having the problem. A public URL we can browse to.

Here it is - on a testing domain:

Thanks. I looked at the website. Your script is added the way Manychat says it should be. It loads correctly, executes, and appends the following code right after the bottom </footer>:

<div class="mcwidget-overlay" data-widget-id="7596636"><div class=""><div class=""></div></div></div>
<div id="fb-root" class=" fb_reset">
  <div style="position: absolute; top: -10000px; width: 0px; height: 0px;">
      <iframe name="fb_xdm_frame_https" id="fb_xdm_frame_https" aria-hidden="true" title="Facebook Cross Domain Communication Frame" tabindex="-1" frameborder="0" allowtransparency="true" allowfullscreen="true" scrolling="no" allow="encrypted-media" src=";" style="border: none;"></iframe>
  <div id="" class="mc-customerchat fb_invisible_flow fb_iframe_widget" page_id="1264854043629919" data-ref="w7596636" theme_color="#64F" greeting_dialog_display="show" fb-xfbml-state="rendered" fb-iframe-plugin-query="app_id=532160876956612&amp;container_width=665&amp;greeting_dialog_display=show&amp;locale=en_US&amp;page_id=1264854043629919&amp;ref=w7596636&amp;sdk=joey&amp;theme_color=%2364F">
    <span style="vertical-align: top; width: 0px; height: 0px; overflow: hidden;">
      <iframe name="f3d735a83083d48" width="1000px" height="1000px" title="" frameborder="0" allowtransparency="true" allowfullscreen="true" scrolling="no" allow="encrypted-media" src=";;container_width=665&amp;greeting_dialog_display=show&amp;locale=en_US&amp;page_id=1264854043629919&amp;ref=w7596636&amp;sdk=joey&amp;theme_color=%2364F" style="border: none; visibility: visible; width: 0px; height: 0px;"></iframe>

There are two Facebook <iframe>s in there. The second one is causing the CSP error, because it’s trying to display but this address returns the CSP header:

content-security-policy: frame-ancestors;

You can open the URL in a separate tab and see the headers yourself in the dev tools’ Network panel.

This isn’t a header coming from your server. It’s from Facebook’s.

How do you fix it? I looked at Facebook’s documentation of the Customer Chat Plugin and it says there, that adding the plugin requires whitelisting your website’s domain—adding the URL to the list of websites, where the chat plugin is allowed to appear. Because you’re working with Manychat, and not Facebook directly, I guess there’s a configuration option for that somewhere in Manychat’s control panel. A form, where you should enter your website’s address, so that it gets passed to Facebook and appended to the CSP header above.

@mpaluchowski Hello Michal,
thank you very much for looking into my problem and you advice!

I am having some problems seeing these errors in my Developer Tools: I was using Chromium browser, and it did not show any errors, while Firefox showed them. Now I’ve switched to Google-Chrome - and I don’t see those errors. I saw it once, but now I see something else:

(index):790 [Violation] Avoid using document.write().
(anonymous) @ (index):790
jquery-1.10.2.min.js:5 [Violation] Added non-passive event listener to a scroll-blocking 'touchstart' event. Consider marking event handler as 'passive' to make the page more responsive. See
add @ jquery-1.10.2.min.js:5
(anonymous) @ jquery-1.10.2.min.js:5
each @ jquery-1.10.2.min.js:4
each @ jquery-1.10.2.min.js:4
on @ jquery-1.10.2.min.js:5
gestures @ owl.carousel.min.js:33
moveEvents @ owl.carousel.min.js:28
onStartup @ owl.carousel.min.js:4
setVars @ owl.carousel.min.js:4
logIn @ owl.carousel.min.js:3
loadContent @ owl.carousel.min.js:3
init @ owl.carousel.min.js:2
(anonymous) @ owl.carousel.min.js:46
each @ jquery-1.10.2.min.js:4
each @ jquery-1.10.2.min.js:4
f.fn.owlCarousel @ owl.carousel.min.js:45
(anonymous) @ main.min.js:1
c @ jquery-1.10.2.min.js:4
fireWith @ jquery-1.10.2.min.js:4
ready @ jquery-1.10.2.min.js:4
q @ jquery-1.10.2.min.js:4
[Violation] Forced reflow while executing JavaScript took 34ms
widget.js?872040:1 [Violation] 'setTimeout' handler took 66ms

I also don’t see the code you saw after the </footer>

However I am working with Manychat support and my hosting provider Dreamhost. I am looking for the way to whitelist Facebook content on my domain According to my current thinking and Dreamhost this can be done in my .htaccess file:
I will post the summary when I finally do it.

@mpaluchowski Hello Michal and all of my dear friends who tried to help me,
I finally launched the Customer Chat bot and here I want to post the summary of my efforts:

after I’ve lost a month trying to install Manychat Customer Chat bot I’ve found that:

  1. the Manychat company is selling a non-working product
  2. their Customer Support team has 0 understanding of the product
  3. their Customer Support team has no idea how to install the product
  4. their Customer Support team is technically illiterate
  5. their Customer Support team was pushing me in the wrong direction - telling me to whitelist my domain (they don’t know how to) while it was their task to do that.

I started with Manychat because I knew nothing about chat bots and heard someone using it successfully on FB.

After I figured out there was something wrong in the situation, I’d spent couple hours researching the products on the market and switched to Chatfuel - a well established and acknowledged company.

Two hours later the Chatfuel Customer Chat appeared on my domain.

Spend some time to investigate the issue.

Best of luck!