Chatfuel is one of the best choices available around for developing Facebook Messenger Chatbots. Using it one can build a simple chatbot within few minutes with no requirement of any technical knowledge or programming. It is a kind of drag and drop platform where we can define the flow of our bot and integrate easily with our Facebook Page.

To get started with building bots in Chatfuel, we need to create blocks and add Cards or Plugins in the blocks. Blocks can contain muliple cards/plugins. Cards/Plugins are used to display output to user or carry out some background functions.

To get familiar with Chatfuel, you can refer our Getting started with Chatfuel for building Facebook Messenger Bots blog.

In this blog, we are going to explore most used Cards and Plugins of Chatfuel. It is assumed that you have already created a blank bot. If not, then login to chatuel and create a Blank bot.


Chatfuel Cards

Cards can be used to represent information as text, button or images.

Text

Text card is used to display information as text. Along with text, we can also set buttons.

It allows us to add maximum three buttons and there are 3 options to set action on clicking of button. When the user clicks on this button added event with this button is triggered.

Redirect to another block

On clicking we can route user to another block to advance the conversation.

Open external website using URL

We can even take user to an external website by providing URL in the setting. This option can be useful for opening up company website or product page if you are building ecommerce chatbot.

Trigger a phone call

Using this option we can trigger a phone call on set number. For example, if you want user to call on your company phone number then you can set your number here and with a single click user can initial a call.

Typing

Typing card represents background process. It shows “Typing…” to user for selected duration before displaying next response.

Quick Reply

Quick reply is a hint for user to continue conversation.

Using Chatuel we can build Conditional Logic or Decision Tree based bots where we can define flow based upon User Input. So many a times, we need to make sure that user provides some specific inputs to continue conversation in the flow. In such cases Quick Reply is most Useful. We can add multiple quick replies with text/image/audio/video response.

The maximum character limits allowed for Quick Reply is 20 characters and we can add maximum 11 Quick replies at a time. It is advisable to keep the text of Quick Reply short and not to add many Quick Replies as user will need to scroll horizontally to view all the Quick Replies which is not very user friendly.

Image Card

This option can be useful when we want to display single image to user in a conversation. Image card supports multiple format of images like JPEG, PNG and also surpport GIF.

There aren’t any other configuration options available with Image Card. We can just simply display an image in a message.

Gallery

Gallery card can be used to display multiple images. It displays images in slider and allows up to 9 images in a slider.

We can display Heading and Subtitle/Short description of up to 80 characters with each image. There are 2 more options available with Image for user action. We can set URL or add button for the Image.

Setting URL will take user to the external URL while setting button we can define multiple actions. As explained earlier, for button, we can set Redirection to another block, open external URL or trigger a Phone call. Not only that, for Gallery, we get two more options for button. First is Share button which will open the Share Dialog or Buy button. Buy button has more options like setting the prices, tax, shipping settings, etc. Buy button can be useful to setup Ecommerce Chatbot.

In configuration of gallery card, Heading is compulsory field so we must provide some value for it. And along with Heading we must set either Image or Subtitle or Button.

The limitations of using Gallery are as below:

  • It allows up to 40 characters in heading.
  • Up to 80 characters in subtitle
  • Up to 3 buttons in each card
  • Up to 9 images in each slider
  • Images in galleries do not support gifs

Go To Block

Go to block card is used jump conversation from one block to another block. It allows us to add multiple blocks as target block. If multiple blocks are set then all those blocks will be invoked one by one.

We can even add multiple blocks separately by enabling Random option. It will redirect user to any block in the list randomly.

Subscribe To Sequence

In Chatfuel we can create Sequences where we can set messages to send to user after set interval. After creating sequences, we need to subscribe user to those sequences. To set up the subscription in block, this option can be used.


Chatfuel Plugins

Using cards we can display information to user and make them take certain actions but it might not be sufficient to build complex bots. Chatfuel Plugins are there to fix that. Using Chatfuel Plugins could get bit technical at some points but nonetheless if you go through the examples below, you should be able to use them in your bot.

JSON API

For some funcationalities like schedule appointment, hotel booking, weather info, etc we might need to fetch some information from our database or other websites. To achieve this, we can use JSON API which helps us send HTTP request to our server. We can pass parameters and values in GET or POST method. After receiving the request, we can process it and respond with JSON which will be used by chatfuel to display response to user.

We can also use JSON API to redirect user to another block or create postbacks.

JSON API can also be used to integrate other third party services. For example, it can be used to integrate Chatfuel with Dialogflow.

User Input

User Input card is used to collect input from user and save them in attribute. Say suppose, in hotel booking, we ask user about his details and his preference of room. We can save such user details in attributes using input card and use them in other blocks. We can send user collected data to email or display it back to user.

Send Email

