How To Create A Chatbot For Your Website

Create Facebook Messenger Chatbot

Chatbots can be very useful for individuals and enterprises to handle all their customer relationship. Nowadays, a revolution is quietly taking place in the human-computer interaction. The number of bots in the internet is growing making them become effective players of websites and messaging apps while changing the way companies do business.

In this article you will discover how to easily create and add a chatbot to your website using Facebook Messenger. This will allow your customers to interact with your business at any time while benefiting of a pleasant experience. In addition, when leaving the website, they’ll still be able to access or continue the conversation from any device using their Messenger app. 

By following these 3 simples steps you will be able to have your chatbot up and running in your website, so let's get started!

Step #1: Create and build the chatbot

The first step is to create and start building a Facebook Messenger chatbot. In Hubtype you can do this from scratch or use a pre-made template to facilitate the process. You can have a look at our previous article to get access to all the details and information you may need to create your chatbot.

Create chatbot for website
Creating a new chatbot

Step #2: Publish the chatbot

Now that your bot is built, you will have to publish it in Facebook Messenger. To do this, simply click on the "Publish" button of your dashboard and among the different channels available select "Facebook Messenger". You will then only have to connect your Facebook account with Hubtype by the clinking in the "Connect Facebook" button.

Publish Chatbot in a Website
Publishing the chatbot

Step #3: Integrate Facebook Messenger to your website

Up to now the chatbot will be working in your Facebook page solely. You will then have to integrate it to your website by adding the Messenger Chat Plugin. To do so, follow these steps:

1. Whitelist the domain of your website in Facebook

  • Click on Settings at the top of your Facebook Page
  • Click on Messenger Platform
  • Add your website in the Whitelisted Domains section

2. Include the plugin in your website

  • Include a div with the following attributes in your HTML to set up Facebook Messenger and the chatbot in your website

<div class="fb-customerchat"

 page_id="<PAGE_ID>"

 ref="<OPTIONAL_WEBHOOK_PARAM>"

 theme_color="<HEX_COLOR_CODE>"

 logged_in_greeting="<GREETING_MESSAGE_FOR_LOGGED_IN_USERS>"

 logged_out_greeting="<GREETING_MESSAGE_FOR_LOGGED_OUT_USERS>">

</div>

Adding a chatbot to a website
Integrating the chatbot to your website

That's it, you're done! Your bot is now fully functional, live in your website and ready to interact with people! As you see building a website chatbot with Hubtype is a fairly simple process that can be done by anyone with some basic tech chops!

    ⚡️ For being up to date with the latest news on messaging and chatbots space, subscribe to our newsletter.

Try Hubtype today for free!

CREATE A CHATBOT NOW
⬅︎ Back to resources