Agent Chat Icon Configuration

[Priya Shid1]

Hello All,

I have configured agent chat for agent workspace.I want to change agent chat icon in to Button with name as: Agent Chat and want to add that button in to the footer left side of service portal .

I tried to achieve that changing CSS of Virtual Agent Service Portal Widget widget but no luck,

 Please help me on the same.

Thanks,

Priya.

[Mark Roethof]

Hi there,

Like I mentioned in my reply on the article: Please share details of what you tried.

Kind regards,
Mark

[Priya Shid1]

Hi MArk,

I tried to call virtual agent widget in to Footer by adding DIV

<div class="btn-pos"><widget id="uis_va_sp_widget"></div>

CSS:

.btn-pos {
position: absolute;
padding-top: 1.5%;
padding-right: 7%;
padding-bottom: 1%;
padding-left: 25%;
}

with these code it is overlapping with other button when we cange resolution.

Also tried with different positions but either it is dissapearing or it is changing its position onClick.

Thanks,

PRiya

[Mark Roethof]

What is the reason for adding widget to the footer? Do you have a specific reason for not using Agent Chat configuration?

Anyway, if choosing to go for an embedded widget to the footer, then do disable the Agent Chat configuration. Else you will have multiple Virtual Agent clients active.

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

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

---

LinkedIn
Community article, blog, video list

[JeremyHoffman]

Hi Mark,

I have read a lot of the posts about modifying this button. However, I seem to be chasing my tail and hoping you get me to stop and point me in the right direction.

We are using Agent Chat, not the Service Portal Widget. From what I have read, is the Service Portal Widget is becoming more Legacy if not already and Agent Chat is preferred. Correct?

By updating the CSS variable field in our Service Portal Theme record, I can successfully change the icon being used, along with the color. Here are the line entries I made to test it out. 

 //==Chat
      $sp-agent-chat-btn-close: url("https://<instancename>.service-now.com/book-icon.png");
      $sp-agent-chat-btn-open: url("https://<instancename>.service-now.com/general.svg");
      $sp-agent-chat-bg: white;

  Here are the resulting icons:

 

What we are really interested in is creating an icon/bubble similar to what you have discussed in this article along with the articles it is tied to.

Virtual Agent feature bubble - ServiceNow Community

However, because it was written back in 2019, I am guessing this was done using a SP VA widget. Am I misreading it or is it possible to configure the Agent Chat button to appear in the same fashion. The open modal page is nice, but we are more interested in the bubble appearance.

Also, we are looking to be able to modify the message displayed in the hover over text for the buttons. "Open chat window" and "Minimize chat window".

Thank you in advance.

Jeremy