Leveraging Coveo Widgets

Coveo for ServiceNow offers several widgets for you to add to your Service Portal pages. These widgets are meant improve your end-users’ journey by allowing them to search all your sources of content through a single search box, providing them with the most relevant content, and proactively recommending items in which users with a similar profile and journey were interested.

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 page, and the following articles contain exhaustive implementation instructions:

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.
  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 place in the page.
  4. Optionally, customize the widget or its CSS (see Customize a Widget and Customize the CSS of a Widget).
  5. Click Preview at the top of the Form Designer to ensure that the page and the widget look as expected.

Customize a Widget

All Coveo for ServiceNow widgets offer a set of options allowing you to customize their appearance and behavior.

  1. Access the Page Designer for the page in which the target widget is embedded.
  2. Click the widget Edit icon (Edit Widget icon).
  3. In the dialog box that appear, make the desired changes. For CSS customization, see Customize the CSS of a Widget.
  4. Click Save. Your changes apply 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 applied to a widget so that it better fits your page design.

  1. Access the widget customization panel (see Customize a Widget).
  2. In the widget customization panel:
    1. In the CSS classes box, enter a custom class to add to the widget container.

    #CustomSearchbox for the Searchbox widget.

    1. Click Save.
  3. In the top right corner of the Page Designer, click Pages.
    1. In the Page Specific CSS box, add the desired CSS, using class you entered in the widget customization panel.

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

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

Delete a Widget

  1. Open the desired page in the Page Designer.
  2. In the top-right corner of the target widget, click the Delete icon (Delete Widget icon).
  3. In the confirmation dialog, click Yes.