How To Build Facebook AI Chatbots Using Chatfuel
How To Build Facebook AI Chatbots Using Chatfuel
How To Build Facebook AI Chatbots Using Chatfuel
Facebook AI
Chatbots Using
www.edselpauloaguirre.com 1
Why ?
No programming
required. Easily add and
edit content what you
see is what you get.
www.edselpauloaguirre.com 2
Lets Build!
www.edselpauloaguirre.com 3
Open your default internet browser
www.edselpauloaguirre.com 4
Double click internet browser icon
www.edselpauloaguirre.com 5
Click browser address bar
www.edselpauloaguirre.com 6
Enter Chatfuel home page address
www.chatfuel.com
www.edselpauloaguirre.com 7
Then press Enter key to continue
www.edselpauloaguirre.com 8
Chatfuel homepage will launch
www.edselpauloaguirre.com 9
Click Log In to start
www.edselpauloaguirre.com 10
Or GET STARTED FOR FREE
www.edselpauloaguirre.com 11
Log into Facebook page will launch
www.edselpauloaguirre.com 12
Click Email or Phone textbox
www.edselpauloaguirre.com 13
Enter registered email address
www.edselpauloaguirre.com 14
Click Password textbox
www.edselpauloaguirre.com 15
Enter your password
www.edselpauloaguirre.com 16
Click Log In to continue
www.edselpauloaguirre.com 17
Permission to connect Chatfuel to
Facebook
www.edselpauloaguirre.com 18
Click Continue as Facebook account
www.edselpauloaguirre.com 19
Accept Chatfuel Terms of Service
www.edselpauloaguirre.com 20
Click Terms of Service to read
www.edselpauloaguirre.com 21
Click I have read and agree
www.edselpauloaguirre.com 22
Click OK, LET ME IN to continue
www.edselpauloaguirre.com 23
Welcome to Chatfuel Dashboard
www.edselpauloaguirre.com 24
Click + to build Chatbots
www.edselpauloaguirre.com 25
Choose a Template page will launch
www.edselpauloaguirre.com 26
Click Blank Chatbot
www.edselpauloaguirre.com 27
Rename Chatbot
www.edselpauloaguirre.com 28
Highlight and delete default chatbot
name
www.edselpauloaguirre.com 29
Enter new chatbot name
www.edselpauloaguirre.com 30
Click CREATE A CHATBOT
www.edselpauloaguirre.com 31
Created chatbot added into the
dashboard
www.edselpauloaguirre.com 32
Click the created chatbot
www.edselpauloaguirre.com 33
Lets start to build Bot structure
www.edselpauloaguirre.com 34
Bot structure is compose of groups
that contain blocks
www.edselpauloaguirre.com 35
Block that contains cards
www.edselpauloaguirre.com 36
And card that contains gallery, text
card, image or plugin
www.edselpauloaguirre.com 37
Lets edit the default welcome
message
www.edselpauloaguirre.com 38
Click on message to edit
www.edselpauloaguirre.com 39
Enter new Welcome message
www.edselpauloaguirre.com 40
Click ADD BUTTON
www.edselpauloaguirre.com 41
Click Enter button name
www.edselpauloaguirre.com 42
Enter button name How are you?
www.edselpauloaguirre.com 43
Click Enter block name
www.edselpauloaguirre.com 44
Enter block name How am I?
www.edselpauloaguirre.com 45
This block will appear when How are
you? button is clicked
www.edselpauloaguirre.com 46
Click + Create block name since
block not exist
www.edselpauloaguirre.com 47
Block created
www.edselpauloaguirre.com 48
Click Done to continue
www.edselpauloaguirre.com 49
Button added
www.edselpauloaguirre.com 50
Click ADD BLOCKS HERE to rename
block
www.edselpauloaguirre.com 51
Enter preferred block name and press
enter Welcome Answers
www.edselpauloaguirre.com 52
Click created block to edit
www.edselpauloaguirre.com 53
Lets add text and click TEXT CARD
www.edselpauloaguirre.com 54
Click Enter Text
www.edselpauloaguirre.com 55
Enter and compose text message
www.edselpauloaguirre.com 56
Every change is automatically saved
www.edselpauloaguirre.com 57
Lets add a group of blocks
www.edselpauloaguirre.com 58
Click + ADD A GROUP
www.edselpauloaguirre.com 59
Click on group name to rename
www.edselpauloaguirre.com 60
Enter preferred group name and press
enter - NAVIGATION
www.edselpauloaguirre.com 61
Click + to add blocks
www.edselpauloaguirre.com 62
Click on block title name to rename
www.edselpauloaguirre.com 63
Enter preferred block name and press
enter Welcome Navigation
www.edselpauloaguirre.com 64
Lets add text and click TEXT CARD
www.edselpauloaguirre.com 65
Enter and compose message
www.edselpauloaguirre.com 66
Welcome Navigation block as our
default navigation
www.edselpauloaguirre.com 67
Lets add Closure block to end the
conversation
www.edselpauloaguirre.com 68
Back to How am I? block
www.edselpauloaguirre.com 69
Lets add our Navigation blocks
www.edselpauloaguirre.com 70
Add and click TEXT CARD
www.edselpauloaguirre.com 71
Enter text message to continue or not
www.edselpauloaguirre.com 72
Then well add quick reply instead
www.edselpauloaguirre.com 73
Quick reply is suggested to improve
user experience
www.edselpauloaguirre.com 74
Click + ADD QUICK REPLY
www.edselpauloaguirre.com 75
Click Enter button name
www.edselpauloaguirre.com 76
Enter preferred button name - Yes
www.edselpauloaguirre.com 77
Click Enter block name
www.edselpauloaguirre.com 78
Enter existing block name
www.edselpauloaguirre.com 79
Click DONE to continue
www.edselpauloaguirre.com 80
Do the same for Closure block - No
www.edselpauloaguirre.com 81
Now lets add block with image cards
www.edselpauloaguirre.com 82
Click + to add block from Welcome
Answer group
www.edselpauloaguirre.com 83
How do you look? block created
www.edselpauloaguirre.com 84
And added text card also
www.edselpauloaguirre.com 85
Click IMAGE card
www.edselpauloaguirre.com 86
Click Upload Image and select local
image file
www.edselpauloaguirre.com 87
Uploaded images will appear in the
block
www.edselpauloaguirre.com 88
Next lets add a gallery card
www.edselpauloaguirre.com 89
Again click + to add block
www.edselpauloaguirre.com 90
Click GALLERY card
www.edselpauloaguirre.com 91
Click Upload Image and select from
your local images
www.edselpauloaguirre.com 92
Click Heading to enter header text
www.edselpauloaguirre.com 93
Click Subtitle or description to enter
text
www.edselpauloaguirre.com 94
Click on URL to add URL address
www.edselpauloaguirre.com 95
We can add button per image and a
quick reply for the gallery
www.edselpauloaguirre.com 96
Click + to add another images
www.edselpauloaguirre.com 97
And turns it into a gallery
www.edselpauloaguirre.com 98
Now lets create user input
www.edselpauloaguirre.com 99
Add new block - Basketball
www.edselpauloaguirre.com 100
Click PLUGIN card
www.edselpauloaguirre.com 101
Click User input plugin
www.edselpauloaguirre.com 102
Click BOT MESSAGE and enter text
www.edselpauloaguirre.com 103
Click USER VARIABLE NAME and enter a
variable name
www.edselpauloaguirre.com 104
Click + ADD FIELDS to add another
www.edselpauloaguirre.com 105
To get the result, lets select via email
www.edselpauloaguirre.com 106
Click Choose a result and select Email
www.edselpauloaguirre.com 107
Click EMAIL ADDRESS and enter the
administrator email address
www.edselpauloaguirre.com 108
Click SUBJECT textbox
www.edselpauloaguirre.com 109
Enter email subject
www.edselpauloaguirre.com 110
Then we added a button calling the
created block with user input
www.edselpauloaguirre.com 111
Click and open Default answer block
www.edselpauloaguirre.com 112
Default answer block is your bots
default response to any input
www.edselpauloaguirre.com 113
Create messages in this block that will
guide your users
www.edselpauloaguirre.com 114
Now lets set up an AI
www.edselpauloaguirre.com 115
Click Set up AI
www.edselpauloaguirre.com 116
Click and enter related phrases
www.edselpauloaguirre.com 117
Click and select if the response is text
or a block
www.edselpauloaguirre.com 118
If text then enter text in the textbox
www.edselpauloaguirre.com 119
If block then select a block
www.edselpauloaguirre.com 120
Click + ADD AI RULE to add another
www.edselpauloaguirre.com 121
Now lets test our chatbot
www.edselpauloaguirre.com 122
Click TEST THIS CHATBOT
www.edselpauloaguirre.com 123
Then click VIEW ON MESSENGER.COM
www.edselpauloaguirre.com 124
Messenger page will launch
www.edselpauloaguirre.com 125
Click any button to view results
www.edselpauloaguirre.com 126
Text cards and quick reply buttons
www.edselpauloaguirre.com 127
Image cards
www.edselpauloaguirre.com 128
Gallery card
www.edselpauloaguirre.com 129
User input plugin
www.edselpauloaguirre.com 130
Emailed results of user input
www.edselpauloaguirre.com 131
Enter a phrase to test AI
www.edselpauloaguirre.com 132
Ai successfully works
www.edselpauloaguirre.com 133
Enter any text for default answer
www.edselpauloaguirre.com 134
Default answer block prompted
www.edselpauloaguirre.com 135
Enjoy building Chatbots with