# Set Up a Leaderboard

Leaderboards rank your program participants alongside others to incentivize them to complete program objectives and encourage competition for the top ranks. You can add a leaderboard to your verified access widget or microsite and customize it like other components.

Leaderboards can be configured in a variety of ways to best suit the goals of your program. For more information on the different options, see [Leaderboards Explained](https://help.impact.com/brand/what-would-you-like-to-learn-about/advocate-program/manage-advocate-participant-experiences/leaderboards-explained).

{% hint style="warning" %}
This feature is only accessible to specific impact.com editions or add-ons. [Contact us](https://app.impact.com/support/portal.ihtml?createTicket=true&) to upgrade your account and get access!
{% endhint %}

{% stepper %}
{% step %}

#### Step 1: Get leaderboards enabled&#x20;

Before you can begin setting up leaderboards, reach out to your Program Strategy Manager (PSM) or create a [support ticket](mailto:advocate-support@impact.com) to have the Leaderboards feature enabled for your program.
{% endstep %}

{% step %}

#### **Step 2: Add leaderboard to widget or microsite**

1. Navigate to your widget or microsite by selecting ![](https://4048883401-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FwMLlMoFBtKJa8ptd3zaw%2Fuploads%2Fgit-blob-230534471fef5f40808e921e41ee44e4a06ded03%2Fe6cb9548999afdc1ed3ce4942e4cb5b45b5cecbd323267aac2a7cd1915fccc09.svg?alt=media) **\[Engage] → Content → Edit widgets** or **Edit content**.
   * If you haven't set up a widget or microsite yet, you'll need to do so first.

     <div data-with-frame="true"><figure><img src="https://4048883401-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FwMLlMoFBtKJa8ptd3zaw%2Fuploads%2Fgit-blob-6c8ac36b6c9c61e75e4b89d96973ba51ee0ac176%2F7b467ae9abd22f247d5b311d619595cb90f745d33d02a4aab734cbdc408e79c4.jpg?alt=media" alt=""><figcaption></figcaption></figure></div>
2. Select the widget or microsite page you want to edit.
   * Learn how to [edit widget content](https://help.impact.com/brand/what-would-you-like-to-learn-about/advocate-program/manage-advocate-participant-experiences/widget-experiences/customize-program-widgets) or [edit microsite pages](https://help.impact.com/brand/what-would-you-like-to-learn-about/advocate-program/manage-advocate-participant-experiences/microsite-experiences/customize-microsite-layouts-and-pages).
3. From the right sidebar menu, expand the **Leaderboard** component.
   * If you do not see the *Leaderboard* component, you'll first need to install a Mint Components package:
     * **Install Mint Components for widget**
       1. From the left sidebar menu, select **Packages → Add package**.
          1. On the *Mint Components* card, select **Add**.
          2. You should now be able to expand the **Leaderboard** component in the right sidebar menu.
     * **Install Mint Components for microsite**
       1. Return to the *Content* screen by selecting **→ \[Engage] Content** in your left navigation bar or your top menu.
       2. On the *Microsite* card, select **Edit settings**.
       3. Scroll until you see the *Packages* field, then select **Add package**.
       4. On the *Mint Components* card, select **Add**.
       5. Select **Save config** and return to the editor.
4. Select a type of **Leaderboard**.
   * For a description of each of the available leaderboards, refer to [Leaderboards Explained](https://help.impact.com/brand/what-would-you-like-to-learn-about/advocate-program/leaderboards-explained#leaderboard-types-0-0).
5. Select the blue **Add to** button on the canvas where you want the component to appear.

<figure><img src="https://4048883401-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FwMLlMoFBtKJa8ptd3zaw%2Fuploads%2Fgit-blob-151da7252635321ed7dd6136642001c6caf3115f%2F4f090a0bab9f37c07061d538d534cf389cd8492e6adcc3b660fdf2f2bcef4a35.png?alt=media" alt=""><figcaption></figcaption></figure>
{% endstep %}

{% step %}

#### **Step 3: Customize leaderboard**

{% tabs %}
{% tab title="Edit" %}

1. On your canvas, select the leaderboard component you want to edit.
2. Use the options in the **Edit** tab of the right sidebar menu to change the leaderboard properties.
   * If you want to insert a link into a text component, you can do so by selecting ![](https://4048883401-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FwMLlMoFBtKJa8ptd3zaw%2Fuploads%2Fgit-blob-63c2caf34c8c42984b458d40b5ac087e03360307%2Fc5fc23a16175bc8c8603fda06785d3d10c8d687bb14c7c6f1424d705c272963e.svg?alt=media) **\[Code view]** and editing the widget or microsite’s HTML.
3. Select **Save Draft** when you're done.

**Edit fields reference**

| Setting                   | Description                                                                                                                                                                                                                                                                                                                                |
| ------------------------- | ------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------ |
| Unknown user text         | Enter the default display name for users without names, e.g., *Anonymous User*.                                                                                                                                                                                                                                                            |
| Hide viewing user         | Toggle on to make the viewing participant's row hidden if they don't fall among the top displayed ranks.                                                                                                                                                                                                                                   |
| Leaderboard time interval | Enter a start and end date for which you want to view leaderboard results, in the form `mm/dd/yyyy`.                                                                                                                                                                                                                                       |
| Leaderboard type          | Select the scoring system you want to use. For more information on the scoring systems available, see [Leaderboards Explained](https://help.impact.com/brand/what-would-you-like-to-learn-about/advocate-program/manage-advocate-participant-experiences/leaderboards-explained).                                                          |
| Maximum rows number       | Enter the maximum number of rows to be displayed on the leaderboard.                                                                                                                                                                                                                                                                       |
| Program                   | Select a program to limit leaderboard results to participants in that program. To view results globally across all programs, don't select a program.                                                                                                                                                                                       |
| Rank type                 | For more information on the types of ranking systems available, see [Leaderboards Explained](https://help.impact.com/brand/what-would-you-like-to-learn-about/advocate-program/manage-advocate-participant-experiences/leaderboards-explained).                                                                                            |
| Rank column heading       | Enter the column name you want displayed for the *Rank* column.                                                                                                                                                                                                                                                                            |
| Show leaderboard rank     | ![](https://4048883401-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FwMLlMoFBtKJa8ptd3zaw%2Fuploads%2Fgit-blob-d0b6669ae76a7bef06a8d6940d7ad5c16bb8d018%2F7cb018d4face8d7cceb880eb5086c812e764fbcfe6f2a0377f88bc7576973070.svg?alt=media) **\[Toggle on]** if you want the leaderboard to display the *Rank* column. |
| Stats column heading      | Enter the column name you want displayed for the column containing participant scores.                                                                                                                                                                                                                                                     |
| User column heading       | Enter the column name you want displayed for the column containing participant names.                                                                                                                                                                                                                                                      |
| {% endtab %}              |                                                                                                                                                                                                                                                                                                                                            |

{% tab title="Move" %}

1. On your canvas, select the component you want to move.
2. Select ![](https://4048883401-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FwMLlMoFBtKJa8ptd3zaw%2Fuploads%2Fgit-blob-9e2a26b918e7394cf67e8a26e3713e081b203ac9%2F15d049b0c04d1c54c39dbbb5a7cd2ba64d86f1f99220111674e768744ea7ceb9.svg?alt=media) **\[Move]**.
   * Some components can’t be moved. The ![](https://4048883401-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FwMLlMoFBtKJa8ptd3zaw%2Fuploads%2Fgit-blob-9e2a26b918e7394cf67e8a26e3713e081b203ac9%2F15d049b0c04d1c54c39dbbb5a7cd2ba64d86f1f99220111674e768744ea7ceb9.svg?alt=media) **\[Move]** option will only appear if there’s another valid location on the canvas for the component to relocate to.
3. Select the blue **Move to** button where you want the component to go.
4. Select **Save**.
   {% endtab %}

{% tab title="Remove" %}

1. On your canvas, select the component you want to remove.
2. Select ![](https://4048883401-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FwMLlMoFBtKJa8ptd3zaw%2Fuploads%2Fgit-blob-c5ab8423372b2c345ded634b7aa4cab16c87fe3a%2Fd17a259fe817ff10ea9fd87140a89bd62ece6fa9940e05902574dcf95bed5960.svg?alt=media) **\[Remove]**.
3. Select **Save**.
   {% endtab %}
   {% endtabs %}
   {% endstep %}
   {% endstepper %}
