THANKSGIVING SALE | FLAT 40% OFF | 13 - 28 Nov | ON ALL SLACK BOTS | USE CODE : THANKS40 x

How To Add A Facebook Messenger Bot To Your Website

Sanya Aru Updated on: September 23, 2019 Leave a Comment
Website Messenger Chatbot Plugin

84% open rate of messages sent using Messenger.


Messenger marketing populates a great professional crowd for leads generation. But, it is not always possible to have a close look on your website and Messenger page both at the same time. Hence, you may miss advancing opportunities. Considering the depth of the situation Facebook Messenger came up with the innovative solution, i.e, Website Messenger Chatbot.

Launching a chatbot on your Messenger profile is not what I’ll suggest is different. People are already using it in a similar way. What I’d like to suggest is having your own Website Messenger Chatbot. Traditionally, we follow two approaches for the purpose, namely, 

  1. Using a Facebook Messenger Widget
  2. Using the Chatbot Builder Tool

Starting with the first approach, i.e., building website Messenger chatbot through Messenger widget. Let us see how the steps proceed.

1. Website Messenger Chatbot Through Messenger Widget

The Messenger widget a.k.a. Messenger Customer Chat Plugin is the initiative of the Facebook Messenger Platform to provide an exceptionally smooth chatting experience to customers. The agenda was to establish the continuity in chat by maintaining the context across the website chat window and Messenger app window as well.

Using Facebook Messenger Customer Chat Plugin, you can customize your Messenger chatbot and easily embed the chatbot on your website. Not only this, the best part is the availability of rich media experiences on the website chat window as well that are originally available in Messenger.com.

Can’t wait to read the steps and proceed to embed the chatbot on your website page? Willing to learn how you can do it yourself? Read on to create and integrate your website Messenger chatbot.

Steps To Create Website Messenger Chatbot

We presume that you already have an existing Facebook Business Page profile. (If not, create one before proceeding further).

Step 1. Login to your Facebook Business Page > Go to Settings.

Once you’re logged into your Facebook Page, look out for Settings tab. Click on Settings to proceed with the next step.

facebook business home page to set Messenger Chatbot

Step 2. Go to Messenger Platform > Customer Chat Plugin.

In the Settings menu, search for the Messenger Platform tab and further select the Customer Chat Plugin from the list of options

messenger platform in facebook page settings to add chatbot plugin

Step 3. Add your domain to the whitelist. Get your Tracking Code enabled.

white-listed domain name to enter website name to be embedded with chatbot
Source: Facebook Developer’s Platform
Set up customer chat using Messenger widget
Source: Facebook Developer’s Platform

As you’ll move to this step, you’ll notice a pop-up window appears on your screen. On this pop-up window, you need to relocate the text field asking for the domain name. Here, you need to enter the name of your domain where you wish to integrate chatbot.

This text field takes in your domain name and marks it as whitelisted. Once this process is done, on the right side of the same window you’ll see, code is generated. This is your tracking code. You need to copy this code and insert it on each page where you wish to have your Messenger chatbot enabled.

Step 4. Setup Customizations

In the same setup wizard, you can set the customizations for your chatbot. Starting with selecting the language for a conversation to set up the welcome message for your chatbot, you can do it all. The customization options also include the options to set the theme and color. As you have the option to customize your Messenger chat window, the same you can do for your chatbot widget. Additionally, as you are customizing the chatbot, you need to set the delay time too for in-between conversation messages. 

Let’s see how these customizations impact the users’ behavior while conversing with the chatbot.

  • Welcome Messages direct the chat as per the interest of the user. This enhances the users’ experience and builds confidence with personalized replies.
  • Exit Messages ends the chat on the note that compels the user to visit again and continue the conversation where it got laid off.
  • Delay is important to set the wait time for the replies. The instant replies will sound more mechanic with too close delay time. While more delay time would seem to be late replies that can annoy your users. Hence, having the perfect delay time is very essential. 
  • Themes and Color Palettes involve users’ attention. Setting custom colors in resemblance to your brand image increases the pace of trust-building for the users. Also, it encourages loyalty to the brand.

Step 5. Add The Plugin to your webpage

Once you’re done with all your customizations, you’ll find an HTML code ready. You only need to copy this complete HTML code and add it to your landing page under Body Tag. 

<html>
<head>
   <title>Chat with us</title>
</head>
<body>
<script>
(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#xfbml=1&version=v2.12&autoLogAppEvents=1';
   fjs.parentNode.insertBefore(js, fjs);
}(document, 'script', 'facebook-jssdk'));
</script>
<div class="fb-customerchat"
    page_id="<PAGE_ID>"
    logged_in_greeting="How can we help you shop today?"
    logged_out_greeting="How can we help you shop today?"
    theme_color="#5c9165">
</div>
</body>
</html>

Note: You need to add the generated HTML code on each page where you wish to have chatbot integration.

Your Website Messenger Chatbot is Ready to roll. There are a few more concerns that you must consider before you head-on with the implementation. You must be sure that the customizations you have made are compatible with your websites’ design and layout too. You can even toggle the persistent menu available by default in your chatbot plugin as it is the embed of your Messenger platform.

But, if you feel the persistent menu doesn’t suit the layout of your website, you can disable the menu by applying the shortcode, i.e.,

curl -X POST \
 'https://graph.facebook.com/v2.6/me/messenger_profile?access_token=<PAGE_ACCESS_TOKEN>'
 -H 'Content-Type: application/json'
 -d '{
 "persistent_menu":[
   {
     "locale":"default",
     "disabled_surfaces": ["CUSTOMER_CHAT_PLUGIN"],
     "composer_input_disabled": false,
     "call_to_actions":[…]
   }
 ]
}'

The customizations have no end to them. It’s your creativity and critical thinking to ideate the best for your chatbot plugin and website.

So, this was all about the first approach, i.e., using the Messenger Chat Plugin. Heading to the next approach,i.e., using the Chatbot Builder Tool, let’s see which approach will ease your efforts.

2. Using The Chatbot Builder Tool

Not willing to get in so many complexities of the Messenger platform? Setting codes are always not so easy as they sound here. Don’t worry! You have an option to your rescue. If you are not willing to implement Website Messenger Chatbot using Messenger Customer Chat Plugin, then you can shift your interest to BotMyWork Chatbot Builder.

BotMyWork Chatbot Builder is a tool that provides you with a visual platform to build your own conversational chatbot in free and with no involvement of any third party. You can learn more about how you can set up chatbot without any coding using BotMyWork Chatbot Builder Tool. And, also the benefits you can endure using the chatbot builder tool.

A chatbot builder that is FREE FOREVER?

Yes, you read it right. BotMyWork Chatbot Builder is FREE to use the platform to build a chatbot. Just connect your Facebook page and load up your business with Facebook Marketing.

Summing Up!

So far we have learned how you can add the Website Messenger Chatbot in two different ways. Which approach would you prefer? Please let us know in the comments section below.

For more details/support, please connect with us @BotMyWork or @Facebook Community.

About The Author

You may also like

Sign up for Newsletters

Leave a Reply

Your email address will not be published. Required fields are marked *