This article will outline how to improve the Virtual Agent Portal Widget to increase its visibility for portal users.

The result:

Currently the OOTB Virtual Agent Widget looks like this when added to the Service Portal:

A frequent requirement/ask from clients is to increase the signposting of the OOTB Virtual agent widget. This is because in its OOTB state it can be difficult to notice and if noticed, the purpose of the widget can be unclear.

Step 1.

Service portal -> Themes in the application navigator.

Locate and open the theme you are using for your Service Portal. Once found, create a new CSS Include.

Step 2.

Fill in the new CSS include record fields and create a new (but empty for now) CSS style sheet.

Step 3.

Open the newly created Style sheet and paste the following into the CSS field:

.sp-ac-root button.sp-ac-btn.open:after {
content: "\f112";
}

.sp-ac-root button.sp-ac-btn.closed::before {
content: "Start Support Chat";
color: white;
position: relative;
left: -20px;
}

.sp-ac-root button.sp-ac-btn.closed {
background-position: 89% 16px;
width: 200px;
border-radius: 25%/75%;
}

DIV.new-messages-indicator {
background-color: #e9edf1; 
color: #343d47;
}

Edit the values in the CSS to fit your requirements.

Your style sheet record will now look like this:

Step 4.

Click update to apply the changes to the style sheet record.

Step 5.

That's all! Refresh your Service Portal Home page and you'll see the newly updated Virtual Agent widget.