Integrating a Coveo Recommendation Component

Pro and Enterprise editions only Coveo for Salesforce 3.38 (August 2019)

The Coveo Recommendation Component is a Lightning Web Component that displays a list of recommended results. The results are based on recorded events and the history of the user who is navigating the website.

1. Access your Salesforce organization.

2. Create a community (see Create Communities).

3. Access the Community Builder of your community (see Community Builder Overview).

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

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

   2. In the Components tab, under Custom Components, drag the Coveo Recommendation component and drop it where desired.

   3. At the top right of the page, click Preview. Then, set up the search page.

Now that you have your Coveo Recommendation component, you must set an Event Recommendation model in Coveo organization (see Coveo Machine Learning Event Recommendations Overview).

Integrating a Custom Coveo Recommendation Component

You may want to integrate a Coveo recommendations components that you can customize to your needs. You can do this with the following procedure:

1. Integrate the Coveo Community Search component in your community.

2. Access the Community Preview mode, and then click .

3. Select Edit, and then, in the Interface Editor that opens, access the Code View tab.

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

5. Click Save.

You can now modify the component options and styling.