Dialogflow Tutorial 2 - Buttons and images

This tutorial shows how to easily embed buttons (or images) in your Dialogflow replies

We'll start from Dialogflow Tutorial 1 - Dialogflow as external chatbot, just adding a small library to our original endpoint.

Fork the tutorial code

You must use the code in Tutorial 1. The code is available on Github here.

Fork the tutorial code using the Fork button. Now you have a copy of the tutorial on your own repo.

Introduction

This time we'll give a try to the second end point already embedded into the nodeJS app:

// Tutorial 2 - Use 'micro language' to easily render buttons or images
app.post("/microlang-bot/:botid", (req, res) => {
...
})

As you can see on top of the tutorial code, to use microlanguage you must require:

const { TiledeskChatbotUtil } = require('@tiledesk/tiledesk-chatbot-util')

As in Dialogflow Tutorial 1 you have to create a Dialogflow agent, train the same Agent following the instructions in this tutorial, then go to Tiledesk and create an external bot and connect it to Routing (or to a Department).

Train an agent with the micro language

First we need to create a Dialogflow agent. Then we can just focus on the defaultWelcomeIntent to show how buttons and images work. This same logic will also apply to every other intent in the Dialogflow agent.

Choose the defaultWelcomeIntent and move to the 'responses' section. Remove all other responses, because we only want one welcome message from our Agent. Edit the response as the following with a copy & paste:

Hi! How are you doing?
*Just questions to the bot
*I would talk to an agent

It will look like in the following image:

image

With micro language it's sufficient that you place a '*' followed by the button text on the end of the response. Every button must placed on a new line.

The final effect will be like this:

image

To send an image simply use the \image command in the response:

Your image
\image:https://www.tiledesk.com/wp-content/uploads/2019/11/backoffice-analytics-1.png

And the image will be shown in the widget like this:

You can also use buttons and images togheter:

Your image
\image:https://www.tiledesk.com/wp-content/uploads/2019/11/backoffice-analytics-1.png
*Switch to agent
*Menu

And this is the final effect:

Enjoy Tiledesk!

Do you have feedback on this article? Please send us your feedback writing an email to info@tiledesk.com