Last Updated on

In this post, I am going to show you how to build a simple facebook messenger AI chatbot for website without coding with chatfuel and integrate it into your blogger/blogspot website.
chatbot for website
Here is all what we are going to do

  1. Understand everything about chatbot (talking robot)
  2. Create a simple one
  3. Integrate into a website
  4. Setup automation
  5. Get some subscribers

Let’s get started…

What is an AI chatbot for Website

AI Chatbot for Website which started as a customer support services have long gone viral in the marketing world,
Chatbots for websites can now be used in getting leads (emails), growing traffic and even selling more products right on messenger.

A chatbot (also known as a talkbot, chatterbot, Bot, IM bot, interactive agent, or Artificial Conversational Entity) is a computer program or an artificial intelligence which conducts a conversation via auditory or textual methods – Wikipedia

A few months ago, Push notifications came up, which took up a tag name of “Nobody read emails anymore” – quite true…
chatfuel users
Guess that’s why Facebook messenger chatbot for website has now taken over the marketing game.
Instead of sending emails users no longer read, or bugging visitors for push notification opt-ins, you can now easily get them via messenger using chatbot for website.

How far has AI chatbot for website gone?

Chinese WeChat bots can already set medical appointments, call a taxi, send money to friends, check in for a flight and many many other. – Source TheStartUp
Gartner forecasts that by 2020, over 85% of customer interactions will be handled without a human.
That’s to show that the world of AI chatbot for website is just starting.
Chatbots have also been seen to have the highest conversation rates when compared to Emails and Push notifications
chatbot vs email vs push notification
So if you don’t have a facebook page chatbot for your website, its time to get one
and good news – no coding required.

4 Benefits of a Chatfuel Chatbot for Website in 2019

  1. Chatbot for website acts as lead generation programs, to help collect user details.
  2. Chatfuel Chatbots makes it easy to send automated messages (RSS) to users via messenger
  3. Chatbots made with Chatfuel easily integrate with websites and are more effective since users are used to the Facebook platform
  4. Chatbots for website can be used to run targetted adverts to users and increase product sales for customers.

Chatbot for Website examples.

Let’s take a look at some chat bot for websites…

Jokos by Blogging Prince

If you have ever messaged me on Facebook (page) then you must have met my annoying buddy Jokos.
The major purpose of Jokos is to respond to messages when am not available and most importantly
send users my daily articles…
Here is a welcome message from Jokos…
chatbot for website example
and here is jokos sending my latest blog post ” ” to a user.
chatbot examples
That’s all from Jokos.
here is another example.

OgbongeBlog Chatbot

This is another simple chatbot which I find useful.
actually, it currently entertains 431711 users
chatbot subscribers
That’s huge.
so let’s take a look at out our last chatbot example
That’s all for examples…
let’s built a simple messenger bot without coding.
Here are the requirements

  1. A Facebook page
  2. Free chatfuel account

How to create a facebook page.

First thing first, Visit
create facebook page
Under Business, Click “Get Started”
Fill in the details.
I am a blogger, So I choose blogger.
Upload a profile picture. I recommend yours or your blog logo.
Next is to upload your Cover image.
That’s all… Your page is all set.
Start by inviting a few friends
and setting your page username

How to Create a Facebook Chatbot for your page using Chatfuel.

To create a facebook chatbot for website, you need a platform so you won’t build from scratch.
These platforms act like a “CMS” that lets you manage and control your free chatbot.
For this tutorial, I am going to be making use of Chatfuel but will first show you the best platforms.
Note: All platforms are the same, the only difference is the UI.

2 Best Chatbot For Website Platforms in 2019.

1. Chatfuel

Chatfuel is one of the best chatbot for website platforms to create a free messenger bot.
It provides all the basic options needed in a facebook messenger bot and its UI is very simple to understand.
Though it’s recent pricing is high, its free plan gives you ” ” which is just enough to manage a basic chatbot for your website.

2. ManyChat

ManyChat lets you create a simple Facebook messenger bot in just a few minutes.
It has a standard UI which you will find easy to understand and also have a lot of YouTube tutorials available.

Chatfuel Vs ManyChat

