Facebook Messenger Chat Plugin

I am trying to add the Facebook Messenger Chat Plugin to my website. I assumed this should be simple but nothing with RapidWeaver is… If I create a HTML stack and copy the code into it why doesn’t it work? something to do with Javascript?

and no I don’t want to pay for something that makes it work…

You have a URL?

Can you give us a hint as to what “Facebook Messenger Chat Plugin” you are using?

This one Redirecting...

Apparently this code should work

<div id="fb-root"></div>

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

<script>
  var chatbox = document.getElementById('fb-customer-chat');
  chatbox.setAttribute("page_id", "296649088233");
  chatbox.setAttribute("attribution", "biz_inbox");

  window.fbAsyncInit = function() {
    FB.init({
      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.net/en_GB/sdk/xfbml.customerchat.js';
    fjs.parentNode.insertBefore(js, fjs);
  }(document, 'script', 'facebook-jssdk'));
</script>

Do you have a URL? You mentioned something about Javascript?

On the page from Facebook’s documentation you linked to, it has instructions for a bunch of “website builder” and RapidWeaver isn’t listed. What instructions did you follow?

The URL to my website?

Yeah, the website with the JavaScript error.

its pc-healer.co.uk, no Javascript error I was just assuming it was a javascript error.
The page just dosn’t show the expect Facebook Messenger Chat Window.

I added a HTML stack to my site and added the code above.

Looks like you are getting errors on the console:
Chrome:

Safari shows it as Info not an error but it does show the content being blocked:

Looks like Messenger Chat is trying to run in a Frame from a different domain.

You will need to address this with some CSP rules.

Perhaps something like this:

Content-Security-Policy: frame-src https://*.facebook.net/

Or in the htaccess format:

<IfModule mod_headers.c>
Header set Content-Security-Policy "frame-src 'self' https://*.facebook.net/"
</IfModule>

1 Like

ok thanks, but I am not a developer not sure where to add that code?

In RW publishing settings there is a Edit .htaccess File button inside the Publishing settings. Assuming your host is running Apache (most site are) you can copy the sample from above:

That would be a good starting point Content-Security-Policy (CSP) can be a bit finicky in getting them set up.

They are part of the HTTP header, so if you aren’t running Apache, then contact your Hosting company. need to figure that out.

1 Like