Chatbot For Website: Ultimate Tutorial To Build A Messenger Ai

A chatbot for website is all you need in an era of automation.

In this post, I am going to show you how to build a simple Facebook messenger AI chatbot and integrate it into your website (BlogSpot& WordPress).

chatbot for website

Here is all what we are going to do

  • Understand everything about chatbot (talking robot)
  • Create a simple one
  • Integrate into a website
  • Setup automation
  • Get some subscribers

Let’s get started…

What is a chatbot

AI Chatbot which started as a customer support services have long gone viral in the marketing world,

A Chatbot for website 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…

Guess that’s why Facebook messenger chatbot 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 chatbots.

How far has chatbots 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

While

Gartner forecasts that by 2020, over 85% of customer interactions will be handled without a human.

That’s to show that the world of chatbots is just starting.

Chatbot for website 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.

Chatbot for Website examples.

Let’s take a look at some chatbot for website…

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 “How To Choose A Blog Topic – Best Tips In Choosing A Niche” to a user.

chatbot examples

That’s all from Jokos.

See how my chatbot works (demo)

here is another example.

OgbongeBlog Chatbot

This is another simple chatbot which I find useful.

actually, it currently entertains 430,000+ active users

chatbot active users

That’s huge.

That’s all for examples…

let’s build a messenger bot without coding.

Here are the requirements

  1. A Facebook page
  2. A Chatbot Management account

Why do you need a page

Messenger chatbots don’t work with a personal profile;

i.e before you can create a bot, you must first create a facebook page which is also free.

If you already have a Facebook page, simply scroll to the next section.

How to create a facebook page.

First thing first, Visit https://www.facebook.com/pages/creation/

create facebook page

Under Business, Click ” Get Started”

Fill in the details.

I am a blogger, So I choose blogger.

create page profile picture

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.

To create a facebook chatbot, you need a platform so you won’t build from scratch.

These platforms act like a “CMS” that lets you manage and control your chatbot.

For this tutorial, I am going to be making use of Chatfuel but will first show you the best platforms.

Best Chatbot Platforms for Website.

1. Chatfuel

Chatfuel is one of the best chatbot platforms to create a free messenger bot.

It provides all the basic options needed in a bot and its UI is very simple to understand.

Though it’s recent pricing is high, its free plan gives you 5000 monthly active users which is just enough to manage a basic chatbot.

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 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
manychat pricing

while ManyChat 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.

Not convinced? – You can find more comparison at

How to build a free chatbot using Chatfuel

chatfuel homepage

  • It will prompt you to log in with Facebook and allow it to access your profile.
  • It will redirect back to Chatfuel, where you have to connect the previously created facebook page.

That’s all.

See how my chatbot works (demo)

Building your first bot.

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 going to be building a very simple bot,

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.

Chatfuel Blocks

Chatfuel blocks are containers used in conveying messages and any form of content.

Just as the name implies “Block”, it is more of a section and before you can ever input any information, into your chatbot for website

you must first create a block.

A block can contain an unlimited number of plugins, widgets etc and also, blocks can be linked together.

Here is how to create a block

How to Create a Block in Chatfuel

create block

  • Locate the “+” icon in any group
  • It will automatically create a block with a default name

rename block

  • Rename it by typing into the highlighted default name.
  • That’s all.

Earlier I said you can link blocks together. Chatfuel makes it easy to link to one block from another.

The operation is such as… If a user clicks this, display this block.

Chatfuel Typing

Chatfuel typing is an element or a widget as you might call it, it is used in making the interaction between users and your bot seamless

i.e look more human.

In a conversation between John and James, James will see a typing signal whenever John is typing in a new reply.

That’s the same function as the Chatfuel Typing widget.

It displays the typing signal to your bot users whenever a new message is being loaded from a block.

Here are a few features of chatfuel typing

  1. Increase or reduce typing duration
  2. display unlimited typing widget within a block.

How to create a Typing signal in chatfuel

  • Open your desired block

chatfuel typing card

  • Scroll down to the widget area (add card) and select typing

Further customization,

chatfuel typing card customization

You can either reduce or increase the time as seen above.

You can also drag it to a new location, basically, this feature works for all widgets.

Chatfuel User Attribute

Not actually a widget but I will explain it to you because of it’s important.

Chatfuel user attributes works just like IDs/Class attached to HTML elements.

it helps differentiate users which is very important for targeting.

Assuming you run a makeup business and wish to know the skin type of your chatbot customers,

you can easily get it done using user attribute. The user attribute adds a unique ID which is set by you to each customer.

Let’s see it in action.

chatfuel user attribute quickreply

Above I just created a user attribute called skin type using the Quick reply card.

