Resolution bot: 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 simplify using feature-rich messages in your chatbot. You can use Microlanguage with Tiledesk Resolution bot, 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, videos, micro apps or to handoff the conversation to human agents.

Microlanguage for Resolution bot

Microlanguage is a set of special text commands (simple tags) that you can easily embed into your Resolution bot.

For example, if you want to send an image to Tiledesk widget you can write a Answer 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:

Supported commands

Below a list of the supported microlanguage tags with some examples.

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. The command tag MUST start on a new line.

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 who decodes the intent from the sent text using NLP logic.

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. If you want to know more on text buttons read this article.

Text 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 http links in messages. While Tiledesk widget always renders http URLs found in the message (or using markdown syntax), 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 normal button with a small arrow in the top right corner of the button, as in the following picture:

Pressing the button, the URL content will open in a new 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 the button target as one of three available modes:

• “New tab” mode
• “Parent tab” mode
• “Widget frame” mode

“New tab” mode

Default Link Buttons will open the URL in New tab mode, that is to say the specified URL will open in another tab of the browser.

“Parent tab” mode

If you want to open the URL in the same widget’s page use the Parent mode. To activate this mode, insert a < character between the button and the URL, as in the following example:

Tiledesk website:
* Go to Tiledesk < https://tiledesk.com

“Widget frame” mode

This option is very useful if you want to open the URL content inside the widget frame itself. Just place the “>” character between the button and the URL, as in the following example:

Take a look at William Shakespeare biography:
* Wikipedia > https://en.m.wikipedia.org/wiki/William_Shakespeare
* Britannica > https://www.britannica.com/biography/William-Shakespeare

As in the following example:

Buttons in the “Widget frame” mode will be rendered with a right “>” arrow, as in the following picture.

If the user clicks one of the “Widget frame” mode buttons, le URL content appears into the same widget’s frame. A special header appears, showing the button title, a button to go back to the conversation and another button to open the content into a full browser window.

Intent Buttons

You can use Intent Buttons to directly call a specific intent, bypassing NLP intent decoding. This means that you will not send the button’s text to the Resolution bot but rather a hidden code (the intent name) that identifies the specific intent.

NOTE: Intent Buttons are not cross channel. They only work with Tiledesk Widget native channel.

With Microlanguage you always use the basic Button syntax, that renders a button, with the additional option tdIntent:INTENT-NAME, placed right after the button text. This will render a special button that, when pressed, shows a special animation that indicates it as an “Intent” button.

tdIntent – Syntax

This tag MUST be placed on the start of a newline.

Action button syntax:

* BUTTON TEXT tdIntent:INTENT-NAME

Example:

Are you sure?

* Yes tdIntent:YES_BUY
* No tdIntent:NO_BUY

tdIntentNoEcho

Default Intent Button automatically shows an echo text. Sometimes it’s useful to “trigger” a remote intent just to execute an action, without having a text echoed in the conversation. For example, you can write an intent connected to a remote webhook that just execute an action without replying anything. If you don’t want to show a text in the conversation as an echo to the user action use the tdIntentNoEcho option (instead of tdIntent) to effectively hide the button text as an echo in your conversation chatbot.

* BUTTON_TEXT tdIntentNoEcho:INTENT-NAME

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:

Your game
tdFrame:https://playpager.com/embed/chess/index.html

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 chatbot, 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 from the corresponding conversation and will try to invite a human, following the current routing 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 Resolution bot you can train a specific intent to switch to humans (more info), 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 from the corresponding conversation and will try to invite a human, following the current routing rules for the specific department (operating hours, users availability etc.). If no agents are available the conversation will be placed in the “unserved” queue. It will be automatically assigned (if Smart assignment is active) 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