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