If a user types in Black, it gets saved into the skintype attribute, and if she types in White, it gets saved there too.

chatfuel user attribute broadcast

You can then later use at the broadcast tab where you can decide to send a message to only black or white users.

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 Card

A block of information that contains only text and 3 action buttons.

You are going to use this card a lot.

Image Card

A block to embed an image in your conversation

Gallery Card

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.

Chatfuel Extra Plugins

Chatfuel provides you with several other integrations aside from the first few displayed in the widget area (card area).

How to access Chatfuel extra plugins

  • Open any block of your choice
  • Scroll down to the widget area

chatfuel add plugins

  • Locate the “+” far right and click

chatfuel add plugins pop up

  • A pop-up box will be displayed with the extra plugins

These plugins include user input, Zapier integrations, Google site search, subscribers widget etc

and a few others.

But I will quickly explain the majorly used once at least for this chatfuel tutorial

Subscriber Plugin

One very useful plugin is the Chatfuel Subscriber plugin. You can find it easily among the extra plugins.

chatfuel subscriber plugin

What it does is opt-in users to a subscription plan.

Later in this tutorial, we are going to be making use of the Subscriber plugin.

User Input Plugin

Just as the name implies “User Input”. This provides an option for users to input values which could be questions etc.

chatfuel user input plugin

The user input plugin is very powerful and in this tutorial, we are going to use it alongside Google site search plugin to create a search feature for your bot.

chatfuel defined search

Just as seen above

Subscription list Plugin

The subscription list plugin, work hand in hand with the Subscriber plugin and any other plugin that help collect subscribers.

chatfuel subscription list plugin

The task of the subscription list is as simple as displaying the plans a user is subscribed to and give them the option to unsubscribe.

chatfuel subscription list plugin box

how it looks like in chatfuel dashboard

user subscription

while this is how it looks on messenger.

So what if a user is not subscribed to a plan? – the plugin simply redirects such user to a different block.

RSS Import

Chatfuel RSS import is a simple plugin that imports posts from an RSS URL inputted.

rss import

This plugin can be used alongside the Subscriber plugin to display latest articles to users who are subscribed

and can also be used to display latest posts to any user directed to the block containing the plugin.

The above basic terms are enough to start up.

Let’s configure the bot.

See how my chatbot works (demo)

Configuring a chatbot

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

First thing first, create 8 blocks, and rename them as seen below.

basic blocks

Subscribing Users

Click the “subscribe users” box

This box is what you are going to use, in subscribing users to your blog updates.

Scroll down, and click “+”

chatfuel subscriber plugin

In the pop-up box, click “Subscriber”

subscriber widget

In Link to a block a with plugin, type in “Latest”.

That’s all.

Let’s create the second block which is going to send your latest updates

Display Latest Updates

Now, Open the block named “Latest”

At this point, we are going to make use of RSS import.

since we are going to display the latest updates from the blog.

text card

Add a text card

You can add a simple text, such as “Here are your latest updates”

Next, let’s connect that block to RSS feed.

rss import

Go to extra plugins with the “+” icon in the card area

In the pop-up box, locate RSS import.

chatfuel rss import settings

  • URL: type in URL of your blog with (http or https).
  • SUBSCRIPTION TITLE: Latest Posts on “Blog name”.
  • 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, is to manage subscriptions.

Manage Subscriptions

Select the block named  “Subscriptions”

Scroll down, and click the “+”, in the pop-up select “Subscription list”.

This is used to display to users, the packages they are subscribed to.

chatfuel subscription list

In the “If no subscriptions found then show this block”, type in “no sub”.

This will display the text shown in the “no sub” block, whenever a user is not subscribed.

subscription settings

Feel free to add, typing and text card, before displaying the subscription list plugin just as i have done in mine.

That’s all for subscription list.

Next step is to set the text shown whenever a user is not subscribed.

Select the block with “no sub”.

create a new text box and fill in something like, “Hello {{first name}} you are not subscribed.”

click subscribe below, to receive latest updates.

create button

Add a new button to the text box. and fill it as shown above.

What that does is, If a user click subscribe, he will be added to the subscription list (using the subscribe users block) and will also be shown the message in the “success” block.

Let’s set up the Subscribe success message.

Success Message

Open the “success block”. Create a new text box and type in a message such as

Hello {{first name}}, I have successfully subscribed you.

That’s all.

You can also add two buttons, such as “Go to Menu” and “View latest Updates”

successfully subscribed

Let’s create a simple menu to direct visitors to important sections

Create Menu

Go to the Menu block and add whatever buttons you wish to add.

create a menu

I just added subscriptions, search and visit the blog to keep it simple.

and that’s all for the menu.

Next, is to add a link to your blog.

To do that, Click the blog block and fill in the details as seen below

