Add Promoted Results Badges

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

Note

A query result item can’t contain two badges (i.e., 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

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.