Styling your chatbot replies
Tiledesk 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 alternative microlanguage syntax 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” 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 SIMULATE USER in Request panel (see previous tutorial) and let’s try this new chatbot answer training:
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:
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.
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:
You should write the image link in this way:
The message will be rendered like in the following picture:
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).
Now “right 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.
right documents is now in italic!
Enjoy!
Please feel free to send feedback about this tutorial to support@tiledesk.com. Thanks!
0 Comments