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 public/index.html. 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:
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:
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
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.
/wp-content/uploads/2019/10/image13-1.png832768Andrea Sponziello/wp-content/uploads/2018/03/tiledesk-logo.pngAndrea Sponziello2019-10-14 09:55:012019-11-25 11:57:38Tiledesk Widget to converse with Dialogflow