How to change sparkle icon in now assist

[CDJ]

Hi All,

I’m trying to update the Now Assist icon color. When I inspect the element in the browser, I can see it is using the class .now-icon with the following CSS:

.now-icon { fill-rule: evenodd; fill: currentcolor; }

If I manually change the color in Inspect, it works, but the change doesn’t stay after refresh.

Can someone guide me where I need to apply this change so it is permanent?

• Should I modify the Theme CSS in Service Portal?

• Or is this controlled through UI Builder (Next Experience / Workspace)?

Any best practice on overriding the fill: currentcolor; for the Now Assist icon would be really helpful.

Thanks in advance!

[GlideFather]

Hi @CDJ,

I don't have any available instance with the Now Assist at the moment so I don't remember exactly, but go to Now Assist Admin Console (or Centre?) and try to go tab by tab in there.

Latest on Monday I shall have one accessible environment to check it on my own, ping me if I'll forget :))

[ctsmith]

Not much luck for me either.  It seems to be these in CSS:

--input-sparkle-gradient_color--bottom: var( --nass-input-sparkle-gradient_color--bottom );

--input-sparkle-gradient_color--top: var( --nass-input-sparkle-gradient_color--top );

But I don't see a setting here to change it:  https://www.servicenow.com/docs/bundle/zurich-platform-user-interface/page/build/service-portal/refe...

[Aniko Hegedus]

Hi,

We're using a custom portal theme and because it's custom, the now assist icon doesn't even display.

However, if you add to the CSS variable of the theme your icon, you'll be able to change it. Probably it works with OOB themes as well

$now-sp-nass-FAB-icon: url('/sparkle.svg');

If you find that it's too small, you can highlight its background, because it is placed in a circle

Eg:

$now-sp-nass-FAB-gradient-color-1: #366e8f;

More options here: 
https://www.servicenow.com/docs/bundle/zurich-conversational-interfaces/page/administer/now-assist-i...