A virtual assistant chatbot can reply for example with images, videos or a message with button replies. We designed Markbot exactly for this kind of task. Markbot is a language made of simple “tags” that make it simple to use feature-rich messages in your chatbot. You can use Markbot with Tiledesk Dialogflow native chatbot, all Tiledesk chatbots and the External chatbots that you connect to Tiledesk itself…

When using Tiledesk Markbot

You can generally use Markbot 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. 

Markbot syntax

Markbot is a set of special text commands (simple tags) that you can easily embed into your replies as simple text.

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

Here follows a list of the supported Markbot 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:

Use of tdImage tag

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

Users will see the image in place of the link

tdImage – Syntax

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

tdImage:IMAGE_URLtdImage: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 (must start on a new line of the answer 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 Markbot you can use the special Button syntax to render a button, like this:

It renders a couple of buttons

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 Markbot 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 Markbot 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:

Renders a “link” button

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

Action Buttons

You can use Action Buttons to allow custom communication to your chatbots. This means that you will not send to the remote chatbot webapp the button’s text but rather a hidden code (the action value) that identifies a specific action on the backend. You can use this kind of buttons to communicate some special action to the chatbot that not always depends by the text embedded in the button.

With Microlanguage you always use the basic Button syntax, that renders a button, with the additional option tdAction:ACTION-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 “Action” button.

tdAction – Syntax

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

Action button syntax:

* BUTTON TEXT tdAction:SPECIAL-ACTIONExample:

Vote for your president 
    * Trump tdAction:VOTE-TRUMP 
    * Biden tdAction:VOTE-BIDEN

tdActionShowReply (Optional)

Default Action Button doesn’t show any text as “sent”. It simply “flashes”. If you want to send effectively a text (and the action) to your chatbot you can use the tdActionShowReply option (instead of tdAction) to effectively send the button text to your chatbot.

* BUTTON_TEXT tdActionShowReply:ACTION-CALLBACK-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:

This sends a minigame embedded in an iframe

To play this inline mini game directly in the widget!

That you can play 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:

A Google Map sent by the Dialogflow agent is

rendered in the Tiledesk 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:

A playable video

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 Markbot 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