The Rich Website Chatbot

Contrast this to a chatbot I have built using Dialogflow on my course website.

Now, I custom built the UI, and the bot is being powered by Dialogflow because I wrote custom code using Dialogflow’s REST API. At the same time, the bot does use Dialogflow for the conversation logic. So the effort is obviously much greater than the 1-click web demo integration, but the benefits are quite good.

Rich Content

As you can see in the screenshot, you can display bold text inside the chat window. And you can also add line breaks. Lastly, you can create clickable hyperlinks. This is what I refer to as rich content. (By the way, this is just standard terminology – when you have (say) an online text editor which can support these functions it is usually called a “Rich Text Editor”.

Rich Controls

You can also see that there are two buttons in the screenshot. When user clicks on the button, the chatbot behaves as if the user typed in the words on those buttons into the bot, and reacts accordingly.

Combining rich content and rich controls, I call this Rich Website chatbot. In this article, I will explain the system I used to create such a chatbot.

Why does the chat interface look so ugly?

I am not a UX guy and this is the best I could come up with 🙂 But you can change the look and feel of the interface quite easily if you know how to use CSS.