Clickable response such as a button in Dialgflow

user_9571739 0
Viewed 9660

I have been developing a chatbot for my android app using dialogflow and its working perfectly. But now I've a requirement to get a clickable response from my chabot. For example, let's say that the app user is asking for a specific location. I want Dialogflow chatbot to return a button or a link as the response so that the user could click on that and be redirected to the google maps.

I have went through a lot of tutorials, blogs and docs yet I've not been able to find a satisfying answer. If you could help me with a code example as well, that would be really appreciated.

Thank you in advance

dialogflow-es android
3 Answers

If you are using Dialogflow to integrate with your own system (as opposed to something like Facebook Messenger, Actions on Google, or other bot platforms) using the Detect Intent API, then you can include any data you want in the payload object of your webhook response. This is passed back to you in the response to your Detect Intent call in the response body in the queryResult.webhookPayload object.

You can include in here any information you wish, and render it however you'd like.

user_14056340

Inside the Intent section in Dialogflow, click on "Google Assistant" in Responses. Select "Link Out Suggestion" which is used for giving a clickable link. In case if you just want the button without link then you can use "Suggestion Chips". On the UI code you will need to parse it and render it as clickable button.

See screenshots below from dialogflow: Select Link Out Suggestion Enter name and URL

For more details, refer to https://www.kommunicate.io/blog/rich-message-button-response-dialogflow-chatbot/

user_11228280

You may have to use Google Maps URLs for this purpose. These provide a Universal Cross-platform solution.

Follow these steps:

Based on user Responses, encode a Map URL as shown in examples here https://developers.google.com/maps/documentation/urls/guide

For example, consider the URL from the guide above

https://www.google.com/maps/search/?api=1&query=47.5951518,-122.3316393&query_place_id=ChIJKxjxuaNqkFQR3CK6O1HNNqY

Then use Buttons in Basic Card as follows

app.intent('demo', (conv, params) => {
    // Create a basic card with the URL 
    conv.ask(new BasicCard({
      text: `This is a basic card with Map Response.`,
      subtitle: 'This is a subtitle',
      title: 'Title: Open Map',
      buttons: new Button({
        title: 'Open Map as per URL',
        url: 'https://www.google.com/maps/search/?api=1&query=47.5951518,-122.3316393&query_place_id=ChIJKxjxuaNqkFQR3CK6O1HNNqY',
      })
    }));
}

You can also use other Responses (such as linkOutSuggestion ) as described here: https://developers.google.com/actions/assistant/responses

Hope that helps!

user_67635440
Related