Use Markdown For Rich Content

You saw in my example bot’s screenshot that I could add bold text formatting and clickable hyperlinks. I actually use Markdown inside my Dialogflow agent to specify this.

For example, I use the following Markdown to get the output you see in the screenshot (at the beginning of this tutorial):

If you are not familiar with Markdown, you can take a look at this guide. It should take you only a day or so to pick up the basics.

Three things to note from my Markdown:

1 Use the double asterisk to create bold text (standard Markdown)

2 Use SHIFT + ENTER inside the Simple Response textbox in Dialogflow to create actual line breaks

3 Use the standard Markdown syntax for specifying hyperlinks. Note: in case you weren’t clear about this, you need to use some “anchor text” and the corresponding URL to create clickable hyperlinks in HTML in any case. In the example shown, [courses] is the anchor text and ( is the corresponding URL.

How is the markdown translated into HTML?

Inside chatbot.js, I use a markdown to HTML library to translate the Markdown into appropriate HTML.

In my case, I use the showdownjs library to translate Markdown into HTML, although other similar libraries will work just as fine for this use case.