chatfuel external link

If you noticed, I used the URL tab instead of the block tab.

The last configuration we’re going to do is the search which will display item whenever users want something specific.

Chatfuel User Defined Searches

We are going to use, two important features

  1. User input
  2. Google site search

Open the search block you created, scroll down, hit the “+” and select “User input”.

Fill the displayed box, as shown below.

chatfuel user input box

Next is to add a text box after the typing, input “looking that up”.

user defined searches

and add another typing box as a seen above…

Here is the big work. We going to set up Google site search.

So click the “+” icon and select “Google site search”.

You need to create an API and Engine Id.

How to create Google API

  • Go to “https://console.developers.google.com/apis/api/customsearch/“.
  • click the “Create Project” button if you haven’t a project yet and follow the instructions on the screen. If you have a project already, you may skip this step.
  • Once you’ve created a project, click the “Enable API” button on the API Manager Dashboard that you see in front of you.
  • In the API Library, look for “Other popular APIs” column, select “Custom search API” and click “Enable” at the top to get it working.
  • Once the API is enabled, click the “Create credentials” button to the right and follow the instructions – you should have the key in mere seconds.
  • Now that you have the key, copy and paste it into the “Google API Key” field.

How to create a Google search engine

create google search engine

  • Click “get code”

create google search engine code

  • Now in the code, locate the highlighted text and copy it.
  • Paste the code in chatfuel “SEARCH ENGINE ID”.

chatfuel site google

With all that done, fill the remaining details as shown in the image above.

That’s all

but let’s add a little more customization.

user defined searches settings

Add a typing box and a new type box, fill it as seen above.

Welcoming users to your bot.

Chatfuel Welcome message

welcome 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 three set of buttons using the “+ Add Button”

welcome message block

right under the welcome message.

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

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.

When you click the “test this chatbot button”, it will automatically send a message to your messenger.

See how your AI bot have gone thus far, and make changes to suit your needs.

The other quick work we going to do is the “Default Message”

I already explained it.

Chatfuel Default Message

So click on it

and add this message.

“Sorry, your value was not understood.

Please choose an option below”

Now re going to add two buttons

  1. Search
  2. Menu

default message

Easy right?

Something that might interest you is, What if you want your chat bot to automatically search your blog

whenever a user type in an unknown term?

if that’s what you want, simply add Go to block card and redirect it to search as shown below.

go to block

Next, is to set AI for your bot

It’s a bit complicated though but I will work you through it.

Chatfuel Persistent Menu

The persistent chatfuel is a menu shown at the bottom bar of messenger chat box.

chatfuel persistent menu

It acts as a quick access to sections of your bot.

and now I am going to show you how to create a simple one to display our latest post and subscriptions.

How to create Chatfuel persistent menu

  • Go to Configure >> Persistent Menu.

persistent menu

  • Click “Add Menu Item”

persistent menu settings

  •  Add the two buttons and that’s all.

More tips: You can add more items by using the Submenu link

persistent menu settings submenu

A new box will display at the right, where you can add your new items.

persistent menu settings submenu more items

How to Setup Chatfuel AI

Chatfuel’s AI (Artificial Intelligence) is another important feature, which we are going to run through.

The AI sections let you decide response choice e.g

if a user inputs “Thanks, Thank you, etc” what should the bot do?

by default, it will display the set down default block, but with the AI you can set what will happen.

ai blocks text

The AI gives to options link to a Text or a Block.

And you can input as many texts as you wish.

Let me create a simple AI rule so you understand.

chatfuel new ai section

Go to “Set up AI” >> Click “Add AI rule”.

ai blocks

Create 5 AI boxes.

  1. Thank you messages
  2. Subscription messages
  3. Greetings
  4. Search messages
  5. Updates messages

For the first block, In “IF USER SAYS SOMETHING SIMILAR TO” type in “Thank you, Thanks,”

While in “BOT REPLIES WITH” select text and type in “Welcome”.

You can select more response text and make it random, see example below.

ai random answers

Do same for the other blocks and link them to “Blocks”

Just as shown below

ai settings

Chatfuel Grow Tools

In case you are looking to expand your audience, Chatfuel got the right tools for you called Grow tools.

These tools help you subscribe users from anywhere both your website (blogspot or WordPress)

and through Facebook comments.

I am going to show you how to enable two of these plugins

  1. Customer Chat Plugin for your website
  2. Acquire users from comments

These two plugins are awesome, first is the side floating widget shown on my website

chatfuel grow tools

while the second is a simple way to subscribe all users that comment on your facebook post.

really cool for marketers.

Let’s get to work.

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

  • Go to Grow

chatfuel grow

  • Locate “Customer Chat Plugin for your website” and click “Enable”

