Integrate a Coveo Recommendation component

This is for:

Developer System Administrator

Pro and Enterprise editions

Coveo for Salesforce 3.38

The Coveo Recommendation component is a Lightning web component 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
Note

The custom token isn’t yet supported with the Coveo Recommendation component.

To add a Coveo Recommendation component

  1. Access your Salesforce organization.

  2. Create an Experience Cloud site.

  3. Access the Salesforce Experience Builder.

  4. Access the page where you need to insert the component.

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

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

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

Now that you have your Coveo Recommendation component, you must set a Content Recommendation (CR) model in your Coveo organization. See Deploy Content Recommendations (CR).

Integrate a custom Coveo Recommendation component

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

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

  • 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

  1. Integrate the Coveo Community Search component in your Experience Cloud site.

  2. Access the Experience Cloud site in Preview mode.

  3. Click 2980-settings, and then select Edit.

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

  5. Replace the configuration by the following:

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

  6. Click Save.

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