FTC ArticlesFTC Processes Joseph Hansen Test AreaCreating a Facebook Chatbot: Part 1/2

Creating a Facebook Chatbot: Part 1/2

Why bother?

Creating a chatbot in Facebook is a good way to engage with customers, even when you can't physically engage with them. By using AI and automated replies, you can instantly and intelligently provide information to visitors.

It's also worth noting that Facebook rewards fast response to messages. Your page probably shows something like this on the right sidebar:

This is also shown to anyone that visits your page. If you can respond faster and more often, you get a badge that shows visitors your commitment to interacting with them. Pages with this badge also have higher engagement overall, as Facebook prioritizes them for ads and organic search. The best way to make sure no message goes unanswered is with a chatbot.

At the end of this article, you will have a fully functional chatbot. Part 2 deals with AI and text recognition, and will expand your functionality even further. It's good information, but if you just need something simple that works, this article will do the trick.

Basic Setup

Facebook does not have a built-in way to create AI chatbots in Messenger- you'll need to use a third party service and connect it to Facebook. Chatfuel is a highly effective system that has a solid free option. Other systems, like Botify and itsalive.io, are less robust in what their free offering can do.

Go to chatfuel.com, and select "Get Started for Free."

Once you click this, after a few seconds wait, you will be re-directed to the Facebook log-in page. (If you have already signed into Facebook, this will automatically take place.)

Once you've logged in, Chatfuel will ask which pages to connect. You can choose from any pages you own, edit, or contribute to in an admin or editor role. You must have a Facebook page created to use Chatfuel- you can't connect a personal Facebook account.

After confirming connection, you will be redirected again- back to the Chatfuel dashboard:

Chatfuel will throw you into this somewhat confusing (i.e., cluttered) UI right off the bat. Before exploring this, it's important to know how to get to your overall dashboard, where you can manage all your chatbots. The overall dashboard is also where you will be taken in future when you go to dashboard.chatfuel.com. (Bookmark that sucker!)

To get there from here, click this arrow:

Obviously, the bot we are currently editing is "My First Bot". If you're unsure of which bot is which, you can see which Facebook is connected directly underneath the name of the bot. Clicking on "My First Bot" will take you back to the editor screen we saw earlier. Let's explore what is going on there:

Simple Bot 1: URL Redirect with Buttons and Customization

Chatfuel uses a "block" system. A block is a large collection; essentially, a conversation. You can map out the flow of the conversation by using "elements." You can also use "AI Rules" to help your bot better engage and respond. Elements are how the bot interacts with visitors- through text, images, redirects, buttons, questions, forms, and such. AI is how the bot knows when to use each element. You CAN just use elements to set up a full conversation. For example, you can set it up where the user is simply presented with a series of buttons to click. Let's look at that first.

We're going to make a block that asks the user for their favorite food. Depending on their response, they will be sent to different webpages. Let's start by removing both of the default blocks. Click the three dot menu,  then click Delete:

Do this for both of the blocks. You will now have a blank canvas. Next, let's add a Text element. This will show the user some text and give them button options. Click on the Text Element:


You now have the option to type a message. Note the limit of 640 characters. Even more importantly, you can customize your message with things ranging from first name to last name to profile picture (and many more.) In order to use a customization, type {{ and choose from the drop-down menu. For example, "{{first name}}" gives the user's first name.

There is no save or update button- you may simply click out of the text editor to confirm your message.

Below the message, there is a field saying "+Add Button (Optional)". This is how we will learn the user's favorite food. For now, we're going to keep it simple and use emojis for a few different foods.

Here's an example button. We will explore Blocks more later, but for now, URLs will work. Again, saving is done by clicking away from the button.

You can add up to three buttons in one block:


This is our first chatbot successfully completed! If you click on the link by the bot name, starting with "m.me/", you can preview exactly how this bot will work. In this case, that chat looks something like this:

Simple Bot 2: Redirect, Responses, and Typing

Having created this simple bot, it's now time to expand and move forward. First of all, let's create a sense of humanity by having the bot briefly show the typing symbol before they send that message. This is done with the "Typing Element". Add this typing element and then drag it to be above the first message, using the double-ended arrow visible when you hover. You can change the minimum amount of typing time to whatever you feel is most suitable.

Now, in order to provide a response, we're going to add three blocks- one for each choice. Look on the left, and you'll see this (delete any unneeded blocks):


We're currently editing the welcome message block. This is the first message a visitor will receive. Add three more blocks; Pizza, Noodles, and Steak, by clicking on the circled + button. For each block, add a Typing and a Text element. The text element for Pizza will say "Wow, {{firstname}}, I love pizza too!" For Noodles and Steak, replace "pizza" with the appropriate food. Now, go back to the welcome message. We are going to edit the three buttons, so instead of linking to a URL, they link to the appropriate block.

Click the button, click "Block", (there are three tabs at the top), and select from the drop-down.

Our welcome message now looks like this:

Taking it back into Messenger, we can see what this interaction looks like. Please note that from here on out, I'm using dummy Facebook accounts. ONCE YOU TEST A BOT, YOU CANNOT RE-TEST THAT BOT ON THE SAME FACEBOOK ACCOUNT. This is one major drawback, in professional terms, or incredibly lame for the layman in all of us. The best workaround is to make sure your bot is perfect and test it only once.

Using buttons in this way is an easy and quick way to move users through a flow. In order to actually move, however, a Redirect is needed.

(Note: this is not TECHNICALLY true, as Quick Reply will redirect without a Redirect Element.  Assume it's true for now, because I know things and you've trusted me so far. Thank you for that!)

Let's use redirect to bring all three blocks back to one single block, for the next question. Make a fourth block, called "Pitch." We're going to use this to inform customers that our fictional restaurant is a good option. Before we add any content to Pitch, let's redirect all the options into this path.

Go to Pizza and add a Redirect element at the bottom of the flow. This element is simple to use- just pick Pitch from the drop-down menu. Do this with all three choices.

Now, in Pitch, we're going to inform customers of a sale going on right now. To keep it simple, we'll just add a Typing and a Text message. Let's see what this looks like in Messenger (this using a friend's phone, due to the limitation described in red. Seriously, what the heck. This is a terrible flaw):

As simple as this is, you have just created a fully functional chatbot. Here are the functions we've covered so far:

  • text
  • typing
  • emoji buttons
  • text buttons
  • blocks
  • redirects

One last thing of note: you can make very complex branching paths this way. Right now, all three choices from the first message lead back to the same block. It would be quite simple to have a different block for each choice, which would create three different paths. I'll say no more about that, as the advantages of such a flow seem fairly self explanatory.

You now have everything you need to communicate with a user artificially, as long as they follow your flow path. Right now, if a user types something, they will receive a default "I don't understand" message. In other words, they can click buttons and gain valuable information, but can't provide much information. Part 2 discussing using this user input to enhance your chatbot further.