Embedding your Messenger bot on a website

How do you make your bot appear on your website, using the customer chat plugin widget

Syd Lawrence avatar
Written by Syd Lawrence
Updated over a week ago

To make your bot appear on your website, first off, you have to whitelist the domain that you want to embed the bot on. The domain must also be https.

To whitelist the domain, enter the full domain but not the full url. Such as: https://thebotplatform.com NOT https://thebotplatform.com/workplace

Then go to the customer chat plugin settings

You are able to customise the customer chat plugin by changing:

  • Theme color (#rgb)

  • Initial message

  • Logged in greeting

  • Logged out greeting

From here you can create a script tag to embed on your website. It will be something like:

<script>
  window.fbAsyncInit = function() {
    FB.init({
      appId            : '853697284761471',
      autoLogAppEvents : true,
      xfbml            : true,
      version          : 'v2.12'
    });
  };

  (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_US/sdk/xfbml.customerchat.js";
     fjs.parentNode.insertBefore(js, fjs);
   }(document, 'script', 'facebook-jssdk'));
</script>

<div class="fb-customerchat" page_id="110742466927230" ref="message:79980" theme_color="#3a84f7" logged_in_greeting="How can we help you today?" logged_out_greeting="How can we help you today?"></div>

You will need to share this script with whoever manages your website.

Make sure you add this code just after the opening body  tag of your website. 

Once you've embedded that on your website, you should be able to see:

And now, you're done... You bot is now living in the corner of your website :)

Troubleshooting

  • Make sure you whitelist your domain

  • Your domain must accessed over https


Did this answer your question?