how to create facebook ai chatbots using chatfuel

(c) Conversion-Focused VP | http://eleazarjose.com(c) Conversion-Focused VP | http://eleazarjose.com

(c) Conversion-Focused VP | http://eleazarjose.com

Welcome to Facebook AI Chatbots for Newbies!


What is a Facebook AI Chatbot?


It’s a service, powered by rules and sometimes artificial

intelligence that


you interact with using the Facebook Messenger app


The service could be any number of things,


ranging from functional to fun


Example

If you wanted to buy shoes from Nordstrom online,


Example

you would go to their website,


Example

look around until you find the shoes you wanted,


Example

and then you would purchase them.


Example

If Nordstrom makes a bot, which I’m sure they will,


Example

you would simply be able to message Nordstrom on Facebook.


Example

It would ask you what you’re looking for and


Example

you would simply… tell it.


Example

Instead of browsing a website,


Example

you will have a conversation with the Nordstrom bot,


Example

mirroring the type of experience you would get


Example

when you go into the retail store.


What is Chatfuel?


It’s a web based app to create Facebook chatbots without coding


You can launch a full featured chatbot in 7 minutes


Let’s start!


In this tutorial, we’ll create a chatbot for a Steakhouse

Restaurant


First, you’ll need to create a Chatfuel account


Open your favourite web browser


Type chatfuel.com in the address bar and hit Enter


This is Chatfuel’s home page


Click Get Started For Free


You’ll need to be logged in to your Facebook account


Click Continue


Give your chatbot a name


Select Blank Chatbot


Click Connect To Facebook


If you have Facebook pages, you will see them here


If you don’t have a Facebook page yet, create one first


Assuming you already have a Facebook page, click Build


This is the chatbot structure where you will build your chatbot


Welcome message block


This is the message your bot will send every new user


the first time they communicate with your bot


Add another card to add a greeting and upload an image


Click Gallery under Add a card


Add you greeting, subtitle and click Upload Image


Choose an image from your computer and click Open


Drag this card to the top so that it’s the first message


Change the text of the second message


Add an introductory text


Change the button text to lead to the Navigation


Let’s create a group and name it Navigation


Click Add A Group


Name it “Navigation” and click Add Block


Give your block a name, say “Navigation”


In this case, Navigation consists of 2 cards


The first card will be our Menu


Click Gallery under Add a card


Add a title and description


Add a button that will lead to our restaurant menu


Add an image to this card


The second card will be our Hours and Directions


Click this to add a new gallery card


Add a title, description, 2 buttons and an image


Here’s the output


It’s time to build out the menu for our steakhouse


Let’s create a Menu group and a block inside of it


Click Add A Group


Name it “Menu” and click Add Block


Name your block as “Menu” and add a Gallery card


Enter menu item, description and picture


Add 3 more cards and give them menu items, descriptions and images


Add a card at the end of the gallery


This card will link back to our chatbot’s Navigation


Add an image, title and button text


Link the button to our Navigation block. Click this.


Select Navigation from the dropdown and click the check button


Let’s add a group and a block called Destinations


This will help users get to our restaurant


Click Add A Group and name it “Destinations”


Click Add Block and name it “Destinations”


Add a Gallery


Create 2 text cards with descriptions but without buttons.


Click this to add another card


Add a Google Maps picture


Add a description


Add Google Maps link of your restaurant here


User will be redirected to the location of your restaurant in Google Maps when linked is clicked


Add another card that will return users to the Navigation screen


Add an image, title and button text


Link the button to our Navigation block. Click this.


Let’s now create the path to reserve a table


Click Add Block under the Destinations group


Name your block “Reserve a Table”


We’ll create a form to record user’s responses


You can structure questions from your chatbot and


users answers will be recorded


Click Plugins


Select User input


In this example, we’ll have our bot ask this question first:


“What time and date would you like to reserve a table?”


Then the bot asks the second question: “How many are you?”


Enter the first question here


Assign a variable name to the user’s answer to the question


Click Add Fields to add another question


Enter the second question here


Assign a variable name to the user’s answer to the question


Forms have a rich feature in terms of the data they send


In our case, we’ll choose the simplest which is Email


Click the dropdown menu under Result


Select Email


This will send the user’s responses to the chatbot’s

administrator email


Enter the chatbot’s administrator email here


Enter the email’s subject here


Add a confirmation message letting users know that everything went well


Add a button that returns them to the Navigation screen


Click Default to link the button to the Navigation block


Here’s the output


Let’s go back to the Navigation block


Link the Menu card’s button to the Menu block


Click this


Select Menu from the dropdown and click the check button


Link the Hours and Locations card’s Show Locations button to the Destinations block


Click this


Select Destinations from the dropdown and click the check button


Now link the Reserve a Table button to the Reserve a Table block


Click this


Select Reserve a Table from the dropdown and click the check button


Open the Default answer block


This is the standard response from the bot


when it can’t understand the user’s request


Fill it in with your message


Add a button to go to the Navigation screen


Click this


Click x to delete the Default answer block


Here’s the output


We’ll now setup the chatbot’s Artificial Intelligence (AI) feature


Click Set up AI


Click this to add a new AI rule


This will contain phrases and an output block


AI detects phrases similar to those that we’ve introduced and


shows the respective block


Add common phrases here that user’s are likely to use


Click this to add another phrase


Select the block that will be activated when these phrases are entered


Select the Reserve a Table block under the dropdown


Now we’re ready to connect this chatbot to our Facebook page


Click Connect To Facebook


Connect the chatbot to the correct Facebook page. Click Connect To Page.


Chatbot is now connected. Click Test This Chatbot to see if it’s working.


For this test, we’ll use the Messenger app on an iPhone


Tap Get Started


Welcome message

Tap Show Navigation


Navigation screen

Swipe left to see the next

page.


Next page of the Navigation

screen

Swipe right to return.


Tap Show Menu


Menu screen

Swipe left to see the other

pages.


Go Back screen

Tap Show Navigation to

go back.


Let’s check the Hours and Locations

screen. Tap Show

Locations.


Destinations screen

By Subway page. Swipe

left.


Destinations screen

Parking Information

page. Swipe left.


Destinations screen

Directions on Map page. Click

the link.


This will show the location of the restaurant

on Google Maps.


Tap Cancel to go back to Messenger.


Swipe left


Go Back screen.

Tap Show Navigation to

go back.


Now let’s check the Reserve a Table screen. Tap Reserve a

Table.


Here’s the chatbot’s first

question to reserve a table.


Type the time and date you

want to reserve a table and hit

Send.


Chatbot’s second

message appears


Type how many you’ll be and hit

Send.


Here’s the confirmation

message


Email notification for the reservation


Tap Navigation if you want to go back to the

Navigation screen


Let’s test if the default

message is working


Type anything and hit Send


Chatbot’s Default message appears since it

can’t understand the user’s message


Let’s test the chatbot’s AI


Type one of our AI phrases (Reserve a

table) and hit Send.


The AI is working. Great!


That’s it!


Go ahead and create Facebook AI Chatbots using Chatfuel!


Thank you for visiting this tutorial!

how to create facebook ai chatbots using chatfuel

Education