---
title: Integrate a Coveo hosted search page in an Experience Cloud site
slug: o3lb0328
canonical_url: https://docs.coveo.com/en/o3lb0328/
collection: coveo-for-salesforce
source_format: adoc
---
# Integrate a Coveo hosted search page in an Experience Cloud site
> **Available since**
>
> This feature was introduced in the May 2024 release of Coveo for Salesforce version [5.7](https://docs.coveo.com/en/n5bj0150#may-2024-release-v5-7-minor-release).

The **Coveo Community Hosted Search Page** component allows you to integrate a Coveo [hosted search page](https://docs.coveo.com/en/2866/) in an Experience Cloud site.
To create a hosted search page, you must use the [Coveo search page builder](https://docs.coveo.com/en/na2g0545/), which is available in the [Coveo Administration Console](https://docs.coveo.com/en/183/).

A Coveo hosted search page is a feature-rich [search interface](https://docs.coveo.com/en/2741/) that's easy to integrate.
It's also fully configurable using the Coveo search page builder, eliminating the need to make changes in Salesforce every time you want to modify an option.

> **Tip**
>
> The [Coveo search page builder](https://docs.coveo.com/en/na2g0545/) lets you create a simple search interface within a few minutes without writing any code.
> However, to create a more advanced or a highly customized search interface, you should use the [Quantic library](https://docs.coveo.com/en/quantic/latest/) instead.

![Coveo Community Hosted Search Page with RGA | Coveo for Salesforce](https://docs.coveo.com/en/assets/images/coveo-for-salesforce/community-hosted-search-page.png)

## Prerequisites

* Install and configure the [Coveo for Salesforce v5.7 package](https://docs.coveo.com/en/n5bj0150#may-2024-release-v5-7-minor-release) or a later release.

* [Create a hosted search page with the Coveo search page builder](https://docs.coveo.com/en/na2g0545/).

> **Important**
>
> The styling of your hosted search pages (for example, fonts and colors) is determined by the styles defined in your Experience Cloud site.
> As a result, the [styles defined in the Coveo search page builder](https://docs.coveo.com/en/na2g0545#set-colors-and-text-font) won't be applied when your hosted search page is rendered in your Experience Cloud site.

* [Create a Salesforce Experience Cloud site](https://help.salesforce.com/s/articleView?id=sf.networks_creating.htm&type=5).

> **Important**
>
> The [**Customer Service** template](https://help.salesforce.com/s/articleView?id=sf.rss_napili_views.htm&type=5) is the only supported template.

* Ensure that [users have access](https://docs.coveo.com/en/1022/) to the `HSPController` Apex class.

## Add the Community Hosted Search Page component

. Access your Experience Cloud site using the [Salesforce Experience Builder](https://help.salesforce.com/s/articleView?id=sf.community_designer_ui.htm&type=5).

. From the [**Pages** menu](https://help.salesforce.com/s/articleView?id=sf.community_builder_manage_pages_overview.htm&type=5) in the top toolbar, select **Search** to access the search page.

. From the **Components** panel on the left, under **Custom Components**, drag the **Coveo Community Hosted Search Page** component onto the page region where you want the search interface to appear, typically in the **Content** section replacing the Salesforce default search results component.

. [[search-token-generator]] [[custom-context-provider]] In the component details section on the right, click the **Configuration name** picklist to select the name of the hosted search page configuration you want to integrate.
You should quickly see your search page render after selecting the configuration you want.

> **Tip**
>
> If you've correctly [configured the Coveo for Salesforce application](https://docs.coveo.com/en/1153/), all the hosted search page configurations you created using the Coveo search page builder will be available in the picklist.

. (Optional) If you [generated a custom search token](https://docs.coveo.com/en/obkd0147/), click the **Token Generator** picklist to select the name of the Apex class that will override the default [search token](https://docs.coveo.com/en/1346/) generated for this component.

. (Optional) If you [created a custom Apex class to augment queries with additional context](https://docs.coveo.com/en/p1ua0330/), click the **Custom Context Provider** picklist to select the name of your custom Apex class.

. Under **Engine ID**, enter the ID of the engine instance the component must register to.
You can specify any string value.

> **Important**
>
> All components that belong to a given interface (for example, the **Coveo Community Hosted Search Page** and the [**Coveo Hosted Searchbox**](#leverage-the-coveo-standalone-search-box) components) must use the same engine ID value to work properly.

. (Optional) To hide the search box that's integrated by default with the **Coveo Community Hosted Search Page** component, select the **Hide integrated search box** option.

> **Note**
>
> Hiding the integrated search box is recommended if you plan to add a **Coveo Hosted Searchbox** in the header of your Experience Cloud site.

. To [preview your page](https://help.salesforce.com/s/articleView?id=sf.community_designer_preview.htm&type=5), click **Preview** on the toolbar at the upper-right corner of the Experience Builder.

. To [publish your page](https://help.salesforce.com/s/articleView?id=sf.community_designer_publish.htm&type=5), click **Publish** on the toolbar at the upper-right corner of the Experience Builder.
This process make take a few minutes to complete.

The Coveo hosted search page is now available in your Experience Cloud site.

### Leverage the Coveo standalone search box

The Coveo [standalone search box](https://docs.coveo.com/en/quantic/latest/reference/search-components/search-standalone-search-box) offers advanced features such as [Coveo Machine Learning (Coveo ML)](https://docs.coveo.com/en/188/) [query suggestions](https://docs.coveo.com/en/1015/).
To include a standalone search box in the global header of your Experience Cloud site, you must add the **Coveo Hosted Searchbox** component.

> **Important**
>
> The **Coveo Community Hosted Search Page** component isn't compatible with the [**Coveo Community SearchBox** component](https://docs.coveo.com/en/1218#leverage-the-coveo-standalone-search-box).
> To complement your hosted search page with a standalone search box, you must use the **Coveo Hosted Searchbox** component.

To add the Coveo Hosted Searchbox component

. [Access the Salesforce **Experience Builder**](https://help.salesforce.com/articleView?id=community_designer_ui.htm&type=5).

. In the left sidebar, select **Theme** > **Theme Settings**.

. Click the **Search Component** picklist, and then select **Coveo Hosted Searchbox**.

. Close the **Theme Settings** menu.

. Click the **Coveo Hosted Searchbox** component in the header of your page, and then specify the following information in the component details section on the right:

.. Click the **Configuration name** picklist to select the name of the hosted search page configuration you want to integrate.

.. Under **Engine ID**, enter the ID of the engine instance the component will register to.
Enter the same value you've selected for your Hosted Search Page component.

> **Important**
>
> All components that belong to a given interface must use the same engine ID value.

.. Under **Redirection URL**, ensure the value is set to `global-search/%40uri`.

Your hosted search page now includes a Coveo standalone search box.

## Current limitations

* The **List** layout is the only supported layout for search results.

* English is the only language that's supported by default for Coveo hosted search pages.
Consider using the [Salesforce Translation Workbench](https://help.salesforce.com/s/articleView?id=sf.workbench.htm&type=5) for your translation needs.