Leverage 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 exhaustive 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’s 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.

Add a Coveo widget to a ServiceNow page

  1. Access the Page Designer for the ServiceNow page in which you want to add a widget:

    1. Navigate to Service Portal > Pages.

    2. Find and open the desired page record.

    3. In the Related Links section, click Open in Designer.

  2. If applicable, create a column and a container for the widget.

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

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

  5. 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. Access the Page Designer for the ServiceNow page where the widget is embedded:

    1. Navigate to Service Portal > Pages.

    2. Find and open the desired page record.

    3. In the Related Links section, click Open in Designer.

  2. At the upper-right corner of the target widget, click Edit-Widget.

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

  4. Click Save to apply your changes immediately.

  5. 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. Access the Page Designer for the ServiceNow page where the widget is embedded:

    1. Navigate to Service Portal > Pages.

    2. Find and open the desired page record.

    3. In the Related Links section, click Open in Designer.

  2. At the upper-right corner of the target widget, click Edit-Widget.

  3. 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.

  4. 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.

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

Delete a widget

  1. Access the Page Designer for the ServiceNow page where the widget is embedded:

    1. Navigate to Service Portal > Pages.

    2. Find and open the desired page record.

    3. In the Related Links section, click Open in Designer.

  2. At the upper-right corner of the target widget, click Delete.

  3. In the confirmation dialog, click Yes.