---
title: Integrate a Coveo Recommendation component
slug: '2980'
canonical_url: https://docs.coveo.com/en/2980/
collection: coveo-for-salesforce
source_format: adoc
---
# Integrate a Coveo Recommendation component

[.version.c4sf.c4sf-edition.c4sf-pro-enterprise]
[Pro and Enterprise editions](https://docs.coveo.com/en/l2590456#salesforce)


The **Coveo Recommendation** component is a [Lightning Web Component](https://developer.salesforce.com/docs/platform/lwc/guide) (LWC) that displays a list of recommended results based on recorded events and the user's navigation history.

![Recommendation component displaying recommended results | Coveo for Salesforce](https://docs.coveo.com/en/assets/images/coveo-for-salesforce/recommendation-component.png)

> **Note**
>
> The custom token isn't yet supported by the **Coveo Recommendation** component.

To add a Coveo Recommendation component

. [Access your Salesforce organization](https://login.salesforce.com/).

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

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

. Access the page where you want to add the component.

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

.. Under **Custom Components**, drag the **Coveo Recommendation** component to the desired location.

.. In the upper-right corner of the page, click **Preview**, and then set up the search page.

Now that you've added a Coveo Recommendation component, you must set a Content Recommendation (CR) model in your Coveo organization.
See [Deploy Content Recommendations (CR)](https://docs.coveo.com/en/1886/).

## Integrate a custom Coveo Recommendation component

You may want to integrate a Coveo Recommendation component that you can customize to your needs.

> **Important**
>
> * Due to security and technical constraints (that is, a custom Lightning web component can't access a Lightning web component or module in a custom namespace), you can't customize the prebuilt Coveo Recommendation component using its out-of-the-box configuration.
> For more information on this limitation, see [Lightning Web Components (LWC) support](https://docs.coveo.com/en/3367/).
> 
> * The procedure outlined in this section is temporary.
> We're currently working on a more convenient tool for customizing the Coveo Recommendation component.

To integrate a custom Coveo Recommendation component

. [Add the Coveo Community Search component](https://docs.coveo.com/en/1218/) to your Experience Cloud site.

. Access the Experience Cloud site in [Preview mode](https://help.salesforce.com/articleView?id=community_designer_preview.htm&type=0).

. Click ![Gear icon to access Edit menu | Coveo for Salesforce](coveo-for-salesforce/settings.png), and then select **Edit**.

. In the Interface Editor that opens, select the **Code View** tab.

. Replace the configuration by the following:

```xml
<div class="CoveoRecommendation" data-results-per-page="5" data-hide-if-no-results="true" data-excerpt-length="150" data-enable-history="false" style="margin:0;">
   <div class="CoveoAnalytics"></div>
   <div class="coveo-recommendation-header">
      <div class="coveo-recommendation-title" style="padding-left: 15px;">Recommendations</div>
   </div>
   <div class="coveo-recommendation-body">
      <div class="CoveoResultList" data-layout="list">
         <script id="Default" class="result-template" type="text/html" data-layout="list">
            <div class="coveo-result-row" style="display: flex; align-items: center;">
               <div class="coveo-result-cell" style="margin-left: 10px;margin-right: 10px;height: 30px;">
                  <div class="CoveoIcon" data-small="true" data-with-label="false"></div>
               </div>
               <div class="coveo-result-cell">
                  <a class="CoveoSalesforceResultLink" data-open-in-sub-tab="true" data-always-open-in-new-window="true"></a>
               </div>
            </div>
         </script>
      </div>
   </div>
</div>
```

. Click **Save**.

You can now modify the options and styling of the component.