customer chat plugin

  • In the pop-up box, Input your site URL, and copy the code.
  • Download this plugin Insert Headers and Footers and activate it.
  • Go to settings >> Insert Headers and Footers.

chatbot for wordpress

  • Paste the copied code inside Scripts for footer.

Check out WPbeginner’s post for more tips on adding codes to WordPress footer.

How to integrate Chatbot in a website (Blogger)

For blogger users,

  • use the same first 3 steps above

chatbot for blogger

  • Visit blogger.com >> Theme >> Edit Theme
  • Search for </body>, paste the code above it
  • Save and that’s all.

The opt-in box should start showing on your website immediately.

A few things to note is.

  1. It add JS to your blog
  2.  It reduces your blog loading speed

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 subscribers is integrating bots with facebook comments.

In that way, you get to opt-in users who comment on your post.

let’s get to that immediately.

How to Acquire Subscribers from Facebook Comment

  • Go to grow and locate “Acquire users from comments” >> Add Rule

acquire users

  • Under “Track Comments Under”, you can select “Any Post” or “Specific post”.
  • Assuming you asked your commenters to type in “Info”, you will have to tick “comments matching a rule” and then add info in the “Reply to post comments” box

acquire users through facebook comment

  •  In the reply with box, you can write, type in subscribe to receive blogging tips… depending on your marketing goal.

You can read chatfuel documentation for more tips or watch this YouTube tutorial

Broadcast

The broadcast tab in Chatfuel let’s you do automation for your bot.

It comes with 4 options

  1. Deliver now
  2. Add a trigger
  3. Schedule for later
  4. Autopost from external source.

Each of these broadcast options can be very useful for marketers.

chatfuel broadcast

One good feature of the broadcast tab is the option of using user attributes.

Which means, you can decide to send message to only unsubcibers or users not subscribed.

You can also send a message to only male, female, users from a specific country, users who was only within the last 24hours

and lot more.

Deliver Messages Now

This chatfuel broadcast feature allows you to send a message to all your users at once.

You can also send to only a few users using “Sequence, Attribute or Segment”.

Below is a simple message I am sending to all users who are not subscribed to my blog based on the attribute “Subscribe”.

deliver your message now

You can also send an instant message to only male or females using same attribute but this time select “gender”.

deliver your message now gender

That’s how easy Chatfuel deliver messages now is.

Add a Trigger

This section of the broadcast is quite interesting and if used properly can massively grow your active subscribers.

Let’s take, for example, John didn’t subscribe to your chatbot, because you gave him an option to, i.e via user attribute.

With add a trigger, you can get John to subscribe by sending him a customized message anytime could be an hour after or a day after.

add a trigger

In my chatbot, I have set up a trigger to send a message to anyone who did not subscribe to my chatbot.

Marketers know what this is…

Schedule for Later

This works just like “Send a message now”, only that it gives you the option to decide when the message should be sent to the users.

Instead of sending it now, you can send it to them based on their timezone.

It doesn’t make sense to send users in US and Nigeria good morning at the same time when they have different time zones.

With the schedule for later tab, you get to send users messages based on their own timezone.

schedule for later

So if you send a message to be delivered by 7 am, it will deliver by 7 am to all users not immediately.

Auto Post from external Source

Here is another interesting feature that lets you automatically post users from an external source which could be RSS, Zapier integration etc.

This does almost the same function we did with the subscriber and RSS import plugin earlier in the post.

autopost from external source

You can still make good use of it, why?

With it, you can send updates to all your users instead of only subscribed users.

So go ahead and enjoy the features of the Chatfuel Broadcast tab.

See how my chatbot works (demo)

That’s all for facebook messenger AI chatbot for websites (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.

Happy Birthday to Me…

Related Articles

11 Comments - Post Yours! How to? ▼

hello
  1. Hello Prince, indeed you have done well by sharing this wonderful tutorial here with us . I must say, ITz really awesome.

    Now with the above guide, I can easily integrate chatbot into my blog at https://www.elochi.com.ng

    Thanks for sharing, it was really helpful. I will give it a try ASAP.

    Have a great day.

  2. Hi Prince, I love you for this, although this stuff have been giving me though time on setting, in fact i stayed 7 Hours setting this up on my blog.

    You Can Check Out The Work I Did On Lifestylenaija Blog Using Your Tutorial:https://lifestylenaija.com.ng/

  3. Hi Prince,

    This is what i am searching for .. Thanks a lot

  4. Thanks for this write up. I’m motivated since i know how to build a chat bot for my website https://www.trendytechbuzz.com

  5. Wa ooooo Thank you sir… i followed the process and all yhur procedure and i got it…..

    view my blog to see it http://www.naijabomnet.blogspot.com


Leave a Reply