Integrating a Recommendation Component in a Website Page
<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:
Ensure to enter the name of the pipeline you created to host the Recommendation model in the
data-pipelineattribute (see Create a Coveo ML Event Recommendation model in a dedicated query pipeline.).
Hard coding the target pipeline name with the
data-pipelineattribute 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
trueto completely hide the component when there are no results and prevent showing a list label with an empty list.
<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.