Home / DialogFlow ES / How to send any Facebook Messenger rich response from Dialogflow webhook
DialogFlow ES | Integrations | Rich Responses

How to send any Facebook Messenger rich response from Dialogflow webhook

I chose the title “How to send any Facebook rich response from Dialogflow webhook”. But it could just as well have been “How to send any Facebook Messenger | Telegram | Slack | Skype | Google Assistant | Google Telephony | Viber | Kik rich response” from a Dialogflow webhook, because there is no difference in terms of the channel.

The technique I am going to show here is dead simple. Unfortunately, it has one big con, which I will cover at the end of this article.

Get the actual JSON from the Dialogflow simulator

Watch this video first

Create a response in Dialogflow corresponding to your specific rich response

For example, here is a Facebook card intent.

Trigger the intent in the Dialogflow Simulator

In your Dialogflow simulator, use the training phrase and trigger the intent. Don’t enable the webhook (yet).

Click on the Diagnostics button and copy the JSON

Copy all the JSON in the array next to the “fulfillmentMessages” field coming back in the JSON response.

Here is what the JSON looks like in this example:

[
      {
        "card": {
          "title": "Card Title",
          "subtitle": "Card subtitle",
          "imageUri": "https://github.com/fluidicon.png",
          "buttons": [
            {
              "text": "Go to Google",
              "postback": "www.google.com"
            },
            {
              "text": "Go to Dialogflow",
              "postback": "www.dialogflow.com"
            },
            {
              "text": "Go to Slack",
              "postback": "www.slack.com"
            }
          ]
        },
        "platform": "FACEBOOK"
      },
      {
        "text": {
          "text": [
            ""
          ]
        }
      }
    ]

Your goal is to produce JSON as output from the webhook which exactly matches what you see in the Diagnostic Info popup.

Clone this RunKit notebook

Once you have taken a note of the exact JSON, now open a RunKit account and clone this RunKit notebook:

Set an action for the intent which must trigger the rich response

Suppose we use facebook.card as the action.

Copy the JSON into the variable called richResponse

In your Runkit notebook, extend the if condition to handle the ‘facebook.card’ action.

Here is what it looks like:

Delete the contents inside the “text” field

Now delete everything in the “text” field (you are already setting fulfillmentText before). Don’t forget to delete the comma right before the start of the “text” field. 🙂

Publish your notebook and get the endpoint of your RunKit notebook

Make sure to actually browse to the URL. RunKit will do a redirect to the final endpoint, so right clicking and copying the link will not work (Dialogflow fulfillment URLs do not allow you to redirect).

Set the fulfillment URL and enable the webhook

You can navigate to the endpoint of your RunKit notebook and add it as the fulfillment URL. It will look like this:

Here is something you can do: you can actually use the endpoint of my RunKit notebook to test it. https://dialogflowrichresponsefromwebhook-wijn0ffkdfgd.runkit.sh/

Be sure to enable the webhook on your intent.

But if you want to add your own rich response/channel combination, you need to first clone my RunKit notebook and make the changes I have pointed out in this article.

What about the Dialogflow Fulfillment Library?

You might be wondering “Since you are using NodeJS, why not simply use the Dialogflow Fulfillment Library and be done with it?”. It makes some tasks much easier.

That’s a good point. But the Fulfillment Library doesn’t seem to completely handle rich responses for all channels (see Issues).

So, the big con (as in “pros and cons”) of using this approach is that you don’t benefit from being able to use the Dialogflow Fulfillment library.

However, if the Dialogflow Fulfillment library doesn’t yet do what you want, and you aren’t interested in forking the fulfillment library source code and making your own improvements, my approach should help you for now.


This website contains affiliate links. See the disclosure page for more details. 
"The magic key I needed as a non-programmer"

The custom payload generator was the magic key I needed (as a non-programmer) to build a good demo with rich responses in DialogFlow Messenger. I've only used it for 30 minutes and am thrilled. I've spent hours trying to figure out some of the intricacies of DialogFlow on my own. Over and over, I kept coming back to Aravind's tutorials available on-line. I trust the other functionalities I learn to use in the app will save me additional time and heartburn.

- Kathleen R
Cofounder, gathrHealth
In this free course, I provide some tips for managing large Dialogflow ES bots without compromising on accuracy.

Similar Posts

15 Comments

  1. I have a question, if i want to send my response from dialogflow to different facebook pages how can i do that? Because in the integrations i can only add one facebook page access token

    1. I don’t really work on FB Messenger bots these days, but you cannot do that with the 1-click integration. You need to build out your own custom integration, probably.

  2. I am facing a small issue, Please look if you can help.

    For a Facebook Rich response i need to send 4 cards which will look parallel in one line. while this is showing in 4 row (one card per row) Can you suggest any small tips or sample code so I can get rid of this issue.

    Thanks in advance.

        1. I don’t think it is necessary. I took another look at your question, and I don’t think what you are trying to do can be done because how these cards are rendered is controlled by Facebook Messenger’s UI code, and you do not have any control over it.

  3. Hi man Your are good at it. I have a particular situation. I have my bakc-end and this responses a list of cards, when I use Dialog Flow simulator everything is O.K but when I use in messenger (I have published mi bot) mi list of card never appear, would you know why this is happening. A lot of thanks!!!!

    1. If you have followed the steps from the tutorial, then that’s hard for me to say. You can get in touch for 1-on-1 Skype consultation if this is urgent.

  4. Hi, congratulations it is very interesting your website

    i have a question
    how are obtained the card selected from carousel if button is the same text but not have a postback url

    thank you so much

  5. I am trying your code for sending LINE custom payload because Dialogflow Fulfillment library doesn’t yet do what I want.

    It works, but I still want to use Dialogflow Fulfillment library in other part of the code. And it gives me Error: Can’t set headers after they are sent. I think it because I am mixing handling the response myself and using Dialogflow agent.handleRequest().

    Is there any solution to this? or maybe, can you help answering https://stackoverflow.com/questions/54997668/dialogflow-fulfillment-line-custom-payload

    1. I don’t have the bandwidth for this right now. My suggestion is to find a freelancer who is already very proficient with Dialogflow’s Fulfillment library and is willing to study the source code in detail and modify it for your specific use case.

    1. I haven’t really worked on Viber bots, sorry. The general idea is to
      1. build your own integration (don’t use the custom integration), so that you can study the data format
      2. Then do some experiments and figure out how to send the correct payload using custom payload in Dialogflow intent
      3. Once you have done the above, now figure out how you can send the same payload from your fulfillment code