How to create a customer service chatbot for Facebook Messenger with Chatfuel

Customer service isn’t just about being courteous to your customers — it’s an element of business operations that can impact your bottom line and affect how your company is viewed in the public eye. You have to maintain not only quality support standards but also a quality support interface.

Unsatisfied clients will relay their experience to their network and beyond, and it’s always less expensive to retain a costumer than attract a new one. Better customer service reduces churn and increases loyalty, but customer service is not always cheap, or scalable.

Nowadays, chat is often the first (and sometimes only) way customers interact with support. There are several forecasts that by 2020, over 85% of customer interactions will be handled without a human.

Companies often choose chat because of convenience, or cost reduction, but chat be a very positive customer service medium if interactions are designed correctly.

The good news for you is that you don’t need to have programming skills to build your own customer service chatbot. There are many tools, such as Chatfuel, that allow you to quickly and easily automate many parts of a customer service conversation, then direct to a human when necessary.

In this post, I’m going to show you how to setup a simple customer service chatbot with Chatfuel and Facebook Messenger.

Image by Chatfuel

Live Chat template:

Go to Chatfuel and click on the “Continue with Facebook” button. You will be redirected to Chatfuel’s dashboard.

In the Chatfuel dashboard, you can create a bot from template or start with a blank bot.

Click on the “Create from Template” card and you will see the Chatfuel Template Marketplace:

Chatfuel Template Marketplace

Chatfuel Template Marketplace

In the template marketplace, you can choose from dozens of bot templates for different use cases.

For our customer service Facebook Messenger bot, we’re first going to choose “Enable live chat with bot users”.

In practice, Live Chat enables us to stay in touch with our clients. For making our sample bot, we’ll initially keep this feature live to get familiar with the Chatfuel interface.

Next, click on the “Use Template” button. We’re going to see the following:

Click on “Connect” — you will connect your page with the template. Then, click on “Connect to Page”.

The “Live Chat” plugin is now published to your page.

Return to the Dashboard and rename the template “Customer Service”.

We can now start editing the bot template.

Is important to note that Chatfuel divides everything into Blocks.

Blocks are the basic building blocks of your bot. A block consists of one or more message cards that are sent together to a bot user. You can link blocks with each other using buttons in text cards or in gallery cards.

For more information about Chatfuel’s structure take a look at Chatfuel’s help section here.

If you click on the “Test this chatbot” button, you wil see how the bot with the preloaded template looks.

As you can see, Chatfuel actually uses the bot themselves to explain to us how we can use the bot. If you click on “Ask a question” we’re going to obtain another explanation about the plugin flow.

Because we have already connected our page with the “Live Chat” plugin, we can start a live chat.

As you can see, I typed “Hello there”, starting a conversation with the person in charge from Crowdbotics — Customer Service.

What’s happening here?

Well, once we start a Live Chat, we receive a notification in our page that a user want to contact us, however if this option is not enabled, the bot would do all the work for you.

Let’s go to our page and check our inbox. We’re going to see the “hello there” user message there.

The “Live chat” plugin establishs direct contact between the user and our page.

If we want to stop the chat, just click on “Stop Chat” return to our bot conversation flow.

This is how the Live Chat flow works.

Now, let’s build how our Customer Service bot is going to act.

Customizing our Chatfuel bot

The flow of our bot is going to be very similar to the Chatfuel template. Our bot will be easy to setup and you can customize it as much as you wish.

Let’s start by changing the structure of the “Welcome message” block. We will keep the user first name and the typing, but we’re going to add a “Text” card with some buttons that are going to redirect to “About Crowdbotics”, “Built with Crowdbotics” and “Customer Service”.

Erase the “Live Chat” plugin for the moment, we’re going to use it in a separate block.

If you try one of the buttons we created on Facebook Messenger, they will not work because we didn’t declare a purpose for each of them.

So, let’s build some blocks to define the desired action for each button.

For the “About” block, we’re going to define Crowdbotics’ purpose and it’s activities. Play around a little with the cards to build something to your own liking.

After adding all our “About” cards, we want to define a block that will return a user to the main menu if they get lost. We’re going to name it “What to do next”. Add this block at the end of each block you create.

By making a text card with a button that returns to a user to the welcome message, we add ‘flow’ to our conversation, and close the loop no matter what path a user takes.

The Built with Crowdbotics block is where we would include information about customer use cases. Crowdbotics enables people turn ideas and specs into working code, and we want to show off some examples.

Rename this section to whatever is most relevant to your company, and add as many additional sections as you like.

For our “Customer Service” block, we’re going to re-add the “Live Chat” plugin that we erased from our Welcome Message.

Why we did we do this? If we kept “Live Chat” on our welcome block, it will appear all every time a user writes to our bot. This doesn’t make much sense in terms of automation or feel like a natural conversation.

Our “Live Chat” block within our “Customer Service” block is going to included a basic greeting sentence and contain the plugin.

Only after clicking on “Ask a question” will a user will be sent to the Live Chat.

The plugin is going to have a Start Message and a Stop Message. Both indicate how a user can use the service and also if they want to stop the conversation with the representative from Crowdbotics.

To create the feel of a live conversation, you can define the amount of time the bot will wait for a user response and not interrupt the session with the representative.

Finally, add the block “What to do next” to return to the welcome message.

Now our three main blocks are declared and ready to be connected to our Welcome Message.

We originally created three buttons that should redirect to blocks. The only thing left is add this actions to each one of them.

After the name of the button is declared, in the “Blocks” section, add the name of the block (in this case, “About”).

And that’s all! Repeat this process with the two buttons left and everything is going to be connected.

It is also important to declare a “Default Answer” block. This is going to allow you to give an answer to your users in any case they type something your bot can’t understand, of course you can declare the same flow that you did in the beginning to enroll the user to the right conversation.

Of course this is just an example of how you can implement a Customer Service bot without coding skills and in a very easy way. This is of course just the beginning of all the available features.

Chatfuel allows you to setup some Artificial Intelligence rules for your bot, however if you want to go deeper in the theme you should try some Natural Language Processing (NLP) tools like Dialogflow,, Watson, etc.

For this, you will need to get in touch with a developer.

If that’s the case, Crowdbotics can help you create a custom customer service chatbot with complex NLP. Just visit and tell us more about what you want to build.

Thanks for reading!

Thanks to those who reviewed and commented on early drafts of this post: Aleksa Miladinovic, William Wickey

Originally published:

July 28, 2018

Related Articles