Dialogflow Messenger HTML and CSS customizations

The big advantage of using the Dialogflow Messenger integration (instead of the 1-click web demo) is that it is possible to customize the behavior of the chat widget using HTML and CSS customizations. You can check out the different customizations available in the documentation, and I also go over them in more detail in the next few lessons.

A demo bot which combines multiple HTML attributes

The Dialogflow Messenger Demo bot that you saw in the first lesson actually incorporates multiple HTML attributes.

Custom prompt based on the URL

I have 7 different pages corresponding to the seven different rich response types. When user lands on a specific page, the corresponding Rich Response type is automatically displayed.

You can do this by using the Intent attribute, as I explain here.

How to produce the Description rich response

How to generate the info card response

How to generate the hyperlink response

How to generate the Image response

How to generate Suggestion Chips response

How to generate the List response

How to generate the Accordion response type

Custom chat widget title based on the page

Similar to the custom chat prompt, you can also customize the chat widget title based on the URL as you can see in the above pictures (that is, all of them have different widget titles).

You can do this by using the appropriate chat-title attribute, as I explain here.

Keep the chat widget open when user lands on the page

The chat widget is already open when the user lands on the page.

This is not a required HTML attribute, but rather an option HTML attribute.

You can do this using the expand attribute as I explain here.

About this website

BotFlo1 was created by Aravind Mohanoor as a website which provided training and tools for non-programmers who were2 building Dialogflow chatbots.

This website has now expanded into other topics in Natural Language Processing, including the recent Large Language Models (GPT etc.) with a special focus on helping non-programmers identify and use the right tool for their specific NLP task. 

For example, when not to use GPT

1 BotFlo was previously called MiningBusinessData. That is why you see that name in many videos

2 And still are building Dialogflow chatbots. Dialogflow ES first evolved into Dialogflow CX, and Dialogflow CX itself evolved to add Generative AI features in mid-2023