Add Promoted Results Badges

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

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.

Configuring a promoted results badge for featured results1 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 showBadgeForFeaturedResults option is true by default, so the data-show-badge-for-featured-results="true" property in the example above is redundant.

If you do not want the CoveoPromotedResultsBadge component to display a badge for featured results, you must explicitly set the option to false, though.

Recommended Articles