Change the minimize icon in the agent chat with Service Portal Agent Chat

joeyfrease
Tera Expert

After using the methods described below our minimize button remained the X.

 

Using your article on how determining whether we are using Service Portal Agent Chat or Virtual Agent we are using Service Portal Agent Chat.  (I’ve just included the link for ref)

 

https://www.servicenow.com/community/virtual-agent-nlu-articles/am-i-using-service-portal-agent-chat...

 

The method I have used is to go into Service Portal and select Service Portal ie sp .

I’ve gone down to the CSS Variables and entered :

.sp-ac-root button.sp-ac-btn.open:after {

  content: "\f148"

}

From this article - https://www.servicenow.com/community/virtual-agent-nlu-articles/changing-the-virtual-agent-client-mi...

 

As this minus symbol is the exact result we are looking to achieve.  Preferably with this option as we’d like to avoid making our own minus button image to use.

 

We’d also like to change the wording from Close Chat to Minimize Chat.

 

Thank you very much in advance I really appreciate hearing back from your other article.  Your articles are very useful.

Joey

1 ACCEPTED SOLUTION

Mark Roethof
Tera Patron
Tera Patron

Hi there,

 

Just had a quick look. It looks like the behavior has changed in one of the recent releases. Using the browser inspect, I see that it's not .sp-ac-root button.sp-ac-btn.open:after anymore, but .sp-ac-root button.sp-ac-btn.open .icon-cross:before

 

Just tried with applying:

MarkRoethof_0-1716011305868.png

 

Result for me is:

MarkRoethof_1-1716011338548.png

 

 

 

 

Kind regards,

 

Mark Roethof

Independent ServiceNow Consultant

10x ServiceNow MVP

---

 

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

LinkedIn

View solution in original post

5 REPLIES 5

Mark Roethof
Tera Patron
Tera Patron

Hi there,

 

Just had a quick look. It looks like the behavior has changed in one of the recent releases. Using the browser inspect, I see that it's not .sp-ac-root button.sp-ac-btn.open:after anymore, but .sp-ac-root button.sp-ac-btn.open .icon-cross:before

 

Just tried with applying:

MarkRoethof_0-1716011305868.png

 

Result for me is:

MarkRoethof_1-1716011338548.png

 

 

 

 

Kind regards,

 

Mark Roethof

Independent ServiceNow Consultant

10x ServiceNow MVP

---

 

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

LinkedIn

Thank you, been on vacation a while, I'll try this now and see how it goes.  Thank you again

Thank you, that worked perfectly

DNC
Tera Contributor

Hello @Mark Roethof 

 

Thanks for the knowledge you are sharing with all.

 

I have tried the above things, it works well.
but now we need an "-" (Minus) or Down Arrow symbol.
i have tried this "content: "\f0d7";", it is showing as normal line only.

 

can you share the content code for "-" (Minus) or Down Arrow symbol.

 

Thanks

Nagarjuna