Tutorial: Create a Facebook Messenger Bot Using the Unified Messaging API

 In CloudRail, Tutorial

In this tutorial, you will learn how to receive and send messages like text, images and carousel messages from and to Facebook Messenger using the Unified Messaging API by CloudRail. With CloudRail you can easily integrate your chatbots or customer support systems for multiple services. CloudRail offers SDKs with abstracted interfaces that bundle several services to expose developer-friendly APIs that allow easy, native access to functionality independent of the underlying service. For example, this means that the sendImage() function to send an image has the same signature for Facebook Messenger as it does for Viber, Telegram and Line. In this tutorial, we use Facebook Messenger as an example, but everything can be used in exactly the same way for Telegram, Viber and Line (with more service coming soon).

Setting up Facebook Messenger Bot

In order to setup Facebook Messenger Bot, you will need to create a few things. Please ensure you have all of the following:

  • Facebook Page: A Facebook Page will be used as the identity of your bot. When people chat with your app, they will see the Page name and the Page profile picture. To create a new Page, visit https://www.facebook.com/pages/create
  • Facebook Developer Account: Your developer account is required to create new apps, which are the core of any Facebook integration. You can create a new developer account by going to Facebook for Developers and clicking the ‘Get Started’ button.
  • Facebook App: The Facebook app contains the settings for your Messenger bot, including access tokens. To create a new app, visit your app dashboard.
  • Webhook URL: Actions that take place in conversations with your bot, such as new messages are sent as events to your webhook. For more information on setting up your webhook, see Set Up Your Webhook.

Receive Parsed Messages

For any bot service, the very first thing you need to be able to do is to receive messages from the user and have them parsed.
Your server would receive data which can be converted into a stream. The parseReceivedMessages would change this into a Message metadata, which contains all the details like messageId, senderId, chatId (receiverId), message text, sendAt, location and if the user has sent any messageAttachments.

Sending Text Message

After you have received messages, you can send messages back to the user. The way how to send a message is quite simple. The method just takes a receiverId, which was message metadata and is the chatId and a text message that can be sent to the user. If the message is successful you will get a message meta back. Here is a sample illustrating the method:

 

Sending Image Message

Sending an image can be done either by passing a stream or a URL. Additional parameters beside the receiverId and the text message, you also need to provide with the identifier which is the URL of the image or imageStream which is the stream of the image. Other fields that are required are Preview URL which is the thumbnail of the image, Mime Type which can be image/jpeg and the size of the image.

 

Sending Carousel Message

The most advance feature of any bot service is to provide a carousel message, which allows you to present many products to the user.
In this we display a number of message items and each item contains an image from an URL, title and subtitle (e.g. description, price) and a series of message buttons. Message buttons are action buttons that the user can select from. Each button contains its text, type (uri or postback), payload for postback type and url for uri type. Message button type can be uri or postback. The uri means there is an external url is presented, in this the url parameter must be passed. The postback means, this is an internal action the server will handle and for that the payload parameter must be passed.
The sendCarousel message takes the following parameters. The receiverId and an array of message items. Each message Item contains an array of message buttons. Here is sample code to illustrate the method:

 

Setup other services

To setup other services you can follow the following links:
Telegram: https://core.telegram.org/bots/#6-botfather
Viber: https://developers.viber.com/docs/general/get-started
Line: https://developers.line.me/en/docs/messaging-api/building-bot
To test your webhook on your localhost server: ngrok

Recent Posts