Send email card is used to send notification email while user is in conversation. We need to set the Title of the email, then recipient email ids comma separated if there are multiple email recipients and body of the email. When the block is invoked we’ll receive email on set Email IDs.

Note that, we can’t send email to user’s email from bot.

Live Chat

This is another very important feature provided by Chatfuel. Many a times, when bot is not able to respond to user we may need to transfer control to human agent. Live Chat plugin is used to handover the chat transfer to human agent.

Once the control goes to human agent, bot will stop replying to the user. Both human agent or user can stop chatting with human agent and continue with bot by sending “Stop Chat” message. The message to stop conversation with human agent can be customized and set to anything else than “Stop Chat”.

There is a configuration option of “Chat timeout” in settings where we can set for how many hours bot will wait for user response and won’t interfer in the chat with human agent. After Chat Timeout has elapsed, the chat control will be returned to bot automatically.

We can also enable Facebook notification to admin when this Live Chat is started. So admin is aware of any such request.

Setup User Attribute

Setup User Attribute plugin is used to create multiple variables wherever we require. We can set the user attribute name and the value of the attribute. These attributes will save the set value and can be accessed in the chat later on. Multiple options are available to set attribute value. We can provide static value or user existing attribute or even arithmatic expressions are allowed.

Also, we can update the existing attribute value using this plugin. To do that we can select the existing attribute in “User Attribute” field and then provide it a new value.

Audio

Using “Audio” plugin we can display audio message to user. We can upload the file on our server or anywhere else and provide Audio file URL in the field. Supported file types are: MP3, WAV and OGG. And maximum file size should not exceed 20MBs.

Video

Similar to “Audio” plugin, we can display videos in a chat using “Video” plugin. Only MP4 files are supported currently with maximum file size of 20 MBs. If we want to display video from our profile or page then first need to upload the video and provide the link of the video. Or we have to provide the external video link in the field uploaded on dropbox or our server.

List Card

List card allows us to display information as list. It is almost similar to Gallery with difference that in Gallery the items are displayed horizontally while in List card the items are displayed vertically.

To set up list, we need to setup list items. For each list item, Title is compulsory. Along with Title, one more field is required it can be subitle or image or button. There is also an option to set URL using which we can take user to external URL. Or using button, we can define some action for user to advance conversation.

Also, there is an option to add list item with Cover image. This will be displayed at top.

List card has at least two items required.

Share Location

Chatfuel offers to collect user location automatically using Share location plugin. When we use this plugin, it will display option to user if he wants to share his location.

When the user sends this information to the bot, it divides the obtained data into several attributes and save them automatically. The available attributes are zip, city, state, country, longitude, latitude, address and map_url. So, we can use this saved location details at other place in subsequent blocks.

User Phone Number

User phone number plugin allow user to share phone number. It retrieves phone number from user’s facebook profile and display it as quick reply.

If the user doesn’t have phone number in his profile then Quick Reply will not be displayed, instead user will need to enter it manually.

Save to Google Sheet

This is another very useful plugin when we want to export the user conversation data and save it. Chatfuel’s Google Sheet integration lets us connect our Google Account and select a sheet where we want to save the data.

Upon connecting Google Account, it will create a Google Sheet automatically in our Google drive. Then “USER ATTRIBUTES” option will be displayed underneath where we can select which user attributes we want to save in the sheet. Now, whenever this block will be executed, the sheet will be updated with selected user attributes data.

User Email

Similar to User Phone Number plugin, there is User Email plugin too which allows user to share their email. It retrieves email id from user’s facebook profile and display it as quick reply. If user’s email is not publicly available or user wants to input it manually then they can do it manually. The value of email id will be saved in the attribute which we will define in “Save To” field.


Hope this explanation will provide better understanding of each Card and Plugin of Chatfuel.

Feel free to comment your doubts/questions. We would be glad to help you.

If you are looking for Chatbot Development or Natural Language Processing services then do contact us or send your requirement at letstalk@pragnakalp.com. We would be happy to offer our expert services.

Categories: Chatbots Development Chatfuel Facebook Messenger

4 Replies to “Chatfuel Cards and Plugins Examples for Facebook Messenger Chatbot”

  1. how do you get the user email plug in in chatfuel, i could not see it in the plugins (commonly used) in the platform.
    does this need to be in a pro account or is it available on free account? If free, how can i call it – at least not available on my view.

    1. ah , found it 🙂

      1. Good to know that Kat!
        Feel free to message if you need any help further.

  2. I am unable to see the above mentioned options like where you said user email or share location. I am unable to see any such options in my chatfuel account. Are all these options removed from chatfuel?

Leave a Reply

Your email address will not be published.

You may use these <abbr title="HyperText Markup Language">HTML</abbr> tags and attributes: <a href="" title=""> <abbr title=""> <acronym title=""> <b> <blockquote cite=""> <cite> <code> <del datetime=""> <em> <i> <q cite=""> <s> <strike> <strong>

*