These two platforms are currently the commonly used platforms for creating facebook messenger bots.
ManyChat stands out with good features such as having a nice flow using tags
and also allowing you to add emoticons/smileys right in the dashboard.
While Chatfuel takes a different approach with attributes which act as ids but do not have smileys.
Chatfuel’s pricing lets you access certain features for free which includes a max limit of 5000 active users monthly, unlimited attributes, growth tools, etc
manychat pricing
while ManyChat facebook chatbot pricing gives Unlimited Broadcasts, 2 Broadcast Sequences, 4 Growth Tools, Facebook Comments Tool, 10 tags, 3 custom fields.
Do note that both free versions add the Chatfuel and ManyChat branding.

How to create a free Chatfuel Chatbot For Website In 2019

chatfuel homepage

  1. Visit¬† Chatfuel and Click “GET STARTED FOR FREE”
  2. It will prompt you to log in with Facebook and allow it to access your profile.
  3. It will redirect back to Chatfuel, where you have to connect the previously created facebook page.

That’s all.

How to Build a Messenger ChatBot For Website Using Chatfuel

When it comes to building a bot, Chatfuel, provides you with two options

  1. Use a custom template
  2. Use a blank template.

Since we are going to be building a very simple facebook messenger AI Chatbot, we are going to use a blank template.
chatfuel create from template
Click “Create from template” >> Choose “Blank bot”.
Let’s start working on the blank bot >> Click on “Blank bot 1”.
In this next part,
you are going to be seeing a few terms for the first time.
so, Let me explain them to you.

  • Block: A block is a set of information that is being displayed to a user whenever it is triggered.
  • Welcome message: This is the greeting message any user that opens your bot for the first time will receive.
  • Default answer: This response is triggered whenever a user types in an invalid message i.e a message that has not been registered by you.
  • Text: A block of information that contains only text and 3 action buttons.
  • Typing: A block that can be shown to a user to signify that your bot is responding (it simply shows typing as seen in the image)
  • Image: A block to embed an image in your conversation
  • Gallery: A block to display several images as the name implies.
  • Go to block: An action to redirect a user to a specific block, either randomly or selectively.

The above basic terms are enough to start up.
Let’s configure the facebook messenger AI chatbot.

How to Configure Chatfuel Chatbot Welcome message.

The welcome message, is the very first message users see when they click the get started.
This message is very important and should contain important navigation, so let’s just create a simple message box.
welcome block
Fill it as seen above.
Next, is to display items to lead the users.
welcome message block
Locate ” + Add Button”, create a menu and other items just as seen above.
We are going to create four blocks.

  1. The First to subscribe users
  2. Second to display the latest update
  3. To search for blog posts
  4. To direct visitors to the blog

chatfuel block
Navigate to “Add Block Here” and click the “+”.
Rename the block to “subscribe users”.
This box is what you are going to use, in subscribing users to your blog updates.
chatfuel subscriber plugin
In the box, click “Subscriber”
subscriber widget
In Link to a block a with a plugin, type in “Latest”.
That’s all.
Rename the block to “subscribe-users”.
This box is what we are going to use, in displaying our blog updates to any subscribed user.
chatfuel typing card
In order to look human, you need to add a “typing” message. So select the “Typing” message.
chatfuel typing card customization
it should be shown as seen above, you can reduce or increase how long it will take.
chatfuel rss text
Next, is to add a custom text that will be shown before displaying the RSS content such as “Here is a post based on your subscription”.
To create such, locate “Text card” and type in a response, just as seen above.
Next is to set up RSS card, to display the latest updates.
chatfuel rss import
To do that, scroll down the page and click “+” >> The pop-up locate “RSS import”.
chatfuel rss box
A new box should be shown, Fill it as seen in the image.

For BlogSpot users, replace RSS field with

You can always decide the number of posts to display in the “Show no more than” tab.
That’s all for the first block.
Let’s create the second block which is going to send your latest updates
Follow the same procedures above and create a block.
This time, name it “View latest updates”.
At this point, we are going to make use of RSS.
since we are going to display the latest updates from the blog.
Click on “Text”
You can add a simple text, such as “Here are our latest updates”
Next, let’s connect that block to RSS feed.
Click the “+” button
chatfuel rss import
In the pop-up box, locate RSS import.

  • URL: type in URL of your blog with (http or https)
  • SUBSCRIPTION TITLE: add attribute {{latest}}
  • Show no more than: Decide number of posts to show.

If you want users to be able to share the post from messenger tick it if you want them to read it right in messenger.
That’s all for displaying your latest posts right on facebook messenger.
Was that hard?
Next, the section is to link up our blocks and start testing.
Welcoming users to your bot.
Welcome message: Already explained above.
welcome message block
So We are just going to write a simple welcome message which you can customize later.

