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="[//widget.manychat.com/1264855053629919.js](https://widget.manychat.com/1264854043629919.js)" 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?
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:
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!
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:
frame-ancestors https://www.facebook.com
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 www.facebook.com.
For your website, it would be really helpful, if we could see the live site to investigate further.
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>:
There are two Facebook <iframe>s in there. The second one is causing the CSP error, because it’s trying to display https://www.facebook.com/v3.1/plugins/customerchat.php?... but this address returns the CSP header:
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(). https://developers.google.com/web/updates/2016/08/removing-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 https://www.chromestatus.com/feature/5745543795965952
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 testcase.optimiware.com. According to my current thinking and Dreamhost this can be done in my .htaccess file: https://help.dreamhost.com/hc/en-us/articles/215747598
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:
the Manychat company is selling a non-working product
their Customer Support team has 0 understanding of the product
their Customer Support team has no idea how to install the product
their Customer Support team is technically illiterate
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.
