Bring dynamic cards to Dialogflow chat bot on Skype.

In the previous article: A deeper dive into Intents on Dialogflow I’ve showed you how to return a static Card using the dialog flow console. In this article I will explain how to return it dynamically using the webhook that we created here.

Cards Usage

Cards are part of the rich messages that are offered on chat bots visual elements, it goes beyond the normal text replies to provide the user with the option of viewing and clicking a card item for the purpose of selecting an option. Imagine a scenario where a user is trying to figure out what an online has as shoes for a specific type. Would you prefer a chat bot telling you that as text or Cards like below? We all know the answer.

Cards are used on many places of the web like search engines, youtube…The below is from google search images tab, but it is similar to what we aiming for on our chat bot. Having cards within a chatbot conversation is really a powerful feature.

What are cards consist of?

This is a snippet from the official documentation:

Cards consist of an image, a card title, a card subtitle, and interactive buttons (for sending user queries or opening links). These elements can be combined depending on the platform’s requirements.

The last two words says “platform’s requirements” means if you building a chatbot for specific channel like Skype for example you will have specific elements to build in your response that could be different to the ones used for facebook.

Return a card from the webhook

In this article we’eve created a webhook that returns a dynamic text reply to the end user, we are going to override that functionality and make the webhook build and return a Card object, let’s see how to achieve that.

Build the card message object

To build a message object we are going to use the types available on the Google.Cloud.Dialogflow.V2 client library that you can find on nuget here.

var message = new Intent.Types.Message
{
Card = new Types.Card
{
Title = “Luxury room”,
Subtitle = “Internet and fantastic views!”,
ImageUri = “[YOUR-IMAGE-URL]",
Buttons = { new Types.Card.Types.Button() { Postback = “https://google.com", Text = “Click me” } }
},
Platform = Types.Platform.Skype
};

Don’t forget to replace [YOUR-IMAGE-URL] value with your image public url.

You can see that I’ve specified the Platform as Skype, since I’m doing this for skype channel.

Nothing complicated in the above object, it self-explanatory. The Post-back url that is set on the button is for the purpose of redirecting to the specific page after clicking on, I used google for my demo but in real world that would be a url that get the user to land on the product page on your website.

Also, in real world scenario such object will be populated with some values form the database if we loading records of the rooms available and building an array of Cards, where each card will have its own image and url to click on or even the text.

Pass the object in the response

After building the messages object all what we need to do is to populate the FullfillmentMessages property on the WebhookResponse as below.

// Populate the response
WebhookResponse response = new WebhookResponse
{
FulfillmentMessages = { message },
};

below if the full code of the Webhook method if you want to use as is.

Deploy your code changes and test your webhook again by kicking off a chat on Skype with your chat bot. I’ve explained the integration with Skype in this article: Integrate Dialogflow chatbot with Skype channel

If everything goes well you should get below response from the webhook now

You can also return multiple cards by populating a list of Message object

var message = new List<Intent.Types.Message>()

Then to populate you just create and add Message items into the above list:

var card1 = new Intent.Types.Message
{
Card = new Types.Card
{
Title = “Luxury room”,
Subtitle = “Internet and fantastic views!”,
ImageUri = “[YOUR-IMAGE-URL]",
Buttons = { new Types.Card.Types.Button() { Postback = “https://google.com", Text = “Click me” } }
},
Platform = Types.Platform.Skype
};
message.Add(card1);

You might need to test how these multiple cards will show up on different channels like facebook, Skype…to make sure you are getting the expected result.

Tip on the message object

You might wonder how did I get to know about the message object that we built above. The answer is, if you build a static Card using the Dialogflow console and return it in your chat, you should be able to view its json structure with the Diagnostic info of that response like below:

“fulfillmentMessages”: [
 {
  “card”: {
 “title”: “Luxury Room”,
 “subtitle”: “Subtitle”,
 “imageUri”: “[YOUR-IMAGE-URL]",
 “buttons”: [
     {
       “text”: “Click me”
     }
 ]
 },
 “platform”: “SKYPE”
 }

The C# message object that we built gets serialized to the above json structure which is returned to Dialogflow api.

This article covered the basic card feature, but there are other options available also like Carousels.