---
title: Integrate a Coveo Community Search component
slug: '1218'
canonical_url: https://docs.coveo.com/en/1218/
collection: coveo-for-salesforce
source_format: adoc
---
# Integrate a Coveo Community Search component
The **Coveo Community Search** component lets you integrate a Coveo Full Search page in your Experience Cloud site.
The Coveo Full Search page provides a complete Coveo-powered [search interface](https://docs.coveo.com/en/2741/), which includes advanced features such as [facets](https://docs.coveo.com/en/198/), [tabs](https://docs.coveo.com/en/1406/), sorting, and pagination.

![Example of a Coveo Community Search interface](https://docs.coveo.com/en/assets/images/coveo-for-salesforce/community-search.png)

> **Tip**
>
> * You should always duplicate Coveo components instead of using the default ones.
> This keeps the original component configurations intact for reference and re-use (see [Integrate Coveo Lightning Aura components in a custom component for your Experience Cloud site](https://docs.coveo.com/en/1193/)).
> 
> * Under the hood, the Coveo Full Search page is a [Lightning Aura component](https://developer.salesforce.com/docs/atlas.en-us.lightning.meta/lightning/intro_framework.htm) that uses the [JavaScript Search Framework](https://docs.coveo.com/en/187/).
> The [Coveo hosted search page](https://docs.coveo.com/en/o4b80259/), released as part of [Coveo for Salesforce v5.8](https://docs.coveo.com/en/n5bj0150#june-2024-release-v5-8-minor-release), is a [Lightning Web Component (LWC)](https://developer.salesforce.com/docs/platform/lwc/guide) that uses the more modern [Quantic](https://docs.coveo.com/en/n9790069/) library.
> Consider using the Coveo hosted search page in your Lightning Console apps to benefit from the latest features and improvements.

## Prerequisites

* [Enable Digital Experiences](https://help.salesforce.com/htviewhelpdoc?err=1&id=networks_enable.htm&siteLang=en_US) for your organization.

* [Assign the **View Global Header** permission](https://help.salesforce.com/apex/HTViewHelpDoc?id=networks_enable_global_header.htm&language=en_US) to internal users who need access to the Experience Cloud site to allow them to see the global menu.

* [Create an Experience Cloud site](https://help.salesforce.com/s/articleView?id=sf.networks_creating.htm&type=5) and select the **Customer Service** template.

> **Important**
>
> The only supported template is **Customer Service**. If you select another template, you may experience unexpected behavior with certain components.

## Add the Coveo Community Search component

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

. In the left sidebar, select **Components**.

![Experience Builder Components menu in Salesforce](https://docs.coveo.com/en/assets/images/coveo-for-salesforce/components-eb.png)

. In the **Components** dialog, under **Custom Components**, drag the **Coveo Community Search** component and drop it onto the page region where you want the search interface to appear, typically in the **Content** section.

. When you add a Community Search component for the first time, the Interface Creator (**This search page isn't configured yet.**) dialog is displayed:

.. Click **Preview** in the upper-right corner of the **Experience Builder** to switch to preview mode.

> **Important**
>
> In a newly created Experience Cloud site, you have two options to work with the search page.
> You can either publish the site and access the search page using the published site URL to create or edit it.
> Otherwise, if you prefer to continue working in Preview mode, you must first add the following [Content Security Policy (CSP)](https://developer.salesforce.com/docs/atlas.en-us.lightning.meta/lightning/security_csp.htm) trusted sites:
> 
> * `https://<YOUR_ORG_URL>.visualforce.com`
> 
> * `https://<YOUR_ORG_URL>.my.salesforce.com`
> 
> After adding these sites, refresh the page to use the Interface Creator.
> You should also set the CSP security to **Allow Inline Scripts and Script Access to Any Third-Party Host**.

.. In the Coveo Search component region, click **Set up a Search Page**.

.. Follow the onscreen steps, and then click **Create page**.

> **Important**
>
> If an error message appears after clicking **Create page**, [add the missing Content Security Policy trusted sites to your Salesforce organization](#add-missing-content-security-policy-trusted-sites).

You should now have a functional search page connected to the Salesforce search box, returning results from your [Coveo organization](https://docs.coveo.com/en/185/) [index](https://docs.coveo.com/en/204/).
You can also test your search page at this time.

. When you're satisfied with your search page, in the upper-right corner of the **Experience Builder**, click **Publish** to make your changes available to your site users (see [Publish Your Experience Builder Site Customizations](https://help.salesforce.com/articleView?id=sf.community_designer_publish.htm&type=5)).

> **Important**
>
> Be aware that publishing Interface Editor changes immediately affects your Experience Cloud site in production.

. Make sure that the appropriate users are [members of your Experience Cloud site](https://help.salesforce.com/HTViewHelpDoc?id=networks_customize_members.htm&language=en_US) so that they can view your search page.

## Leverage the Coveo standalone search box

The Coveo [standalone search box](https://docs.coveo.com/en/294/) offers advanced features such as [Coveo Machine Learning (Coveo ML)](https://docs.coveo.com/en/188/)  [query suggestions](https://docs.coveo.com/en/1015/), typo correction, and facet value suggestions.

![Example of a Coveo standalone search box](https://docs.coveo.com/en/assets/images/coveo-for-salesforce/searchbox.png)

To include a standalone search box in the header of your Experience Cloud site, you must add the **Coveo Community Searchbox** component.

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

To add the Coveo Community 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**.

![Community Settings](https://docs.coveo.com/en/assets/images/coveo-for-salesforce/standalone-searchbox.png)

. Under **Search Component**, in the dropdown menu, select **Coveo Community Searchbox**.

> **Important**
>
> If you don't see the **Coveo Community Searchbox** option, you may not be using the right template. Ensure that your **Theme** is set to **Customer Service**.

> **Note**
>
> If you're using a previous version of the Coveo for Salesforce package, the component name will be **Searchbox** (before v2.51) and **Coveo Searchbox** (before v3.25).

. Close the **Theme Settings** menu.

Your search page now includes a Coveo standalone search box.

### Additional considerations

* Modifying the default value of the [`enableHistory`](https://coveo.github.io/search-ui/components/searchinterface.html#options.enablehistory) component option isn't recommended.
This option is automatically set to the correct value (`true` or `false`) based on the component you're integrating.
If you modify this value, the standalone search box may not work as expected.

* Ensure that the value for the **Search Url** option is set to `global-search/%40uri` (see [Customize the standalone search box](https://docs.coveo.com/en/1500#search-url)).

* When you have the default **Headline** component from Salesforce integrated into your Experience Cloud site, you won't notice that it always shows the query is `@uri`.
You're encouraged to remove this component, as it's incompatible with the standalone search box.

![Example of the Salesforce Headline component output](https://docs.coveo.com/en/assets/images/coveo-for-salesforce/resultforuri.png)

* With your current configuration, both the standalone search box and the search component are injecting their query to the search component.
If you prefer to only inject the relevant query, you can disable the **Auto inject basic query** setting of your search component.

* The Coveo standalone search box doesn't support [site branding](https://help.salesforce.com/articleView?id=networks_customize_branding.htm).
However, [using custom CSS to override the template elements](https://developer.salesforce.com/docs/atlas.en-us.communities_dev.meta/communities_dev/communities_dev_customize_css.htm) should still work as expected.

You can now use the options panel to [customize your Coveo standalone search box](https://docs.coveo.com/en/1500/).

## Add missing Content Security Policy trusted sites

Due to changes in the Salesforce framing policies, you may need to manually add URIs to your [Content Security Policy (CSP) Trusted Sites](https://help.salesforce.com/articleView?err=1&id=csp_trusted_sites.htm&type=5) to access the Interface Creator and Interface Editor.

**To know which URIs to add to your CSP trusted sites**

. In the **Can't Access Resources** error message that appears after clicking **Create page** in the Interface Creator, copy the URI address displayed next to **Blocked URI**, and then add the URI to your [CSP Trusted Sites](https://help.salesforce.com/articleView?err=1&id=csp_trusted_sites.htm&type=5).

![Can't Access Resources CSP error message displaying blocked URI in Salesforce](https://docs.coveo.com/en/assets/images/coveo-for-salesforce/cps-error-message.png)

. Back in the **Preview** mode of the Experience Builder, [open your browser developer tools](https://docs.coveo.com/en/2994#access-your-browser-developer-tools), and then access the **Console** tab.

. In the Coveo Search component region, click **Set up a Search Page**, and then follow the onscreen steps.

. Click **Create page** and then, on the **Console** tab of your browser developer tools, you should see an error message.

. In the error message, copy the last URI that appears (the one displayed in red), and then add the URI to your CSP Trusted Sites.

![Browser developer tools Console tab shows red URI in CSP error](https://docs.coveo.com/en/assets/images/coveo-for-salesforce/cps-error-message-console.png)

> **Note**
>
> After adding these sites, refresh the page to use the Interface Creator.

## What's next?

* Learn how to access the [Interface Editor](https://docs.coveo.com/en/3081/).

* To securely add mandatory filters or inject identities, consider [defining a server-side configuration for your Coveo Lightning component](https://docs.coveo.com/en/1162/).