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!
| C |
If this content helped you, I would appreciate it if you hit bookmark or mark it as helpful.
Interested in more Articles, Blogs, Videos, Podcasts, Share projects I shared/participated in? |
Kind regards,
Mark Roethof
ServiceNow Technical Consultant @ Quint Technology
1x ServiceNow Developer MVP
1x ServiceNow Community MVP
---
Actually I got 99% of it working! I dug around some more and realized I could just add a new stylesheet to the theme to override it. That gave me control over the size, shape, etc. The only thing I am stuck on is that it doesn't seem to override any of the background image settings; tried swapping images, resizing, repositioning etc.
Here is the closed button:
and here is the open button:
Thanks, Mark. I will check it out.
One other example I found is the deprecating Connect Support Chat. If the Chat Queue column in the Portals page is populated with Virtual Agent Support, Live Chat appears on the SP Header Menu.
Once you click Live Chat, a pop-up window appears:
I want this same functionality but for it to open Agent Chat.
Thanks,
Brandon
Hello,
I wanted to increase the height and width of the Virtual agent chatbox in the Service portal. When in Tokyo, i was able to achieve the functionality by creating a new stylesheet in the Theme section in sp_portal page.
PFA screenshot of the same.
However when i upgraded the version to Utah, the functionality is not working.
Kindly let me know if I am missing something or is it a known issue in Utah feature?
Regards,
Dipanjan Saha
%20.PNG){kind=link}
%20.png){kind=link}
%20.png){kind=link}