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

The Service Portal widget for Virtual Agent is a legacy product. Agent Chat configuration is the method to apply since the New York family release.

Hi there,

A short article on Virtual Agent this time. It's a follow-up on a question that was asked at the last Virtual Agent Academy. Basically, the question was "how can we change the width of the Service Portal Virtual Agent widget"?

Is it possible at all? Yes. And actually only one or two minutes work.

This article is specifically about changing the width of the Service Portal Virtual Agent widget. Though you could simply apply this article also on CSS properties like height, icon, etcetera.

Service Portal Widget: CSS

Key is actually line 4 of the CSS field in the Service Portal widget:

$window-width: 375px;

Or when searching a bit further, where $window-width is applied. It's applied within:

.sn-connect-floating-wrapper and .chat-frame

Option 1: Service Portal Widget: Clone

To be able to edit the property, you would actually need to Clone the Service Portal Widget. Or at least, that's the most favorite Community answer when it concerns editing out-of-the-box widgets.

Do be aware, when cloning a widget, you will miss out on future updates on the widget. This doesn't have to be a bad thing, though be aware of this. For example after each upgrade, check if the out-of-the-box widget got updated and if so, if you need to update your cloned widget.

To clone the Widget, it's not more than only hitting the UI Action "Clone Widget" (if you are on the Platform UI), or the Clone function under the hamburger menu (if you are in the Widget Editor).

Option 2: Widget Instance: CSS

Personally, I would investigate first if you could apply Instance options or overwriting the CSS through the Widget Instance. Going first for cloning the Service Portal Widget, although it's one of the most popular answers on the Community, is actually completely unnecessary in a lot of cases.

Within the Platform UI, navigate to "Service Portal > Widget Instance" and look for the "Virtual Agent Service Portal Widget" instance (or on your Service Portal, CTRL+right-mouse click > Instance Options). Note that on the "Presentation" section, there's a field CSS. With this field, in a lot of cases you could override the CSS you are after.

In our case, when looking at the Service Portal Virtual Agent widget, we are after two settings:

.sn-connect-floating-wrapper and .chat-frame

When translating this into CSS, the only thing you would need to add to the CSS field is:

.sn-connect-floating-wrapper, .chat-frame {
    width: 500px;
}

Note: I've used a with of 500px, though obviously change this into whatever you want.

Result

With option 2 applied, the result achieved looks like:

Other CSS properties

In the intro of this article, I did mention you could apply this article also on other CSS properties. So lets for example take the Virtual Agent icon, this concerns:

.sn-va-widget-icon and specifically background-image: url('images/sn-va-sp-widget/sn-va-sp-widget-icon.svg')

If willing to overwrite this, for example with the Widget Instance CSS, you could go for:

.sn-va-widget-icon {
    background-image: url('your-image.png');
}

Note: Obviously you would need to consider the size of your custom image. If not, you should also add overwrite properties concerning the Icon size and position. The Icon height and width are set on 32px and 36px.

---

And that's it actually. Hope you like it. If any questions or remarks, let me know!

Kind regards,

Mar k Roethof

ServiceNow Technical Consultant @ Quint Technology

1x ServiceNow Developer MVP

1x ServiceNow Community MVP

---

LinkedIn