Leverage Coveo for ServiceNow widgets

This is for:

Developer System Administrator

Coveo for ServiceNow offers several widgets that you can add to your Service Portal pages. The widgets are meant to improve your users' journey by letting them search all your sources of content through a single search box. This provides users with the most relevant content, and proactively recommends items which were of interest to users with a similar profile and journey.

This article explains how to add, customize, and delete a Coveo for ServiceNow widget in your ServiceNow instance. All Coveo for ServiceNow widgets and their options are detailed in the Widget reference article, and the following articles contain implementation instructions:

The Insight Panel is also an essential part of Coveo for ServiceNow, although the procedure to add or edit it is different from the one described in this article.

Note

Coveo for ServiceNow search interfaces leverage the default localized strings in the Coveo JavaScript Search Framework. By default, a Coveo-powered search interface displays the localized strings that correspond to the current user’s language in ServiceNow based on a preconfigured mapping between ServiceNow language IDs and Coveo JavaScript Search Framework language culture file keys.

If you need to add a custom mapping that is not supported by default, such as to support a new language ID in ServiceNow or a new language culture file in Coveo JavaScript Search Framework, you can do so using the getJsUiCultureMap extension point function.
Important

As of Coveo for ServiceNow 24.1.3, the authentication property for Coveo widgets changed from searchToken to accessToken. However, if you have a widget that was cloned from a default Coveo widget prior to 24.1.3, the cloned widget will not have the accessToken property. In order for your cloned widget to function properly when upgrading to Coveo for ServiceNow 24.1.3 or later, you must replace the searchToken property with accessToken in the cloned widget record. For more information, see June 2024 release (24.1.3).

Add a Coveo widget to a ServiceNow page

  1. In the Now Platform UI of your ServiceNow instance, navigate to Service Portal > Configuration.

  2. Click Designer.

  3. Open the Service Portal page in which to add the widget.

  4. If required, create a column and a container for the widget.

  5. Drag the desired widget from the menu on the left to the desired location on the page.

  6. Optionally, you can customize the widget or its CSS.

  7. Click Preview at the top of the Form Designer to ensure that the page and the widget look as expected.

Customize a widget

Most Coveo for ServiceNow widgets offer a set of options that allow you to customize the widget appearance and behavior. For CSS customization, see Customize the CSS of a Widget.

  1. In the Now Platform UI of your ServiceNow instance, navigate to Service Portal > Configuration.

  2. Click Designer.

  3. Open the Service Portal page that contains the widget that you want to edit.

  4. At the upper-right corner of the target widget, click Edit widget icon | Coveo for ServiceNow.

  5. In the dialog box that appears, make the desired changes.

  6. Click Save to apply your changes immediately.

  7. Click Preview at the top of the Form Designer to ensure that the widget looks as expected.

Customize the CSS of a widget

You may want to customize the CSS that’s applied to a widget so that it better suits your page design.

  1. In the Now Platform UI of your ServiceNow instance, navigate to Service Portal > Configuration.

  2. Click Designer.

  3. Open the Service Portal page that contains the widget that you want to customize.

  4. At the upper-right corner of the target widget, click Edit widget icon| Coveo for ServiceNow.

  5. In the dialog box that appears:

    1. In the CSS classes box, enter a custom class to add to the widget container.

      Example

      CustomSearchbox for the Searchbox widget.

    2. Click Save.

  6. At the upper-right corner of the Page Designer, click Page.

    1. In the Page Specific CSS box, add the desired CSS, using the custom class you entered previously.

      Example

      You add .CustomSearchbox { padding: 10% 0 } to adjust the vertical alignment of the widget.

    2. Click Save.

  7. Click Preview at the top of the Form Designer to ensure that the widget looks as expected.

Delete a widget

  1. In the Now Platform UI of your ServiceNow instance, navigate to Service Portal > Configuration.

  2. Click Designer.

  3. Open the Service Portal page that contains the widget that you want to delete.

  4. At the upper-right corner of the target widget, click Delete widget icon | Coveo for ServiceNow.

  5. In the confirmation dialog, click Yes.