With 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

...

Given a ServiceNow instance configured with the Konverso application “Virtual Agent for IT Help Desk”, with one configured UI Script, attached to a portal, you may want to use on native Snow widget (a component of your portal) to open the Kbot widget, instead of using the native Kbot floating button.

The objective of this page is to explains how to achieve this and specifically:

• hide the Widget button

• Link the Widget to a ServiceNow button.

• The button is set for the whole portal.

References

• The Kbot UI script (replace the host in this link with your host).

• 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

1. In your ServiceNow environment, open the KonversoWidgetSettingsUtils object.

2. Add the following string:

buttonInvisible: true

...

Creating a new widget

1. Go to the service portal configuration: 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')
	}
};

As the result, you should get the following:

...

Adding the widget to a portal

1. Go to the service portal configuration: 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. Click Preview to see how the page will look with the button.

...