Dialogflow Messenger How To
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.