Virtual Agent button hover color change

[rah dev]

Hi Community, we have Virtual Agent set up on our Service Portal using Agent Chat Configuration. The issue is that when a user hovers over the chatbot launcher button, the background color changes — we want it to stay the same on hover with no color change. We tried adding .sp-ac-root button.sp-ac-btn:hover { background-color: #ffffff !important; } in the portal theme stylesheet but it's not working as expected. Can anyone guide us on the correct CSS class and the right place to add it? Our release is [add your version here]. Any help would be appreciated!

[henry_collins]

This usually happens because the Virtual Agent launcher is not fully styled from the Portal theme CSS, it often sits in its own DOM (sometimes shadow DOM & iframe), so .sp-ac-root ... won’t reliably reach it. Try inspecting the button and targeting the actual launcher class like .sn-va-web-client-launcher-button:hover or .sn-va-web-client-launcher:hover and apply the rule there with !important. 

If that still doesn’t work, move the styling into Agent Chat Configuration → Branding/Styling (Custom CSS) since that’s where VA-specific UI overrides are actually applied in most releases.

[Tanushree Maiti · Accepted solution]

Hi @rah dev 

You are on right direction . Only change in CSS in theme might work for your requirement.

Refer this article:Customize the Virtual Agent Service Portal icon (Agent chat configuration)