Rich Webchat in Dialogflow

The existing web demo integration in Dialogflow is quite limited in terms of capabilities. For example, you cannot display clickable hyperlinks inside the chat window.

What is Rich Webchat?

Rich Webchat is a system for rendering rich content and rich controls inside a chat window when building web based chatbots using Dialogflow.

Rich Content

Things like clickable hyperlinks, text formatting, line breaks, bullet lists, images are rich content. For example, this screenshot of an interaction with the demo SupportBot on this site shows the chatbot rendering bold headings, images, clickable hyperlinks and line breaks.

1 Use Markdown for rich content

Markdown is very well suited for Dialogflow chatbots since the primary mode of input for Dialogflow’s responses is a text box.

2 Use Google Assistant message type for rich controls

When you are in the Dialogflow console, in the Responses section, you will notice that when you click on the + sign next to the DEFAULT option, the Google Assistant message type pops up.

You can use the Google Assistant message type to create UI elements such as list selectors, buttons, carousel selectors and information cards

3 Interact with the agent using the REST API

This is an important part of the system. You cannot use the built-in integration, which means you need to use Dialogflow’s REST API to communicate with your agent. On the positive side, this means you get a ton of control over what you render into the chat window.

4 Use a Markdown parser

Depending on the server side language you use you need to parse the Markdown coming back from your agent when you make the REST API call. The output of this parse will be HTML you can paste into your chat window. For example, if you were using PHP as your server side language, you could use Parsedown.

5 Render into a custom UI

While this is a rich and complex topic, the important thing is to maintain some consistency as you choose how you will render the HTML generated by the Markdown parser.

6 Convert user’s interaction with your control into text

When your chatbot user interacts with a rich control, you should render the interaction as chat text and also send the text over to your Dialogflow*. In addition to maintaining the consistency of the conversational interface, this also allows you to see the chat history in the window, and helps with other things such as Chatbase integration.

More Resources

Once you learn and implement the system presented in this article, the following posts will help you further with adding rich content and rich controls inside your Dialogflow website chatbot.

By following all the steps listed above you should be able to successfully create a rich webchat inside Dialogflow. If you need a little more help, you can also preorder the course I am creating on this topic which will be released in March 2018 and save 50% off the launch price.

*This might seem obvious, but there are other ways to complete the step. For example, in response to the user’s interaction, you could also make an API request to an event which can trigger an intent. You should resist this, because it makes your chatbot less transparent and harder to reason about in the long run.