---
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.md#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.md) 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.md), which is available in the [Coveo Administration Console](https://docs.coveo.com/en/183.md).

A Coveo hosted search page is a feature-rich [search interface](https://docs.coveo.com/en/2741.md) 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.md) 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.md#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.md).

> **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.md#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.md) to the `HSPController` Apex class.

## Add the Console Hosted Search Page component

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

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

1. [[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.md), all the hosted search page configurations you created using the Coveo search page builder will be available in the picklist.

1. (Optional) If you [generated a custom search token](https://docs.coveo.com/en/obt75351.md), 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.md) generated for this component.

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

1. Under **Engine ID**, enter the ID of the engine instance the component must register to. Any string value can be specified.

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

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

1. 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**.

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

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

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