When adding a widget to a portal page, you can use a Kbot floating button, or create a custom one. The latter allows you to fine-tune its position on the page and set the way it looks.

Prerequisites

Before your start working on the custom button, make sure the following conditions are met:

Virtual Agent for IT Help Desk is installed on your ServiceNow instance.
The button is set for the whole portal.

References

To view the Kbot UI script, search for x_konve_kbot_test.KonversoWebChatWidget in ServiceNow.
To learn more about building custom widgets, view the official ServiceNow documentation.

Key points

To create a custom widget button:

Hide the default Kbot widget button.
Create a custom ServiceNow widget with a button.

Hiding the default button

To hide the default button, select the Hide button checkbox in the widget creation tool.

To view the complete set of widget options, see this page.

Creating a new widget

1. Open the Service Portal Configuration. To do so, either find Service Portal Configuration in the navigation tree, or go directly to https://<your-host>.service-now.com/sp_config.

2. Select Widget Editor.

3. Click Create a new widget.

4. Enter your widget name and ID. Enter a comprehendible name so you can find the widget in the list easily.

5. Set the following parameters for your widget:

HTML template

<div ng-click="c.showKbotWidget()" class="button_class">
<!-- your widget template -->
  My test widget to show dialog
</div>

CSS-SCSS

.button_class {
	border: 1px solid red;
  background:green;
  color: white;
}

Client script

api.controller=function() {
  /* widget controller */
  var c = this;
	c.showKbotWidget = function() {
		Kbot.get().Widgets.execute('service-now-chat', 'showWidget')
	}
};

You can find the widget ID (which is 'service-now-chat' here) in the UI script (replace the host in this link with your host), search for Kbot.get().Widgets.init (string number 170).

As a result, you should get the following:

Save the widget.

Case of multiple widgets, same target host:

You need to ensure your two init functions:

All you need to to have two distinct client scripts, each pointing to a different widget id.

Adding the widget to a portal

1. Open the Service Portal Configuration. To do so, either find Service Portal Configuration in the navigation tree, or go directly to https://<your-host>.service-now.com/sp_config.

2. Select Designer.

3. Search for Index — to add the widget to the main page of your portal.

4. Select the Index page.

5. Find your widget by entering its name in the search field in the upper left of the window.

6. Drag and drop it to the area where you want to place the button.

7. Save the changes.

Now you can click Preview to see how the page will look with the button.

Kbot for Snow Customer Center

Custom widget button

Analytics