Home / Website Bots / Customizing the CSS of Dialogflow Messenger by manipulating the shadow DOM
Website Bots

Customizing the CSS of Dialogflow Messenger by manipulating the shadow DOM

I get this type of question quite often on my YouTube channel. Someone wants to customize the look and feel of the Dialogflow Messenger more than what is currently supported (which isn’t a lot).

There is a specific answer in StackOverflow on how to customize the icon position in Dialogflow Messenger. The answerer used the shadow DOM to manipulate the icon position inside the load event.

Here, we are modifying the shadow root and changing the icon position using the vh CSS attribute. To the extent that you know how to manipulate the shadow DOM, you can customize the look and feel of your Dialogflow Messenger chat widget.

But you can see the difficulty with this. Suppose, instead of 5vh, I changed it to 25vh, notice that the icon position can be changed a lot.

But the rest of the stuff does not work as expected. For example, the icon now obscures the chat window content.

Now, I am no shadow DOM expert. I would expect that you can also change the position of the chat window and anchor it to the position of your icon.

But that’s not the point.

The issue is that you cannot do these things in a reliable way. If Google changes something on their end, your existing, carefully constructed customizations will probably break.

This is precisely why you have all the existing CSS customizations. They allow you to not think about the positioning of your chat widget and such and allow the Dialogflow Messenger team to handle it.

In summary, I don’t recommend going beyond the existing CSS customizations unless you are prepared to do a lot of work maintaining the look-and-feel of your Dialogflow Messenger chat widget on multiple devices.

<— End of article —>

This website contains affiliate links. See the disclosure page for more details. 
Check out the Learn Dialogflow ES and Learn Dialogflow CX courses if you would like to learn Dialogflow in depth.
"The magic key I needed as a non-programmer"

The custom payload generator was the magic key I needed (as a non-programmer) to build a good demo with rich responses in DialogFlow Messenger. I've only used it for 30 minutes and am thrilled. I've spent hours trying to figure out some of the intricacies of DialogFlow on my own. Over and over, I kept coming back to Aravind's tutorials available on-line. I trust the other functionalities I learn to use in the app will save me additional time and heartburn.

- Kathleen R
Cofounder, gathrHealth

Similar Posts