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. You can also customize the widget to match the language of the user in the portal.

Customizing the widget button

Prerequisites

Before your you 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.

...

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.

...

As a result, you should get the following:

...

6. Save the widget.

Case of multiple widgets, same target host:

...

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

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.

...

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

...

Creating a widget supporting multiple languages

You can create a widget that automatically retrieves the language of the current ServiceNow user profile in order to :

• ensure that the tooltip displayed above the widget button when closed is in the correct language.

• make sure that when you open the widget, the bot is initialized in that same language (so the welcome message, buttons, etc. will be in that language).

You can follow the procedure below to create such a 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 clear name so you can find the widget on the list easily.

5. Set the following parameters for your widget:

Client script

function KbotInit(settings) {
        // Kbot object initialization
        console.log("Settings:", settings);
        Kbot.init({
            baseUrl: settings.baseUrl
        });

        // The Chat widget initialisation
        Kbot.get().Widgets.initRemoteConfig(settings.widget.id, { initData: { lang:settings.selectedLang} });
    }

Server script

var settingsUtils = new x_konve_kbot_test.KonversoWidgetSettingsUtils();
data.settings = settingsUtils.getSettings();
data.settings.selectedLang = gs.getSession().getLanguage();

6. Save the widget.