How to style your chatbot replies

Tiledesk, open source chatbot builder, provides an easy way to style your chatbot reply messages using Markdown syntax. We can start play with markdown with a Tiledesk Resolution bot, but this syntax si also supported by every external bot as well as Dialogflow native bot integration.

NOTE: Markdown syntax is only supported by the native Tiledesk widget (native channel). If your chatbot must work on different/multiple channels (e.g. Facebook) you can’t use Markdown because it is not directly supported. If you use Markdown syntax to show some media (e.g. images) you can use the alternativemicrolanguagesyntax where supported.

We can start from our previous created Charlie chatbot in the last tutorial, enhancing the power of his replies using Markdown language formatting.

Hyper-textual links

Supposing that our chatbot works as a banking supporter, we can add a new question-answer couple that replies to the common question “How can I open a new account?”. Move to the bot section, select Charlie from the bots list, then, using the toolbar, press “+ New answer” button:

New answer botton

Now we can write the question in the first field, followed by the answer in the following one. Then press the SAVE button.

press the SAVE button

Press SIMULATE USER in Request panel (see previous tutorial) and let’s try this new chatbot answer training:

SIMULATE USER

Well, as we can see, urls pasted into a message are automatically rendered as hyper-textual links. For most cases this is enough. But sometimes we need to alias a rendered link with a custom text. Markdown syntax comes in help this time.

We can render a link with an alternative text enclosing the desired rendered text in brackets (e.g., [this guide]) and then follow it immediately with the URL in parentheses (e.g., (https://quanta.bank/newbankaccount)).

Modify our Charlie reply to use this new syntax:

Modify our Charlie reply to use this new syntax:

Modify our Charlie reply

Now press UPDATE ANSWER, then, in the simulator, start a new conversation asking the same question, to trigger the same chatbot reply. This is our new message.

UPDATE ANSWER

The reply looks as expected, with our text rendered, instead of the original URL.

Images

To add an image, place an exclamation mark (!), followed by alt text in brackets, and the path or URL to the image asset in parentheses. To test image embedding we can add a new answer, something like the following:

test image embedding

You should write the image link in this way:

![global]

(https://i.pinimg.com/236x/9f/df/c4/9fdfc456ce9b829697dac8d44052ba04.jpg)

The message will be rendered like in the following picture:

Example

Other formatting options

Bold

What if you want to emphasise some parts of your message with some bold text? With embedded markdown this is a very easy task. To bold text, add two asterisks or underscores before and after a word or phrase. To bold the middle of a word for emphasis, add two asterisks without spaces around the letters (look here for more details).

bold text

Now “right documents” will be rendered in bold:

documents will be rendered in bold

Italic

To italicize text, add one asterisk or underscore before and after a word or phrase. To italicize the middle of a word for emphasis, add one asterisk without spaces around the letters.

Example


just placed a single _ around the phrase: _right documents_”

Example

right documents is now in italic!

Enjoy!

Feel free to pop in on our Discord channel to meet our team and our community! Also, feel free to send feedback about this tutorial to support@tiledesk.com. Thanks!