---
title: Replace the Service Portal search boxes
slug: '2106'
canonical_url: https://docs.coveo.com/en/2106/
collection: coveo-for-servicenow
source_format: adoc
---
# Replace the Service Portal search boxes
A Coveo standalone search box not only forwards [queries](https://docs.coveo.com/en/231/) to a full Coveo-powered search page, but can also provide [Coveo Machine Learning (Coveo ML)](https://docs.coveo.com/en/188/) [query suggestions](https://docs.coveo.com/en/1015/) as the end user is typing.
To take full advantage of the Coveo for ServiceNow integration, one of the first things you should do is [replace your current Service Portal home page search box](https://docs.coveo.com/en/2106#replace-the-search-box-on-the-service-portal-home-page) with a standalone Coveo search box.
Eventually, you should do the same for all [other search-enabled Service Portal pages](https://docs.coveo.com/en/2106#replace-the-search-box-in-other-service-portal-pages).
You can also [add the Coveo search box to a Service Portal header](https://docs.coveo.com/en/2106#add-the-coveo-search-box-to-a-service-portal-header).
## Replace the search box on the Service Portal home page
This procedure explains how a ServiceNow instance administrator or developer can replace the current search box on their Service Portal home page with a standalone Coveo search box.
The Coveo search box will redirect all [queries](https://docs.coveo.com/en/231/) to the full Coveo search page that you set up when you [replaced the Service Portal search page](https://docs.coveo.com/en/2105/).
. In the Now Platform UI of your ServiceNow instance, navigate to **Service Portal** > **Configuration**.
. Click **Designer**.
. Open the Service Portal home page in which to replace the search box.
. Delete the current search box widget from the page.
. Drag one of the following Coveo search box widgets inside the container where the default search box widget used to be, or wherever you want your standalone Coveo search box to appear on the page:
** **Coveo Atomic Searchbox** (Coveo for ServiceNow 25.1.5+): Use this widget if you used the **Coveo Atomic Search Page** widget when you [replaced your Service Portal search page with a Coveo-powered search page](https://docs.coveo.com/en/2105#replace-your-service-portal-search-page-with-a-coveo-powered-search-page).
** **Coveo Searchbox**: Use this widget if you used the **Coveo Main Search** widget when you [replaced your Service Portal search page with a Coveo-powered search page](https://docs.coveo.com/en/2105#replace-your-service-portal-search-page-with-a-coveo-powered-search-page).
. At the upper-right corner of the Coveo search box widget, click .
. In the widget options, set the Service Portal search page to which users will be redirected to view their search results.
** For the [**Coveo Atomic Searchbox** options](https://docs.coveo.com/en/2853#searchbox), in the **Redirection Page ID** field, enter the ID of the Service Portal page in which you [added the Coveo hosted search page widget](https://docs.coveo.com/en/2105/).
** For the [**Coveo Searchbox** options](https://docs.coveo.com/en/2853#searchbox), in the **Full Search Page ID** field, enter the ID of the Service Portal page in which you [added the Coveo hosted search page widget](https://docs.coveo.com/en/2105/).
. Optionally, specify other [widget options](https://docs.coveo.com/en/2853#searchbox) as required.
**Examples**
* Use the **Scope** and **Component** options to name the widget according to your [naming convention](https://docs.coveo.com/en/3198#establish-a-widget-naming-convention).
* You can use the **CSS classes** option to [define page-specific CSS rules](https://docs.coveo.com/en/2852#customize-the-css-of-a-widget) to modify how the Coveo search box renders on the page, such as to adjust the vertical alignment of the widget.
. Click **Save** to save your widget options.
> **Note**
>
> Your standalone Coveo search box will only start displaying [query suggestions](https://docs.coveo.com/en/1015/) once you've configured a Coveo ML QS [model](https://docs.coveo.com/en/1012/) in your [query pipeline](https://docs.coveo.com/en/180/), and that model has had time to learn from sufficient [data](https://docs.coveo.com/en/259/) (see [Configure machine learning models](https://docs.coveo.com/en/2118/)).
## Replace the search box in other Service Portal pages
You can replace the search box of other search-enabled Service Portal pages to ensure that queries originating from those pages are correctly forwarded to your Coveo-powered search page and to provide your customers with [Coveo ML query suggestions](https://docs.coveo.com/en/3386/).
To do so, follow the procedure to [replace the search box on the Service Portal home page](#replace-the-search-box-on-the-service-portal-home-page) presented in this article, but adapt the steps to your needs.
## Add the Coveo search box to a Service Portal header
This section describes how to add the standalone Coveo search box to a header in your Service Portal.
Since a header isn't a Service Portal page, you can't use the ServiceNow **Service Portal Designer** to add and configure the Coveo Searchbox widget as specified in the above sections.
Instead, you must embed the [Coveo Searchbox widget](https://docs.coveo.com/en/2853#searchbox) in your header record and define the widget options using the record's [HTML template, server script, or client script](https://www.servicenow.com/docs/bundle/zurich-platform-user-interface/page/build/service-portal/concept/c_NestedWidgets.html), depending on your needs.
To add a Coveo search box to your Service Portal header
> **Note**
>
> While these instructions show how to add the Coveo search box using only the HTML template, you can use the instructions as a guide when adding the Coveo search box using the record's server script or client script.
. In the Now Platform UI of your ServiceNow instance, navigate to **Service Portal** > **Headers & Footers**, and then click the desired header.
. In your header record **Body HTML template** field, copy and paste the following code to [embed the Coveo Searchbox widget](https://www.servicenow.com/docs/bundle/zurich-application-development/page/administer/ui-builder/task/event-handler.html) in the header.
* If you used the **Coveo Atomic Search Page** widget (Coveo for ServiceNow 25.1.5+) when you [replaced your Service Portal search page with a Coveo-powered search page](https://docs.coveo.com/en/2105#replace-your-service-portal-search-page-with-a-coveo-powered-search-page), you must embed the **Coveo Atomic Searchbox** widget.
```html
```
* If you used the **Coveo Main Search** widget when you [replaced your Service Portal search page with a Coveo-powered search page](https://docs.coveo.com/en/2105#replace-your-service-portal-search-page-with-a-coveo-powered-search-page), you must embed the **Coveo Searchbox** widget.
```html
```
. Define the desired [Searchbox widget options](https://docs.coveo.com/en/2853#searchbox-widget-options).
**Example**
To define the `redirection_page_id` option in the **Body HTML template** field, enter:
```html
```
Where `[MY_SEARCH_PAGE_ID]` is the ID of the ServiceNow page in which you [added the Coveo search page widget](https://docs.coveo.com/en/2105#replace-your-service-portal-search-page-with-a-coveo-powered-search-page).
For example, if the ID of the page is `sp_search`, enter:
```html
```
> **Note**
>
> If you're using the **Coveo Atomic Searchbox** widget in a header that will always be visible (persistent), you can enable the **Hide integrated search box** option in the [**Coveo Atomic Search Page** widget options](https://docs.coveo.com/en/2853#coveo-atomic-search-page-widget-options) to remove the search box from the Coveo search page widget.
> Since the Coveo search box in the header is always visible, and the search box redirects queries to the Coveo-powered search page, enabling the **Hide integrated search box** option avoids having two search boxes visible (one in the header and another on the Coveo search page).
## Configure your query pipeline
Once you have implemented the widget in your ServiceNow instance, you must [link it to a query pipeline](https://docs.coveo.com/en/3198/) in your Coveo organization.
. On the [**Query Pipelines**](https://platform.cloud.coveo.com/admin/#/orgid/search/pipelines/) ([platform-ca](https://platform-ca.cloud.coveo.com/admin/#/orgid/search/pipelines/) | [platform-eu](https://platform-eu.cloud.coveo.com/admin/#/orgid/search/pipelines/) | [platform-au](https://platform-au.cloud.coveo.com/admin/#/orgid/search/pipelines/)) page of the [Coveo Administration Console](https://docs.coveo.com/en/183/), do one of the following:
** Click an existing pipeline, and then click **Edit components** in the Action bar.
** [Create a new pipeline](https://docs.coveo.com/en/1791#create-a-query-pipeline) for your Coveo for ServiceNow widget to use.
. In the query pipeline panel, [create a condition](https://docs.coveo.com/en/1959#create-a-condition) enforcing a specific search hub (`Search hub is`) for the pipeline.
The filter value to enter depends on your widget configuration:
** If you didn't provide [Scope and Component values](https://docs.coveo.com/en/3198#establish-a-widget-naming-convention) in the widget options, enter `ServiceNow`.
** If you provided a scope and a component, enter them in the following format: `Scope_Component`.
**Example**
For a widget with a `Portal` scope and a `MyWidget` component, your condition value should be `Portal_MyWidget`.
Your complete pipeline condition is therefore `Search Hub is Portal_MyWidget`.
With such a condition, your pipeline will be used for all queries originating from the widget.
> **Note**
>
> If your pipeline already has a condition, ensure to include this previous condition in your new one with an `OR` operator.
>
> For example, your pipeline has the following condition: `Search Hub is Portal_MyWidget`.
> You want to link a new portal widget to this pipeline, so your new condition is `Search Hub is Portal_MyWidget OR Search Hub is Portal_MySecondWidget`.
> With this condition, your pipeline will be used for all queries originating from one of these widgets.
## What's next?
[Add a Coveo case deflection panel to a Service Portal record creation form](https://docs.coveo.com/en/2111/) to empower your customers with Coveo relevancy.