Dialogflow & Facebook Messenger, the story never told
A few weeks ago, I got a challenge to make a chatbot for Facebook messenger, so I didn’t think twice and said: Dialogflow Time!!
Actually, on internet there are many tutorials on how to make chatbots for Facebook Messenger or even tutorials for Facebook and Dialogflow. So… why make another one?
One of the reasons is because I come from developing applications for Google Assistant (Actions) and use Dialogflow to create Actions it isn’t the same that create chatbots for some other platform like Facebook, there are a couple of things that change and we must take into account.
I won’t reinvent the wheel and I won’t do one more tutorial about how to integrate Facebook with Dialogflow, but I’ll give you a couple of tips that usually jump when using Dialogflow with Facebook, that I hope will be very useful to you when using both platforms.
Anyway, I leave here information on how to integrate Facebook Messenger with Dialogflow in case you require it:
Well, let’s get to work…
Tip #1 — Dialogflow Fulfillment Library — Use it or not?
I know this sounds strange, after all, the ideal would be to work with the library of this platform. However, it may be the case that you already have your own Webhook pro for Facebook running and you just want to add to it the Dialogflow functionalities or vice versa, you are starting an implementation for your chatbot and you want to delegate to Dialogflow the topics like authentication, reading, contexts, etc.
For example, if you started with a clean webhoook for your Facebook bot and in the road you added a dialogflow features, your webhook maybe looks like:
And actually this approach is fine if you have already structured your project and you are already working directly with the documentation of Facebook webhooks. You can continue without any inconvenience.
Tip #2 — Facebook Carousels with Dialogflow?
The carousel is an ordered and sequential way of showing results in the same line of space. Achieving to give the user a pleasant experience. Although this control has been seen in several platforms such as Google Assistant, Facebook chatbots also have them.
If you see the Dialogflow platform, in Facebook Responses section, we only saw 5 types of answers and the carousel is not among them. Does it mean we can’t implement it from Dialogflow?.
No, not exactly.
Let’s take a little look at how many of today’s chat platforms work when building bots on them, under a Webhooks system.
Answers, rich responses, permissions, data, etc, are sent under JSON schemes, allowing us to know the body of the requests of any element that we are working in our chatbot. When we add an element such as a card for example in Google Assistant, we are actually sending a body of this type:
Why am I telling you all this?, just in case you find an element that Dialogflow doesn’t handle natively, you can build it yourself through this option (Custom Payload), either from the platform, or from code at the time of implementing your webhook.
So, going back to the carousels on facebook messenger, the documentation tells us that carousels are formed from something called “Generic Template”. The only thing we should do is to take that structure mentioned in its documentation and use it in Dialogflow’s Custom Payload option.
When you add a “Custom Payload” response, Dialogflow automatically gives you a preview of the body you have to build. And as I said before, we only have to use the structure that gives us the documentation.
At the end, we should have something like this:
Only DON’T FORGET, Facebook’s carousel only supports a maximum of 10 elements, otherwise, if you attach even 11 elements, your carousel will never appear.
At code level it’s similar, only using the Payload object from Dialogflow library. More information here.
Tip #3 — Facebook events in Dialogflow
We know that Dialogflow works under Intents, which are activated by something that the user spoke or wrote in your chatbot. But what happens when we want to call an Intent under a user event that is not necessarily written or spoken?. It is in this section that we talk about Dialogflow Events.
Events allow you to invoke intents based on something that has happened instead of what a user communicates. Dialogflow supports events from several platforms (like Google Assistant, Slack, and more) based on actions users take on those platforms. | Dialogflow Documentation
Well, let’s talk about the 3 most popular events for messenger bots.
FACEBOOK_WELCOME
If we look at the Dialogflow platform, in the events section, there is only one event for Facebook. Which is the FACEBOOK_WELCOME.
The FACEBOOK_WELCOME event can be triggered by the detection of words trained in the welcome intent, as well as by a trigger when starting a new conversation with a messenger bot for the first time with a button like “Get Started”. This one can be edited to trigger any specific different event you need. More information here.
In the case of the image on the left, whenever you start a new conversation, FACEBOOK_WELCOME will be launched, however in the image on the right, if you use some random word that is not in your training model of your INTENT WELCOME, the FACEBOOK_WELCOME event will never be triggered.
FACEBOOK_MEDIA
Do you know that through Facebook Messenger you can attach files to your conversation, such as images, audios, documents? (the latter only from the web version). And if you wanted to detect when a user uploads a file of these types to your conversation and get it? This is where FACEBOOK_MEDIA comes in.
The event as such does not appear eligible on the Dialogflow platform, but you can still write it and it will take it as valid.
This event will allow your Intent to trigger automatically when the user attaches some kind of file to your conversation. To get the file sent we have to go to the body of the response obtained by Dialogflow (body / originalRequest) in this order:
- originalDetectIntentRequest → payload →data →message →attachments
If we put the above in a variable should stay this way:
const _attachments = originalDetectIntentRequest.payload.data.message.attachments;Don’t forget to always validate that objects are not null.
This variable “attachments”, is returned as an array, because you can upload multiple files at the same time, but each shares the same structure, a field “type” that returns what we have in a “file”, a field payload.url that returns the url where facebook will host our file and then download it to some server.
_attachments[0].payload.url => file url_attachments[0].type => document type
FACEBOOK_LOCATION
The FACEBOOK_LOCATION event allows you to get a location from Facebook Messenger. Create an intent to request the location using a custom payload. | Dialogflow Documentation
Facebook handles a quick response that allows us to request the user’s location. Dialogflow can capture the interaction of this action as if the user gave permission or not to get their location through the FACEBOOK_LOCATION event. We can also obtain the data as latitude and longitude if the user provided it successfully. As with FACEBOOK_MEDIA, the data is inside originalRequest, payload and in this case, postback.
Tip #4 — m.me Links
Did you know that you can launch your bot’s conversations with the micro data you need to customize the start of a conversation from a short link?. Yes, you can, and these links are the m.me links.
m.me is a shortened URL service operated by Facebook that redirects users to a person, page, or bot in Messenger. You can use them on your website, email newsletters, and more. | Facebook Developer Documentation
Let’s take the following scenario: You want someone to interact with your bot, and you want to send them specific information about a particular product, or about a particular article. You could share the link of your website, tell him to interact with your bot and then look for what he needs (no, I don’t think so), or you could give him an m.me link.
Let’s imagine you have a facebook page with the name DialogflowFriends, your facebook link would be more or less like this:
https://www.facebook.com/DialogflowFriendsThe link that would open the chat on this page would be:
https://www.facebook.com/messages/t/DialogflowFriendsAnd the m.me that would be the short version of the previous one would be like this:
http://m.me/DialogflowFriendsWhich will redirect you to the previous one, so far there is nothing out of the ordinary, is a simple “short link”. The great thing here is that to m.me you can add data as parameters inside the same url. If I wanted to share the id for example of a product or an article, I could do something like that:
http://m.me/DialogflowFriends?ref=<REF_PARAM>And where can I capture this information?. For this we have two scenarios, when the user interacts for the first time with his bot or when he already has a conversation started.
First-Time Use Scenario
If you have configured a “Get Started” button for your page, we will deliver the passed ref param as part of the postback event that is normally sent when the button is tapped. | Facebook Developer Documentation
As Facebook says in the previous paragraph, when we launch a new conversation from a m.me link with parameters, this information at first instance, seems to disappear from the url, but actually this in the event that will be sent through the button “Get Started”, then this information you can capture in your code.
const linkData = originalDetectIntentRequest.payload.data.postback.referral;As you can see, all the information is the “referral” object, where “source” is of type SHORTLINK, since it comes from a m.me link and “ref” contains the information that we send as parameter in the link.
Existing User Scenario
When you’ve already had a previous conversation with a Facebook bot, and you access it through an m.me link, the information comes through a Facebook event called messaging_referrals, so your webhook should be prepared to listen to it; but…and Dialogflow?
Unfortunately Dialogflow does not yet support this type of event, but it is not the end of the world. Well, it doesn’t support it natively, because if you have built your webhook cleanly as we talked about in the first Tip #1, your webhook should be able to hear that event without problems, and then through the Dialogflow API you could explicitly invoke it.
With respect to the information, it arrives in the same “referral” object that we mentioned in the previous section.
Tip #5 — Be careful with Payloads
In Tip #2, I told you about the advantage of using the “Custom Payload” response to build custom responses in case the Dialogflow platform doesn’t offer it natively. However, if you are using Dialogflow’s NodeJS library there are a couple of things you need to know, for example
You can’t send multiple Payloads because currently the library doesn’t support it.
In fact, this feature is still under discussion in Dialogflow’s Github threads.
But as I said before, it’s the end of the world? Well, no, not yet xD. Depending on the requirement you have to do, there are still some tricks you can apply.
Idea N° 1
Something similar to the previous tip, if you don’t use the library and you are building from 0 your webhook yourself, you could edit the response to force two payloads at the same time.
Idea N° 2
But what if you already started using the library and would like to write a text and at the same time a carrousel?. Well, let’s remember that communication through Facebook is through webhooks, so it means that we ourselves could invoke Facebook service to send a message.
The previous page is summarized in sending the wished object through POST.
https://graph.facebook.com/v4.0/me/messages?access_token=<PAGE_ACCESS_TOKEN>We already have PAGE_ACCESS_TOKEN, because we use it when configuring Dialogflow with Facebook.
Then we need to indicate to whom we will send the message (recipient user), and for this we need to know the PSID (page-scoped ID).
But where do we get it? Well, Dialogflow gives us this value from the moment we start a conversation, we can find it within the parameters of the Dialogflow Generic Context under the name facebook_sender_id, or in the field of the response originalDetectIntentRequest as sender and its “id” value.
So we have the token, we have the PSID, what’s next? Send the message.
Well this is easily encapsulated in a function, and now when you want to send a text and a custom payload together, you could do something like that:
Tip #6 — Facebook will not store information for you, Look for an alternative to storage
If you come from using Dialogflow with Google Assistant, you will know that you can save information between turns of a conversation or save information on the device and be available in multiple conversations.
However the case of Facebook is different, there is no way to save on the Facebook platform information about the conversation. Even Dialogflow stores the information about the sessions for a maximum period of 20 minutes, after that, the information that you have stored in the contexts and parameters, will disappear.
By default, output contexts expire after either five requests or 20 minutes after its corresponding intent is matched. If the same output context is included in another intent, the context resets the counter and clock to five requests and 20 minutes. | Dialogflow Documentation
I don’t have a code extract for this tip, because here, you could apply different types of solutions depending on the requirements you have. For example, personally, I use Firestore to create data structures according to the chat session I’m in or according to the user who started the chat. And as Firestore is a realtime database, it is very useful when bringing and writing information into it while the user writes to the bot at the same time.
I may be forgetting a couple of things, or there may be other cases that have happened to you and not to me. If I find any other I promise to add it to this post. =)
