Facebook Chatbot Tutorial

(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 artiﬁcial
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 ﬁnd 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 ﬁrst

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 ﬁrst 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 ﬁrst
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 ﬁrst card will be our Menu

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

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

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 ﬁrst:

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

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

Enter the ﬁrst 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

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 conﬁrmation 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

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

Select Destinations from the dropdown and
click the check button

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

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 x to delete the Default answer block

We’ll now setup the chatbot’s
Artiﬁcial 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

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 ﬁrst
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
conﬁrmation
message

Email
notiﬁcation 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!

Facebook Chatbot Tutorial

Recomendados

Recomendados

Mais conteúdo relacionado

Destaque

Destaque (19)

Semelhante a Facebook Chatbot Tutorial

Semelhante a Facebook Chatbot Tutorial (20)

Último

Último (20)

Facebook Chatbot Tutorial