Echo Dot (3rd Gen) - Smart speaker with Alexa - Charcoal

Use your voice to play a song, artist, or genre through Amazon Music, Apple Music, Spotify, Pandora, and others. With compatible Echo devices in different rooms, you can fill your whole home with music.

Buy Now

Wireless Rechargeable Battery Powered WiFi Camera.

Wireless Rechargeable Battery Powered WiFi Camera is home security camera system lets you listen in and talk back through the built in speaker and microphone that work directly through your iPhone or Android Mic.

Buy Now

Dialogflow Returning dynamic card elements through fulfilments

0
103


(code snippets included)

dipesh pandey
Photo by Tim Bennett on Unsplash

In this article, I will give you a complete tutorial of how to return multiple elements of Facebook messenger dynamically through fulfillment and webhooks.

Facebook messenger essentially supports 5 different elements.

Facebook messenger card layout.

It’s a very easy job while using Dialogflow UI to integrate these items. But when it comes to returning it through custom webhooks for dynamic content from your web server, it can be very painful for every chatbot developer.

Follow the steps below.

Step 1: Connect your intent to fulfillment.

Dialogflow supports inline editor which is powered by google cloud functions and Webhooks. You can enable anyone of those.

Enable webhooks For DialogFlow

In this tutorial, I will go through only webhooks. Go ahead and enable it quickly.

Step 2: Enter the credentials here along with the URL of the web service.

I am using a python flask web app, to connect my chatbot with Dialogflow and hosted in Heroku web server, so the URL here is: htttps://heroku.com/

Now the webhook is enabled for particular intent it displays what returns from the URL. We will return the required response from our program in this part.

1. Knowledge graphs and Chatbots — An analytical approach.

2. 🤖 How to talk to Computers: A Framework for building Conversational Agents — Part 1

3. Sentiment Analysis Voice Bot

4. Chatbot, Natural Language Processing (NLP) and Search Services and how to mash them up for a better user experience

2.1 GENERIC CARD LAYOUT.

This piece of code returns cards. We can also return multiple cards which are displayed as a card carousel in messenger.

https://gist.github.com/mepesh/4ebafeb67d782f52cf8bd685fcbb0d66#file-dialogflow_card_layout

If you want multiple card elements displayed as a carousel then separate another card element with a comma and return as a fulfillment message from the callback URL. Here is the code snippet.

https://gist.github.com/mepesh/31ce00547e4b0c98b8e0a1ecc5db27cd#file-dialogflow_multiple_card_layout

2.2 Quick Replies

These can be very handy when you want the user to enter the desired options to explore. The quick reply comes with a title which is a string and multiple quick replies options. Here is the code snippet.

https://gist.github.com/mepesh/af0f040a21c18999e3a2cf155a0dabf8#file-dialogflow_quick_replies_custom

2.3 Dynamic Text

You can just return plain text through your code, into messenger chatbot. Here we return a response as fulfillmentText and not fulfillment message. This is important otherwise you may encounter error not syntax but logical error and hard to find.

https://gist.github.com/mepesh/37632456881f722c7c46a7f91dc7c0b1#file-dialogflow_text_return_webhooks

Facebook messenger also has a video card element that only supports video from Facebook and not other video hosting sites like youtube, Vimeo, and other websites.

Dialogflow fulfillment inbuild code editor has support for only node js, and the choice of web server should be google firebase. If you are uncomfortable with this you can always choose webhooks to be enabled and connect to your web services.

Thank you for coming down to the end of this article. I hope you find this article useful in building a successful chatbot. If you have any question regarding this tutorial you can always write to me @ dipesh.pandey42@gmail.com



Read More

LEAVE A REPLY

Please enter your comment!
Please enter your name here