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:
"title": "Card Title",
"subtitle": "Card subtitle",
"text": "Go to Google",
"text": "Go to Dialogflow",
"text": "Go to Slack",
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:
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.
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.