Dialogflow Returning dynamic card elements through fulfilments


(code snippets included)

dipesh pandey
Picture by Tim Bennett on Unsplash

On this article, I offers you an entire tutorial of tips on how to return a number of elements of Fb messenger dynamically through achievement and webhooks.

Fb messenger basically helps 5 completely different elements.

Fb messenger card structure.

It is a very simple job whereas utilizing Dialogflow UI to combine these things. However in relation to returning it through customized webhooks for dynamic content material out of your net server, it may be very painful for each chatbot developer.

Comply with the steps under.

Step 1: Join your intent to achievement.

Dialogflow helps inline editor which is powered by google cloud capabilities and Webhooks. You’ll be able to allow anybody of these.

Allow webhooks For DialogFlow

On this tutorial, I’ll go through solely webhooks. Go forward and allow it rapidly.

Step 2: Enter the credentials right here together with the URL of the online service.

I’m utilizing a python flask net app, to attach my chatbot with Dialogflow and hosted in Heroku net server, so the URL right here is: htttps://heroku.com/

Now the webhook is enabled for specific intent it shows what returns from the URL. We’ll return the required response from our program on this half.

1. Information graphs and Chatbots — An analytical strategy.

2. 🤖 How you can discuss to Computer systems: A Framework for constructing Conversational Brokers — Half 1

3. Sentiment Evaluation Voice Bot

4. Chatbot, Pure Language Processing (NLP) and Search Companies and tips on how to mash them up for a greater person expertise


This piece of code returns playing cards. We will additionally return a number of playing cards that are displayed as a card carousel in messenger.


If you would like a number of card elements displayed as a carousel then separate one other card component with a comma and return as a achievement message from the callback URL. Right here is the code snippet.


2.2 Fast Replies

These might be very useful once you need the person to enter the specified choices to discover. The short reply comes with a title which is a string and a number of fast replies choices. Right here is the code snippet.


2.Three Dynamic Textual content

You’ll be able to simply return plain textual content through your code, into messenger chatbot. Right here we return a response as fulfillmentText and never achievement message. That is essential in any other case you might encounter error not syntax however logical error and onerous to seek out.


Fb messenger additionally has a video card component that solely helps video from Fb and never different video internet hosting websites like youtube, Vimeo, and different web sites.

Dialogflow achievement inbuild code editor has assist for under node js, and the selection of net server ought to be google firebase. If you’re uncomfortable with this you possibly can all the time select webhooks to be enabled and connect with your net providers.

Thanks for coming all the way down to the tip of this text. I hope you discover this text helpful in constructing a profitable chatbot. If in case you have any query relating to this tutorial you possibly can all the time write to me @ dipesh.pandey42@gmail.com


Please enter your comment!
Please enter your name here