Understanding and Creating ChatBots

By Bradley Jones

It is not uncommon to come across a site where you are asked to chat, or where a question is posted to you that starts a conversation. It is getting harder to tell if you are talking with a person or with an automated system. Often, the entity on the other side of a chat is an automated system or bot, and not a real person!

These chatbots are great for narrowing down what a user is trying to do or for helping direct them towards a specific solution. For example, if a user is on on a travel site, a chatbot might ask if they are taking a trip. If they answer yes, then the bot might present a special offer from the site, or it might try to get additional information about where the user is going. Questions can be asked such do you need a flight, do you need a hotel, what is your destination, and so on. These can help narrow down what the user wants, and at the same time help you target advertising to offers they are more likely to click. In many cases, bots can replace searching that would otherwise occur on your site. They can also reduce the amount of time a living person needs to help a customer, and thus reduce your cost in running your business.

Figure 1 contains a short dialog from a bot I created. This chatbot is displayed when you go to a page on Facebook that was created to support a series of books. Similar bots can be created for your own sites or your own Facebook pages.

Figure 1: Sample Chatbot

The chatbot in Figure 1 welcomes a new visitor and then asks if they have one of the books in the series. If they don't, then the bot asks if they would like more information on one of the books. If they do, they are sent to Amazon where they can buy the book! If not, they are thanked for their time and left to use the site. Had they clicked yes in that last question shown in Figure 1, they would have been asked if an Amazon page could be opened, which would then display the book on Amazon.

This chatbot is relatively standard in that it displays information and asks questions. Depending on the answer to the question, the user is given a new prompt. The creation of this chat took only a few minutes. In fact, both, a new page on Facebook was created (which won't be covered here) and the chat bot, were created in about ten to fifteen minutes.

Creating a ChatBot

There are a number of free chatbot platforms and development tools. The chatbot created here was done with Chatfuel, which has a free version available on line at www.Chatfuel.com. This tool creates chatbots for Facebook; however, the concepts used will be similar to tools for other platforms.

When you first go to this Chatfuel site, you'll be greeted their standard home page. You'll want to continue by clicking the Facebook button. Because the bot will be associated to a Facebook page, you will be given a choice of your own pages to select from. If you have no Facebook pages, then you'll need to create one. Figure 2 shows the page I was greeted with when I first signed on. Note that I have a lot of pages associated with my Facebook account!

Figure 2: Chatfuel screen for selecting Facebook page

You can pick one of your pages or create a new page. Note that this bot will run when someone comes to your page, so you'll want to make sure the page selected is appropriate. I created a new page in Facebook for the bot I displayed earlier.

Once you've selected or created a page in Facebook for your bot, Chatfuel will require you to create an account. Since you've signed in with Facebook, this simply means you need to select the Free or Pro option as shown in Figure 3.

Figure 3: Selecting a Chatfuel account

I selected the free account which was adequate for creating and testing. If you have a very active page, you'll need to consider a pro account.

With an account created, you'll be placed in the Chatfuel work area as shown in Figure 4.

Figure 4: The Chatfuel work space

This work space has an initial block with greeting text along with a couple of chatbots displayed in the lower right that you can use to get more information. If you click on the TEST THIS CHATBOT button on the upper right, the default chat text block will be executed on the Facebook page you linked to earlier. It will display the same message you see in the middle of Figure 4, but in a chat window on your Facebook page.

Of course, that's not the chatbot you want. To make a more relevant bot, you can simply click in the Welcome Message block and change the text. You can leave the first name placeholder as that will be replaced with the user's first name form Facebook when the bot is executed.

Each message you create will be a block. You can create these blocks of dialog and give them names. You create the blocks by clicking on the + button on the left side of the page where it says ADD BLOCKS HERE. Each block can be added and named. Figure 5 shows the added blocks for the chatbox example presented in Figure 1. You'll see that a welcome message modified, and that blocks were added for "Thank you for Yes", "Get DTforFoC", and "Final Message".

Figure 5: Note the dialog blocks in the left area

In order to flow for one block of text to the next, the user needs to be able to interact. In the case of the example here, a simple flow of yes / no questions is used. A block of text, like the welcome message, is displayed, then two buttons are added. To add the buttons, simply click the + ADD BUTTON text at the bottom of the text block that is selected and displayed. This will pop up the button dialog for adding the button similar to what is shown in Figure 6.

Figure 6: Adding a button to a chat dialog

In this button dialog, you can give the button a name. This is what will be displayed to the user. As such, I entered "Yes" for the first button I created, and then "No" for the second.

With the button named, the next step is to add the action you want to happen when that button is selected. If you want to respond with a message, then you'd create a block with that message as mentioned before. You'd then select the name of that block in the "Enter block name" textbox.

If you want to send the user to a different place, then you can use the URL. Selecting Phone call will allow a phone number to be entered and used.

After the welcome message, if the user says yes in the chat, then they are thanked for knowing about the books and series. They are then asked if they have a specific book. This means that a yes button will be added that goes to a new text block. If the user says no, then we will ask the user if they want more information on the core book in the series as shown in Figure 7.

Figure 7: Chat dialog in designer with 2 buttons added. One with URL, one with message block.

This block will then have its own yes and no buttons. If the user says 'Yes' then a URL is called. If they say no, then a final message block is shown with no further action. You should be able to see this bot (or something similar) in action the first time you go to https://www.facebook.com/DiscipleshipTrainingforFollowers/.

Summarizing What Just Happened

Clearly, what was shown here was minimal; however, it was also extremely effective and easy. This article has shown just the extreme basics of what can be done with tools like Chatfuel. By adding this type of feature to your sites, you increase the level of interactivity and engagement you can obtain without having to increase staffing. Chatfuel is just one of many tools that can help you do this level of functionality. Best of all, not a single line of code was written! Note: At the time this article was written, I had no affiliation with Chatfuel. I chose it simply because it was free and easy to use.

  • Web Development Newsletter Signup

    Invalid email
    You have successfuly registered to our newsletter.
Thanks for your registration, follow us on our social networks to keep up-to-date