Integrating a Recommendation Component in a Website Page

When you want to take advantage of Coveo Machine Learning recommendations in a website page, you must add a Coveo JavaScript Search Framework Recommendation component to the page (see Coveo Machine Learning Event Recommendations Deployment Overview and Coveo Machine Learning Recommendations Complete Code Sample).

Once you included the JavaScript Search Framework resources in your page (see Including Coveo JavaScript Search Framework in a Page with Recommendations), you can include and adapt the following HTML sample in the body of your web page where you want the Coveo JavaScript Search Framework Recommendation component to appear.

<div id="recommendation" class="CoveoRecommendation" data-results-per-page="5" data-pipeline="MyQueryPipeline" data-hide-if-no-results="true">
  <div class="CoveoAnalytics" data-search-hub='MySearchHub'></div>
  <div class="coveo-recommendation-header">
    <div class="coveo-recommendation-title">Recommendations</div>
  </div>
  <div class="coveo-recommendation-body">
    <div class="CoveoResultList"></div>
  </div>
</div>

Ensure to adapt the following:

  • In the div with class="CoveoRecommendation":

    • Ensure to enter the name of the pipeline you created to host the Recommendation model in the data-pipeline attribute (see Create a Coveo ML Event Recommendation model in a dedicated query pipeline.).

      Hard coding the target pipeline name with the data-pipeline attribute in the HTML markup is a safe practice, but this approach prevents using other more flexible query pipeline routing techniques.

      You can omit the attribute and then rather use the query pipeline conditions to ensure that this pipeline is selected when queries come from this component (see Query Pipeline Routing Mechanisms and Rules).

    • Consider setting the data-hide-if-no-results attribute to true to completely hide the component when there are no results and prevent showing a list label with an empty list.

The <div class="CoveoAnalytics"></div> element is included to ensure that standard Coveo search usage analytics events are sent to your organization when users perform actions in the Recommendation component, such as clicking links.