Tutorial: Create a Facebook Messenger Bot Using the Unified Messaging API
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:
To test your webhook on your localhost server: ngrok