Tiledesk Widget to converse with Dialogflow

, , ,

widget to converse with dialogflow

Tiledesk is made of “tiles”, reusable components that a developer can use with or without the Tiledesk platform.

The Dialogflow Web Widget Proxy tile is a Nodejs + Web Widget application providing a floating chat in your website directly connect to Dialogflow.

This option is very useful if you are building a Dialogflow chatbot-only solution with no need of humans-handoff capabilities or other amazing stuff that Tiledesk provides out of the box.

Main features of the project are:

  • NodeJS proxy to handle Dialogflow credentials stuff
  • Easily send images and videos
  • Option buttons
  • Conversation messages persisted
  • Native Dialogflow speech-to-text and text-to-speech
  • Dialogflow agents handoff – users can switch between agents

This project is released on GitHub:

Dialogflow Web Widget ProxyWeb Widget and a Dialogflow NodeJs proxy. It’s a small web application to configure with Dialogflow credentials and securely connect to Dialogflow APIs.

If you are interested in customizing the widget from the source you can refer to Dialogflow Web Widget project.

Setup the environment

Go to the Dialogflow Web Widget Proxy, fork and download it locally.

Now install all dependencies with:

> npm install

then launch the web application:

> npm start

Now open your browser on http://localhost:3000

The Node App is running and you will see the index.html page with the widget button on the bottom right. Click the button and the widget will open.

The widget can’t still connect to your Dialogflow agent because of the lack of some configurations.

Let’s configure!

Upload your Google Credentials file

Dialogflow needs a private key to allow the use of APIs.

To provide the google credentials key you must create, in the root folder of the project, a new subfolder named google_credentials:

Under this folder upload your Dialogflow private key file generated using this guide:

https://dialogflow.com/docs/reference/v2-auth-setup

Just stop follow the guide until the JSON key file download.

Once you downloaded the key file (with json extension) upload it in the google_credentials folder, as shown in the following picture:

As you can see, the key file name starts with your projectID, followed by a UUID and the json extension.

Now open the index.html file. You will see a bunch of properties. Just focus on the custom_attributes section and the agent sub property.

The “agent” property must have the same ID of your Dialogflow ProjectID, as you can find in the Settings > General tab of your Dialogflow agent:

Place this value in the “agent” property as shown in the picture.

Please remember that the widget will start sending a hidden message to Dialogflow just to receive a welcome message. So please train your desired welcome intent with a special word that you imagine a user will never use. In our case we used “__start”:

Now you can re-deploy the proxy app and reload your index page.

As soon as the page opens you can press “Ask me” to open a new conversation with your agent:

If the configuration is correct and you trained a Welcome intent with the “__start” keyword, you will see the welcome intent replying to you instantly as soon as the conversation view will open:

Change the default chatbot icon

To change the chatbot icon simply upload it, name it as the Dialogflow project ID and upload the icon in the “images” subfolder, with .png extension:

Use buttons in your agent

Sometimes Dialogflow Natural Language Understanding is not the best user experience and you prefer to provide your users some buttons to show clear options on how to continue a conversation.

The widget project provides an easy way to render buttons. Just use a bullet list with “*”.

For example, if you write a reply like the following:

This single reply will be rendered with the bullet list options replaced by buttons, like this:

Sending images

You can also send images from your DF agent to the user.

If you want your agent to send an image simply add a new line, starting (both important!) with  “\image:HTTP_ADDRESS_OF_IMAGE”. With this command you address the proxy app to treat this response like an “image” message. Look at the following image for an example:

Remember that the command must always start on a new line and that only one image can be sent in a response.

This is how the image will be rendered:

Conclusions

This tutorial will be followed by another couple of articles. We will cover how the Tiledesk Dialogflow Widget can:

  • Support Speech to text (and text-to-speech)
  • Switch control between DF agents during a conversation

If you need help configuring the proxy/widget, please open an issue on GitHub project here

See you soon!

Andrea Sponziello

Andrea is Product Designer and AI Researcher here at Tiledesk. He’s in love with enterpise software, especially if with open source DNA. Besides writing code, he’s a big fan of sports (especially martial arts), nature and classic letterature.
Andrea Sponziello

Latest posts by Andrea Sponziello (see all)