Rounded Icon Dialogflow CX Chat

[lastChatbot]

Hi,

I'm trying to implement a circle icon for my Dialogflow CX Chat. I've checked the Documentation, and with Gemini + ChatGPT. I couldn't find a solution.

How do I render the icon as a circle?

Thanks!

[Yash-Kavaiya]

It's just HTML and CSS things check docs and change accordingly

Dialogflow CX Messenger  |  Google Cloud 

[lastChatbot]

Thanks! Maybe I'm missing something but there's nothing about circular icons in the CSS and HTML pages.
Also, the chatbot in your screenshot doesn't have an icon. 

[caryna · Accepted solution]

Hi @lastChatbot,

Welcome to Google Cloud Community!

In the Dialoflow CX console, there is no option to convert the icon into a circular shape. While the document provided by @Yash-Kavaiya, these are the only properties you can customize:

• df-messenger-titlebar-icon-width
• df-messenger-titlebar-icon-height
• df-messenger-titlebar-icon-padding

The simplest solution you may consider is using a pre-cropped circular photo and then setting your desired height and width using CSS. Alternatively, you can file a feature request regarding this for enhancement. Before filing, please take note on what to expect when opening an issue.

Was this helpful? If so, please accept this answer as “Solution”. If you need additional assistance, reply here within 2 business days and I’ll be happy to help.

[lastChatbot]

Thanks, @caryna! That's also what I ended up doing. I created a rounded png and used that as the icon. 

[playz12]

It can be changed accordingly to your needs.