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.
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.
Things like buttons, list selectors, carousel selectors etc are rich controls. My Gift Minion demo bot includes some rich controls like carousel selectors and buttons.
Here I will outline the basic system you need to use to create a rich webchat experience for Dialogflow.
1 Use Markdown for rich content
Wikipedia defines Markdown as follows:
Markdown is a lightweight markup language with plain text formatting syntax.
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.
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.
*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.