Add promoted results badges

This is for:

Developer

The PromotedResultsBadge component allows you to add badges to query result items in your search interface. These badges can highlight:

Featured results, which are configured through query pipeline rules (see Manage featured result rules).
Recommended results, which are boosted by a Coveo Machine Learning (Coveo ML) Automatic Relevance Tuning (ART) model (see About Automatic Relevance Tuning).

Note

A query result item can’t contain two badges (that is, one that highlights a featured result, and another that highlights an ART-boosted result).

This is because the PromotedResultsBadge component uses the value of the rankingModifier property of the Search API response, which can only be a single value.

In the case where a PromotedResultsBadge component is configured with both the showBadgeForFeaturedResults and showBadgeForRecommendedResults options set to true, and that Coveo ML ART boosts a featured result, the rankingModifier property will prioritize the Reveal ART value, which means that only the badge associated to ART will be displayed on the query result item.

You can add this component anywhere in your search interface. The component will then add a badge to your results after they have been rendered.

You can specify both the caption and color of the badge.

Example

Configuring a promoted results badge for featured results^[1] and ART-boosted items.

<div id="search" class="CoveoSearchInterface">
  <!-- ... -->
  <div class="CoveoPromotedResultsBadge"
       data-show-badge-for-featured-results="true"
       data-caption-for-featured="Featured"
       data-color-for-featured-results="orange"
       data-show-badge-for-recommended-results="true"
       data-caption-for-recommended="Recommended by Coveo ML"
       data-color-for-recommended-results="green"></div>
  <!-- ... -->
</div>

The following figure shows how the badge is rendered in the search interface:

Promoted results badge example | Coveo JavaScript Search Framework

1. The showBadgeForFeaturedResultsoption is true by default, so the data-show-badge-for-featured-results="true" property in the example above is redundant. However, if you do not want the CoveoPromotedResultsBadge component to display a badge for featured results, you must then explicitly set the option to false.