Dialogflow connector: handling images, videos, buttons and more
Introduction
Tiledesk widget (web and mobile) supports many special messages that go beyond simple text.
A chatbot can reply for example with images, videos or a message with button replies. We designed Microlanguage exactly for this kind of task. Microlanguage is a language made of simple “tags” that make it simple to use feature-rich messages in your chatbot. You can use Microlanguage with Tiledesk Dialogflow native chatbot, all Tiledesk chatbots and the External chatbots that you connect to Tiledesk itself.
When using Tiledesk Microlanguage
You can generally use Microlanguage to increase the end-user experience, i.e. proposing to your customers to reply using a buttons, or sending them images or videos or to handoff the conversation to human agents.
Microlanguage for Native Dialogflow Connector
As you probably already know, Dialogflow only integrates with mainstream chat channels like Telegram or Facebook Messenger. What if you want to support Tiledesk rich-messages that are not supported by Dialogflow? Here you can use Microlanguage.
Microlanguage is a set of special text commands (simple tags) that you can embed into your Dialogflow agent reply messages without any knowledge of the underlaying widget protocol.
For example, if you want to send an image to Tiledesk widget you can write a Dialogflow intent response like the following:
Hello, this is ietf.org logo
tdImage:https://www.ietf.org/media/images/ietf-logo.original.png
You will get on the Tiledesk Widget:

The Tiledesk microlanguage pre-processor put between Dialogflow and Tiledesk (aka Dialogflow connector) will process this message, translating the microlanguage instruction tdImage:IMAGE_URL in the corresponding widget protocol:
{
type: "image",
text: "Hello, this is IETF.orf logo",
metadata = {
src: "https://www.ietf.org/media/images/ietf-logo.original.png"
}
}
With Microlanguage it’s easy to overcome Dialogflow unawarness of Tiledesk widget technology sending feature-rich messages to your end-users.
Supported commands
Here follows a list of the supported microlanguage tags.
Send text
To send text you can simply write your message in the Response:

And the message will be rendered on the Widget in the chatbot reply balloon:

Send images
Tag: tdImage
Send an image with tdImage:IMAGE_URL tag in your response text:

It will be rendered on the user widget as an image followed by the optional text part:

tdImage – Syntax
This tag MUST be placed on the start of a newline.
tdImage:IMAGE_URL
Specify optional text simply adding one or more lines of text:
Here you have the IETF official logo:
tdImage:https://www.ietf.org/media/images/ietf-logo.original.png
Example:
Use the logo to spread Internet technology!
tdImage:https://www.ietf.org/media/images/ietf-logo.original.png
Specify image size (Optional)
tdImage,wWIDTH hHEIGHT:IMAGE_URL
Example:
tdImage,w100 h100:https://www.ietf.org/media/images/ietf-logo.original.png
Text Buttons
Syntax: Use ‘*’ followed by one space, then the button’s text
Sometimes you want to allow end-users to easily reply using Buttons. You can achieve this task with buttons, providing fast replies to your chatbots. With Microlanguage you can use the special Button syntax to render a button, like this:

This will be rendered on the user widget as a couple of buttons.
When the user presses the button the widget simply sends the button’s text back to the chatbot.

Generally *reply buttons* are embedded in chatbots replies. Reply buttons allow users to reply with a proposed sentence already built by the sender (generally the chatbot). Pressing the button simply sends the sentence (the text contained in the button) to the recipient (most of the time the external chatbot) on the other side.
Buttons – Syntax
With Microlanguage you can render a button with a syntax similar to the one used to render “Unordered Lists” in Markdown. With the markdown unordered list syntax, you will render a button on the native Tiledesk widget.
Example:
Are you sure?
* Yes
* No
Link Buttons
You can use buttons also as an alternative to links in messages. While Tiledesk widget always renders http URLs found in the message, sometimes it is more feasible to show a big button to power the link importance and his accessibility.
With Microlanguage you can alway use the basic Button syntax, that renders a button, with the addition of a URL placed right after the button text. This will render a special button, with a small arrow on the top right corner, that indicates it as a link. Look at this example:

It will be rendered on the user widget as:

Pressing the button will open the link in another another browser tab.
Link Button – Syntax
Place this tag on a Button line, just after the button text.
Link Button syntax:
* Button text HTTP-URL
Example:
Choose your pricing
* Cloud https://tiledesk.com/pricing-cloud/
* Self-managed https://tiledesk.com/pricing-self-managed/
Link Button – Specify the link’s target window (Optional)
You can specify if the target is another page or the same page where the widget is hosted. Default Links will open the specified URL in another tab/window of the browser. If you want to open the URL in the same widget’s page use a parent instead, separating the URL by two spaces instead of just 1, from the last button word:
Tiledesk website:
* Go to Tiledesk https://tiledesk.com
NOTE: There are 2 spaces between ‘Tiledesk’ and ‘http://tiledesk.com‘
Frame
Tag: tdFrame
Send a web content embedded into an iframe with tdFrame:PAGE_URL tag in your response text:
This tag works just like the tdImage but instead of an image it will send to the widget am iframe with a page content in a box. You can also specify the box size, as you do with tdImage tag. This tag is extremely useful if you want to send to the user pluggable components not supported by the widget as calendars, web maps, mini games etc.
For example, write this:

To play this inline mini game directly in the widget! 🙂

tdFrame – Syntax
This tag MUST be placed on the start of a newline.
tdFrame:FRAME_URL
Specify optional text simply adding one or more lines of text:
Here you have some text:
tdFrame:https://www.emanueleferonato.com/wp-content/uploads/2019/02/runner/
tdFrame – Example: send a map
To send a google map simply write a text reply like this:
This is the address
tdFrame:https://www.google.com/maps/embed?origin=mfe&pb=!1m3!2m1!1suniversity+of+san+francisco!6i13
You will get a map rendered in the widget:

Frame size (Optional)
tdFrame,wWIDTH hHEIGHT:FRAME_URL
Small map example:
Write tdFrame,w150 h150 to reduce the size of the map:
This is the address
tdFrame,w150 h150:https://www.google.com/maps/embed?origin=mfe&pb=!1m3!2m1!1suniversity+of+san+francisco!6i13
You will get a smaller map frame:

Video
Tag: tdVideo
With this tag the chatbot can send mp4 or Youtube videos to the user.
tdVideo – Syntax
This tag MUST be placed on the start of a newline.
tdVideo:VIDEO_URL
Specify optional text simply adding one or more lines of text:
Here you have some text:
tdVideo:https://file-examples-com.github.io/uploads/2017/04/file_example_MP4_480_1_5MG.mp4
tdVideo – Example: send MP4 video
Write a text reply like this:
Your video here
tdVideo:https://file-examples-com.github.io/uploads/2017/04/file_example_MP4_480_1_5MG.mp4
The video will be rendered in the widget like this:

Handoff to human agents
Sometimes, during a conversation with your Dialogflow agent, you want the user to opt for a switch to a human agent.
With Microlanguage this is a very easy task. Just add the \agent tag on a new line at the end of the text reply.
Tag: \agent
With this tag the chatbot will remove the current chatbot (the Dialogflow agent) from the corresponding conversation and will try to invite a human, following the current department rules. If no agents are available the conversation will wait in the “unserved” queue until an agent becomes available again.
\agent – Syntax
Add the \agent tag on a new line at the end of the text reply, as in the following example:
We are putting you in touch with an operator
\agent
In Dialogflow you can train an specific intent to switch to humans, as in the following example:

The \agent keyword, at the end of the reply phrase, will never be shown to the end-user and will be removed from the reply text. It is an instruction for Tiledesk to switch the conversation to humans. As soon as Tiledesk see this instruction in the text it will remove the current chatbot (the Dialogflow agent) from the corresponding conversation and will try to invite a human, following the current department rules. If no agents are available the conversation will wait in the “unserved” queue until an agent becomes available again.
Do you have feedback on this article? Please send us your feedback writing an email to info@tiledesk.com
0 Comments