(Improved) embedded Virtual Agent Service Portal widget

Hi there,

Virtual Agent is labeled as a Service Portal widget and the most common usage will also be on the Service Portal. Unfortunately, out-of-the-box not that many configuration options for the Virtual Agent appearance are provided. Luckily, there are some resources on the Internet to help you where it comes to custom appearance.

I'll be describing an (Improved) Embedded Virtual Agent widget here. Improved, because it's not entirely new.

Some resources for custom Virtual Agent appearances

- The Service Docs has a great article on how to "Embed the Virtual Agent web client in an external web page"
- One of my previous Community articles was about "Changing the bot appearance"
- ServiceNow Elite actually describes an "Embedded Virtual Agent widget" already. See it as the lite weight version of this article.

(Improved) Embedded Virtual Agent widget

Let's just start with the end result. If still interested, just read on to read the details on the how-to.

Embedded widget within div container

Embedded widget without div container

How to

1) Let's start out with "Create a new widget" from the Widget Editor (https://<your_instace>.service-now.com/sp_config?id=widget_editor).
2) After the widget has been created, select the created widget. From within the Widget Editor, we would only need the "HTML Template" and "CSS - SCSS", you could check these two options and uncheck all others.



3) HTML Template code:

<div ng-if="options.no_padding != 'true'" class="panel panel-{{options.color}} b">
  <div class="panel-heading" ng-if="options.hide_header != 'true'">
    <h2 class="h4 panel-title">
      <span ng-if="c.options.glyph">
        <fa name="{{::c.options.glyph}}" />
      </span>${{{::c.options.title}}}
    </h2>
  </div>
  <div class="panel-body">
    <iframe class="virtualAgent" style="border-color:{{options.border_color}}" src="{{::c.options.url}}"></iframe>
  </div>
</div>

<iframe ng-if="options.no_padding == 'true'" class="virtualAgent" style="border-color:{{options.border_color}}" src="{{::c.options.url}}"></iframe>

4) CSS - SCSS code:

.panel-heading i {
  padding: 10px;
}

.panel-body {
  padding-bottom:10px;
}

.virtualAgent {
  height: 600px;
  width: 100%;
  border: 1px solid;
}

5) Within the HTML Template code, we provided a lot of options. To set these options up, click on the "More Options" on the top right (Hamburger), and select "Edit option schema".
Add the following options:

1. Label: Title
   Name: title
   Type: string
   Default Value: Virtual Agent
   Form section: Behavior
2. Label: URL
   Name: url
   Type: string
   Default Value: $sn-va-web-client-app.do?sysparm_skip_load_history=true
   Form section: Behavior
3. Label: Hide header
   Name: hide_header
   Type: boolean
   Form section: Presentation
4. Label: Border color
   Name: border_color
   Type: string
   Default Value: #DEE5E7
   Form section: Presentation
5. Label: No padding
   Name: no_padding
   Type: boolean
   Form section: Presentation

5) From within your Service Portal Designer, you could now just drag and drop your created widget on for example your Service Portal index page.

Instance Options

Once added to the Service Portal Designer, the actual instance of your widget would already look like the first image in this article. If you would like to change the title of the container, change the Glyph, etc., just do so from the Instance Options! For example, you could change your widget instance into:

The Embedded Virtual Agent widget shown in the second image in this article is actually also just configured through using the same Instance Options. How cool is that, no additional coding or something needed to achieve a different look.

Share

An Update Set with this Service Portal widget can be downloaded from Share:
- (Improved) embedded Virtual Agent Service Portal widget

---

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

Kind regards,
Mark

---

LinkedIn