--- title: Leverage Coveo for ServiceNow widgets slug: '2852' canonical_url: https://docs.coveo.com/en/2852/ collection: coveo-for-servicenow source_format: adoc --- # Leverage Coveo for ServiceNow widgets 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](https://docs.coveo.com/en/246/) of content through a single search box. This provides users with the most relevant content, and proactively recommends [items](https://docs.coveo.com/en/210/) 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](https://docs.coveo.com/en/2853/) article, and the following articles contain implementation instructions: * [Replace the Service Portal search page](https://docs.coveo.com/en/2105/) ([Search Page](https://docs.coveo.com/en/2853#search-page) widget) * [Replace the Service Portal search boxes](https://docs.coveo.com/en/2106/) ([Searchbox](https://docs.coveo.com/en/2853#searchbox) widget) * [Configure the Case Deflection panel](https://docs.coveo.com/en/2111/) ([Case Deflection](https://docs.coveo.com/en/2853#case-deflection) and [Field Change](https://docs.coveo.com/en/2853#field-change) widgets) * [Add the Page View Tracker to your portal pages](https://docs.coveo.com/en/3136/) ([Page View Tracker](https://docs.coveo.com/en/2853#page-view-tracker) widget) * [Configure a Recommendations panel](https://docs.coveo.com/en/2863/) ([Recommendations](https://docs.coveo.com/en/2853#recommendations) widget) The [Insight Panel](https://docs.coveo.com/en/2113/) 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](https://docs.coveo.com/en/421/) in the [Coveo JavaScript Search Framework](https://docs.coveo.com/en/187/). > 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](https://docs.coveo.com/en/3227#default-localization-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`](https://docs.coveo.com/en/3227#getjsuiculturemap-function) 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)](https://docs.coveo.com/en/2991#june-2024-release-24-1-3). ## Add a Coveo widget to a ServiceNow page . In the Now Platform UI of your ServiceNow instance, navigate to **Service Portal** > **Configuration**. . Click **Designer**. . Open the Service Portal page in which to add the widget. . If required, create a column and a container for the widget. . Drag the desired widget from the menu on the left to the desired location on the page. . Optionally, you can [customize the widget](#customize-a-widget) or its [CSS](#customize-the-css-of-a-widget). . 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](#customize-the-css-of-a-widget). . In the Now Platform UI of your ServiceNow instance, navigate to **Service Portal** > **Configuration**. . Click **Designer**. . Open the Service Portal page that contains the widget that you want to edit. . At the upper-right corner of the target widget, click ![Edit widget icon | Coveo for ServiceNow](coveo-for-servicenow/edit-widget-icon.png). . In the dialog box that appears, make the desired changes. . Click **Save** to apply your changes immediately. . 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. . In the Now Platform UI of your ServiceNow instance, navigate to **Service Portal** > **Configuration**. . Click **Designer**. . Open the Service Portal page that contains the widget that you want to customize. . At the upper-right corner of the target widget, click ![Edit widget icon| Coveo for ServiceNow](coveo-for-servicenow/edit-widget-icon.png). . In the dialog box that appears: .. In the **CSS classes** box, enter a custom class to add to the widget container. **Example** `CustomSearchbox` for the Searchbox widget. .. Click **Save**. . At the upper-right corner of the Page Designer, click **Page**. .. 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. .. Click **Save**. . Click **Preview** at the top of the Form Designer to ensure that the widget looks as expected. ## Delete a widget . In the Now Platform UI of your ServiceNow instance, navigate to **Service Portal** > **Configuration**. . Click **Designer**. . Open the Service Portal page that contains the widget that you want to delete. . At the upper-right corner of the target widget, click [delete]. . In the confirmation dialog, click **Yes**.