---
title: Add promoted results badges
slug: '3123'
canonical_url: https://docs.coveo.com/en/3123/
collection: javascript-search-framework
source_format: adoc
---
# Add promoted results badges
The [`PromotedResultsBadge`](https://coveo.github.io/search-ui/components/promotedresultsbadge.html) component allows you to add badges to [query](https://docs.coveo.com/en/231/) result [items](https://docs.coveo.com/en/210/) in your [search interface](https://docs.coveo.com/en/2741/).
These badges can highlight:

* Featured results, which are configured through [query pipeline](https://docs.coveo.com/en/180/) [rules](https://docs.coveo.com/en/236/) (see [Manage featured result rules](https://docs.coveo.com/en/3376/)).
* Recommended results, which are boosted by a [Coveo Machine Learning (Coveo ML)](https://docs.coveo.com/en/188/) [Automatic Relevance Tuning (ART)](https://docs.coveo.com/en/1013/) [model](https://docs.coveo.com/en/1012/) (see [About Automatic Relevance Tuning](https://docs.coveo.com/en/3384/)).

> **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`](https://docs.coveo.com/en/13#operation/searchUsingPost-response-results-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 (The [`showBadgeForFeaturedResults`)(https://coveo.github.io/search-ui/components/promotedresultsbadge.html#options.showbadgeforfeaturedresults)option 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`.] and ART-boosted items.

```html
<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](https://docs.coveo.com/en/assets/images/jsui/promoted-results-badge-example.gif)