How to change Virtual Agent Icon Background color?

Community Alums · ‎06-21-2020

Hello,

Could you please inform how can i change virtual agent icon background color?

Mark Roethof · ‎06-21-2020

Hi there,

If it just concerns changing the background color, DON'T go for cloning and editing the widget. I know this is a popular answer the community, though really not the correct way.

You could use the instance options for this. See these articles I wrote a while ago:
Virtual Agent bubble color / url parameters

If you embedded the widget directly to the header or footer, visually you will not have instance options. Though, workaround:

<widget id="sn-va-sp-widget" options='{"button_color":"#FF0000"}'>

If my answer helped you in any way, please then mark it as helpful.

Kind regards,
Mark
2020 ServiceNow Community MVP
2020 ServiceNow Developer MVP

---

LinkedIn
Community article list

Kind regards,

Mark Roethof

Independent ServiceNow Consultant

10x ServiceNow MVP

---

~444 Articles, Blogs, Videos, Podcasts, Share projects - Experiences from the field

View solution in original post

Andrea Elms · ‎11-22-2020

Thanks a lot Mark, this worked for me 🙂

Kiran Raddy · ‎07-06-2022

VA chat button can be displayed using "Virtual Agent Service Portal widget" widget or Agent Chat configuration. As Virtual Agent Service Portal widget is in the verge of deprecation, it is suggested to use Agent chat configuration. Make sure you are not using both the configurations.

1) If VA is displayed using "Virtual Agent Service Portal Widget"

Navigate page designer -> "Virtual Agent Service Portal Widget" instance options -> Update "Floating Button Color"

2) If VA is displayed using Service Portal -> "Agent Chat" configuration

Step 1. Locate your Service Portal Theme.

Service Portal -> Themes in the navigator.

Step 2. In the CSS variable field for the theme, add the line.

$sp-agent-chat-bg:#C8102E;

Save the theme. Refresh the Service Portal.

Hope this helps. Please mark the answer as correct/helpful based on impact.