Welcome {{first name}}!! to “Blog Name” chatbot.
How may I help you today?

Now we are going to create two set of buttons using the “+ Add Button”
welcome message
right under the welcome message.

  • The first button >> Subscribe to Updates
  • Second button >> Latest Updates

What this simply does is,
display the information shown in these blocks whenever a user clicks on any.
After linking,
test this chatbot
Go ahead and test your bot with the “Test This Bot” shown above.
Note: If you did not connect your bot, to your facebook page, you will be prompt to do so.
The other quick work we going to do is the “Default Message”
default message
I already explained it. So click on it and this message.

Sorry, your value was not understood.
Please choose an option below

Add those two blocks as explained with the welcome message.
Easy right?
Next, is to set automation for our facebook messenger AI chatbot. i.e set it to automatically send users latest blog updates right on messenger.
my favorite section.
It’s a bit complicated though but I will work you through it.

Setting up Chatfuel Chatbot For Website Broadcast.

chatfuel broadcast
Go to “BroadCast” >> “Auto post from external source”.
subscribed autoposting
Since the users we wish to send blog updates to, are subscribed users,
we are going to make use of the attribute “subscribe” we create early.
By inputting that, our latest updates will be sent just to subscribed users.
Go to the “+” icon at the far bottom.
In the pop-up, click on RSS, below “Zapier autoposting”.
Next is to click “Set up this example workflow.” and we of to setup Zapier.
In the pop-up, click on RSS, below “Zapier autoposting”.
Next is to click “Set up this example workflow.” and we of to setup Zapier.

Setting up Zapier for Chatfuel Chatbot.

zapier rss
On the Zapier page, Click “use this zap”.
It’s going to require creating an account, its free though. after that, would meet this next page.
Click “Continue”.
zapier rss url
This requires your RSS feed URL. the format is below.

Blogger –

Replace blog name with yours. and hit “Continue”.
Zapier is going to ask for “API key”, Simply go to your chatfuel dashboard and copy it,
Next page, Hit “Continue”.
If you have not written a recent article, Zapier might find a problem fetching your feed.
So update your blog with at least one post.
zapier rss url feed
Cross check your URL and hit “Fetch & Continue”.
zapier rss test successful
Hope you got that Successful message. >> “Continue”.

Connecting Zapier to Chatfuel Chatbot For Website

On this next page, simply click “Continue” to connect Zapier RSS to chatfuel.
zapier rss connent chatfuel success
Next page, Click “Test”, if it shows “Success” >> Go ahead and click “Save + Continue”.
On this next page, You get to decide what RSS items will be displayed whenever an update is made.
We only want the Title, URL, and Image.
It automatically picks a title, URL, and a subtitle.
The picked subtitle is always the description which we do not actually want.
So are going to replace it with the post image.
Below the “Subtitle” tag, Click the items.
Below it, when you see “New item in Feed”
zapier rss connent url source
Scroll down and select “Raw Thumbnail @url”
That will automatically replace the description with the RSS image.
You can display more items such as post author, post date etc.
Next, click “Continue” and you are good to go.
Next page click “Send Text to Chatfuel for Facebook”
and lastly, Continue. That’s all…

How to integrate Chatbot into a website (WordPress)

In the next few steps, I am going to show you how to display your chatbot plugin on your website.
customer chat plugin

  • Go to Grow
  • Locate “Customer Chat Plugin for your website” and click”Enable”
  • In the pop-up box, Input your site URL, and copy the code.
  • Download this plugin “Insert Headers and Footers” and add the code.

How to integrate Chatbot for Website in Blogger

For blogger users,

  1. Use the same first 3 steps above
  2. Visit >> Theme >> Edit Theme
  3. Search for </body>, past the code above it
  4. Save and that’s all.

chatbot for blogger
The opt-in box should start showing on your website immediately.
A few things to note is.

but still, it can help you gather all the visitors visiting your blog and get to update them right on messenger.
A couple other things you that could boost your facebook chatbot for website subscribers is integrating bots with facebook comments.
In that way, you get to opt-in users who comment on your post.
That’s all for facebook messenger AI chatbot for website¬†without coding (blogger and WordPress).
Hope it was useful and if you noticed any stone unturned, just leave a comment below
and I will get it fixed asap.