---
title: Integrate a Coveo hosted search page in a Lightning Console app
slug: o4b80259
canonical_url: https://docs.coveo.com/en/o4b80259/
collection: coveo-for-salesforce
source_format: adoc
---
# Integrate a Coveo hosted search page in a Lightning Console app
> **Available since**
>
> This feature was introduced in the June 2024 release of Coveo for Salesforce version [5.8](https://docs.coveo.com/en/n5bj0150#june-2024-release-v5-8-minor-release).

The **Coveo Console Hosted Search Page** component allows you to integrate a Coveo [hosted search page](https://docs.coveo.com/en/2866/) in a Lightning Console app.
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.

![Console Hosted Search Page | Coveo for Salesforce](https://docs.coveo.com/en/assets/images/coveo-for-salesforce/console-hosted-search-page-rga-updates.png)

## Prerequisites

* Install and configure the [Coveo for Salesforce (v5.8) package](https://docs.coveo.com/en/n5bj0150#june-2024-release-v5-8-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 Lightning Console app.
> 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 Lightning Console app.

* Ensure that [you can access](https://help.salesforce.com/s/articleView?id=sf.console_lex_access.htm&type=5) a Lightning Console app such as the [Lightning Service Console](https://help.salesforce.com/s/articleView?id=sf.console_lex_service_intro.htm&type=5).

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

## Add the Console Hosted Search Page component

. [Create an App Page with the Lightning App Builder](https://help.salesforce.com/s/articleView?id=sf.lightning_app_builder_create_app_page.htm&type=5).

You also have the option to display the Coveo hosted search page on the home page of your Lightning console app.

> **Tip**
>
> Use the **One Region** page layout to display the Coveo hosted search page.

. From the **Components** panel on the left, under **Custom Components**, drag the **Coveo Console Hosted Search Page** component on your app page.

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

> **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/obt75351/), 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/p1td9000/), 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. Any string value can be specified.

. In the upper-right corner of the page, click **Save**.

. Click **Activate** to [activate your app page](https://help.salesforce.com/s/articleView?id=sf.lightning_page_getting_into_salesforce1.htm&type=5).

> **Notes**
>
> * Updating the properties on the **PAGE SETTINGS** tab is optional.
> 
> * You must select the **LIGHTNING EXPERIENCE** tab to add the app page you created to your Lightning Console app.
> 
> * **Mobile Navigation** isn't supported.

. Access your Lightning Console app (for example, Service Console), click icon:chevron-down[alt=chevron-down,width=16] to access the navigation menu, and then select **Edit**.

.. In the **Edit Service Console App Navigation Items** modal, click **Add More Items**.

.. Select the page you created, and then click **Add 1 Nav Item**.

.. Position the page in the order you want it to appear in the navigation menu, and then click **Save**.

You can now access the Coveo hosted search page from the navigation menu in your Lightning Console app.

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