We will create a chatbot that will act as a city tour guide for the user or tourists. The chatbot conversations will include tourist conversations such as nearby places to eat, places to visit as example tasks. We will build a chatbot using various tools in the toolkit to create a chatbot that will perform these conversational tasks using Chatfuel from scratch.
What is Chatfuel?
Chatfuel is a tool that enables you to build a chatbot without having to code at all. It is a web-based tool with a GUI editor that allows the user to build a chatbot in a modular fashion. In addition to building chatbots, it also enables developers to monitor and manage the bot’s performance using management and analytics tools for Facebook.
We will now start building a city tour guide chatbot from scratch and deploy it on Facebook Messenger by integrating various features provided by Chatfuel.
Starting with the Chatfuel
- Create an account with Chatfuel, go to https://chatfuel.com
If you are logged into Facebook, it will ask for permission to link your Chatfuel account to your Facebook.
2. Create a page on Facebook:
Go to your Facebook account> Home Page>Under the explore options, select Pages> Create a page of your choice.
3. Chatfuel has to be linked to the Facebook account to deploy bots. So it requires permission to use the Facebook account:
4. Go to https://dashboard.chatfuel and link your Bot page to Chatfuel. Let’s name it city tour guide. Click CONNECT TO PAGE, and you will be taken to Bot editor.
5. The name of the bot is set to My Bot. It has a URL, which you can see by the side of the name. These URLs start with m.me. You might notice that the bot comes with a Welcome message built-in. On the left menu, you will see the number of options.
Trending Bot Articles:
6. Go to the Messenger URL start your first conversation with the bot, which will open Facebook Messenger in the browser tab.
To get started with the conversation, just hit the “get started” button.
THERE YOU GO!!
Your conversation with the bot has just started and the bot has sent you a welcome message. The bot greets you by your name because you have given access to your info on Facebook.
BASIC BUILDING BLOCKS
Before building the bot, we will look at the basic building blocks:
i. BLOCKS: Under the bot structure tab, there are two types of blocks, build-in and user-defined. Welcome Message and Default Message are the two build-in blocks. We will be building user-defined blocks to implement the conversation capability of the chatbot. Each bot can contain one or more cards.
ii. CARDS: Cards are used to send messages to the deployment platform. There are many types of cards available. Text cards are the basic types of cards which include text messages and optional buttons. Other cards include images, quick replies (button arrays), lists, and gallery.
iii. BUTTONS: Buttons are used to provide users with response options and it also includes quick reply buttons.
iv. PLUGINS: There are number of plugins available. They are used to used to carry out special tasks instead of just responding to the user.
v. ATTRIBUTES: Attributes are like placeholders where we can store data temporarily during the conversation.
LET’S START BUILDING OUR BOT!
Now, let’s add a WELCOME MESSAGE!
- We can now edit the default text and add our welcome message.
2. Now, by adding the text card, let’s add a follow-up text card and ask the user a question. Example “What would you like to do today?”
3. Now, we can add buttons like nearby attractions and nearby restaurants to the text card. You can add up to three buttons to the text card.
4. Button responses like nearby attractions and nearby restaurants needs to be attached to a block so that when the user hits the button the chatbot should know what to answer.
5. Let’s add BLOCKS to the bot structure tab, which creates an Untitled Block on the right-hand side.
6. Let’s add two blocks for now, “NearbyAttraction” and“NearbyRestaurant”.
7. Now, let’s go back to the buttons and assign the given blocks to them.
8. For each block, you created, add content by adding appropriate cards. Remember, each block can have more than one card. Each card will appear as a response, one after another.
Similarly, for restaurants, we add the text cards with buttons
WELL DONE! You can now test the bot by clicking the TEST THIS CHATBOT button in the top-right corner of the editor
Don’t forget to give us your 👏 !