# Widget & Microsite Statistics Explained

Verified access widgets and microsites can be set up to show your participants their referral, reward, and program statistics. This feature allows you to keep participants aware of what they’ve achieved and what they can work towards next.

{% hint style="warning" %}
**Limited**: Components, apart from the ones provided in the given templates, are only available to certain product editions or add ons. If you want more granular control over which components your widgets and microsites use, contact us to upgrade your program.
{% endhint %}

### Adjust the statistics shown to participants

Our templates display a few common high-level statistics to your participants by default. To show more custom statistics for your programs to your participants:

1. From the left navigation menu, select ![](/files/CDnwOBeIdds9r3Z6zTnO) **\[Engage] → Content**.
2. Open the content editor by selecting **Edit Widgets** or **Edit Content**.
   * For help with using the editors, visit [Customize Program Widgets](/brand/readme/advocate-program/manage-advocate-participant-experiences/widget-experiences/customize-program-widgets.md) or [Customize Microsite Layouts and Pages](/brand/readme/advocate-program/manage-advocate-participant-experiences/microsite-experiences/customize-microsite-layouts-and-pages.md).
3. Select the program *Widget* or *Microsite* page that you want to edit from the left slideout.

<div data-with-frame="true"><figure><img src="/files/GwTS0YBTRtLg6z9ZyPNp" alt="" width="375"><figcaption></figcaption></figure></div>

4. From the right side menu, select **Add** → **Statistics** and choose one of the *statistics* groups.
   * To edit an existing statistic, select the statistic on the canvas and then proceed to step 6 below.
   * To learn more about the statistics components available to you, see [Widget & Microsite Components Explained](https://help.impact.com/brand/what-would-you-like-to-learn-about/advocate-program/manage-advocate-participant-experiences/widget-and-microsite-components-explained#statistics).
5. Find and select a spot on the canvas that you’d like to add the statistic component.
6. Once you’ve selected your component and placed it on the canvas, a stat builder will appear on the right side. In this right-hand panel, you’ll have numerous editing options to further customize your component. See the *Statistics reference* below.

### Statistics reference

The following section covers all the possible settings that can appear in the *Edit* tab.

#### **Points Balance, GiftCards Earned, Referrals and Other Stat components**

The following settings are grouped based on the user statistic you select from the *Type* drop-down menu.

<details>

<summary>Referral</summary>

Displays the advocate's referral activity. You can use this to motivate your advocates by showing a real-time count of their referral activity, allowing them to track performance, and gain insight into what makes a successful referral.

| User stat setting       | Description                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                     |
| ----------------------- | --------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- |
| **Timeframe**           | <p>Use the drop-down menu to scope the referral data to a specific period.</p><ul><li><strong>All time</strong> - Calculates the statistic using data from the entire history of the program.</li><li><strong>Current month</strong> - Restricts the calculation to include only data from the current calendar month.</li><li><strong>Current week</strong> - Restricts the calculation to include only data from the current calendar week.</li></ul>                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                         |
| **Referral status**     | <p>Use the drop-down menu to segment your referral data based on its conversion status.</p><ul><li><strong>All started referrals</strong> - Includes every referral that has been initiated by a user, regardless of whether it resulted in a conversion.</li><li><strong>Converted referrals only</strong> - Includes only the referrals that have successfully led to a desired outcome (e.g., a completed purchase, a sign-up).</li></ul>                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                    |
| **Additional settings** | <p>Select additional settings. Settings availability depends on whether you are working on a widget or microsite.</p><ul><li><strong>Alignment</strong> - Controls the alignment of the flexbox.</li><li><strong>Description font size</strong> (microsite only) - Set the size of the description text in pixels. Enter a number to adjust the font size.</li><li><strong>Description text color</strong> (microsite only) - Sets the color of the description text. Enter a hexadecimal color code (e.g., #FFFFFF for white) to set the color.</li><li><strong>Flex reverse</strong> - <img src="/files/OoA2qxPalfCYKZvmxuU6" alt=""> <strong>\[Toggle on]</strong> to have the description appear before the stat value.</li><li><strong>Program ID</strong> - Select a program ID to display stats from that specific program. If no ID is specified, it defaults to displaying stats from the current program context.</li><li><strong>Stat font size</strong> (microsite only) - Set the size of the stat value’s text in pixels.</li><li><strong>Stat font weight</strong> (microsite only) - Choose the weight of the stat value’s text.</li><li><strong>Stat text color</strong> (microsite only) - Set the color of the stat value’s text. Enter a hexadecimal color code to set the color.</li></ul> |

</details>

<details>

<summary>All rewards</summary>

Displays all the types of rewards a user has. You can use this user statistic type to foster the long-term loyalty of your advocates by highlighting the total cumulative value they’ve earned across all rewards in your program.

| User stat setting                              | Description                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                     |
| ---------------------------------------------- | --------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- |
| **Timeframe**                                  | <p>Use the drop-down menu to scope the referral data to a specific period.</p><ul><li><strong>All time</strong> - Calculates the statistic using data from the entire history of the program.</li><li><strong>Current month</strong> - Restricts the calculation to include only data from the current calendar month.</li><li><strong>Current week</strong> - Restricts the calculation to include only data from the current calendar week.</li></ul>                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                         |
| **Calculate reward total across all programs** | ![](/files/OoA2qxPalfCYKZvmxuU6) **\[Toggle on]** this user stat to display the total rewards they’ve accumulated across all programs they’re joined to. ![](/files/5SMwTyaETie506iHU7M3) **\[Toggle off]** this stat to only show rewards from the current program.                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                            |
| **Additional settings**                        | <p>Select additional settings. Settings availability depends on whether you are working on a widget or microsite.</p><ul><li><strong>Alignment</strong> - Controls the alignment of the flexbox.</li><li><strong>Description font size</strong> (microsite only) - Set the size of the description text in pixels. Enter a number to adjust the font size.</li><li><strong>Description text color</strong> (microsite only) - Sets the color of the description text. Enter a hexadecimal color code (e.g., #FFFFFF for white) to set the color.</li><li><strong>Flex reverse</strong> - <img src="/files/OoA2qxPalfCYKZvmxuU6" alt=""> <strong>\[Toggle on]</strong> to have the description appear before the stat value.</li><li><strong>Program ID</strong> - Select a program ID to display stats from that specific program. If no ID is specified, it defaults to displaying stats from the current program context.</li><li><strong>Stat font size</strong> (microsite only) - Set the size of the stat value’s text in pixels.</li><li><strong>Stat font weight</strong> (microsite only) - Choose the weight of the stat value’s text.</li><li><strong>Stat text color</strong> (microsite only) - Set the color of the stat value’s text. Enter a hexadecimal color code to set the color.</li></ul> |

</details>

<details>

<summary>Fueltank, Credit, &#x26; Discount rewards</summary>

* **Fueltank rewards** - Displays rewards specific to the fueltank program.
* **Credit rewards** - Displays the balance of rewards issued as credits.
* **Discount rewards** - Displays the available discount-based rewards.

You can use these user statistic types to encourage advocates to use their earned rewards.

| User stat setting                              | Description                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                     |
| ---------------------------------------------- | --------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- |
| **Type - Reward Unit**                         | <p>Select the unit or currency for the chosen reward type.</p><p>Examples include Percent (%), various currencies like Credit - CAD or Cash - USD, and even custom units like Tshirt - TSHIRT.</p>                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                              |
| **Total**                                      | <p>Choose how the stat is calculated and displayed. You can choose to show a total value (Sum) or a total count (Number) of rewards, filtered by their current status.</p><p><strong>Calculation type</strong>: Select the kind of calculation to perform on all the rewards:</p><ul><li><strong>Sum</strong> - Calculates the total value of the rewards.</li><li><strong>Number</strong> - Calculates the total quantity of rewards.</li></ul><p><strong>Reward status</strong>: Select the rewards based on their current state in the lifecycle:</p><ul><li><strong>Earned</strong> - All rewards given to the user.</li><li><strong>Assigned</strong> - Rewards that have been allocated to a user.</li><li><strong>Available</strong> - Rewards that are currently available to the user.</li><li><strong>Pending</strong> - Rewards that have been triggered but are awaiting a final action, such as approval or a clearing period.</li><li><strong>Redeemed</strong> - Rewards that the user has already used or cashed out.</li><li><strong>Cancelled</strong> - Rewards that have been voided or revoked and are no longer valid.</li><li><strong>Expired</strong> - Rewards that were not used before their expiration date and are no longer valid.</li></ul>                                      |
| **Calculate reward total across all programs** | ![](/files/OoA2qxPalfCYKZvmxuU6) **\[Toggle on]** this user stat to display the total rewards they’ve accumulated across all programs they’re joined to. ![](/files/5SMwTyaETie506iHU7M3) **\[Toggle off]** this stat to only show rewards from the current program.                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                            |
| **Additional settings**                        | <p>Select additional settings. Settings availability depends on whether you are working on a widget or microsite.</p><ul><li><strong>Alignment</strong> - Controls the alignment of the flexbox.</li><li><strong>Description font size</strong> (microsite only) - Set the size of the description text in pixels. Enter a number to adjust the font size.</li><li><strong>Description text color</strong> (microsite only) - Sets the color of the description text. Enter a hexadecimal color code (e.g., #FFFFFF for white) to set the color.</li><li><strong>Flex reverse</strong> - <img src="/files/OoA2qxPalfCYKZvmxuU6" alt=""> <strong>\[Toggle on]</strong> to have the description appear before the stat value.</li><li><strong>Program ID</strong> - Select a program ID to display stats from that specific program. If no ID is specified, it defaults to displaying stats from the current program context.</li><li><strong>Stat font size</strong> (microsite only) - Set the size of the stat value’s text in pixels.</li><li><strong>Stat font weight</strong> (microsite only) - Choose the weight of the stat value’s text.</li><li><strong>Stat text color</strong> (microsite only) - Set the color of the stat value’s text. Enter a hexadecimal color code to set the color.</li></ul> |

</details>

<details>

<summary>Gift card rewards</summary>

Displays the balance of any gift card rewards. You can use this user statistic type to ensure advocates are aware of and use the rewards they’ve earned.

| User stat setting                              | Description                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                     |
| ---------------------------------------------- | --------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- |
| **Reward status**                              | <p>Select the rewards to display based on their current state in the lifecycle.</p><ul><li><strong>Earned</strong> - All rewards given to the user.</li><li><strong>Assigned</strong> - Rewards that have been allocated to a user.</li><li><strong>Available</strong> - Rewards that are currently available to the user.</li><li><strong>Pending</strong> - Rewards that have been triggered but are awaiting a final action, such as approval or a clearing period.</li><li><strong>Redeemed</strong> - Rewards that the user has already used or cashed out.</li><li><strong>Cancelled</strong> - Rewards that have been voided or revoked and are no longer valid.</li><li><strong>Expired</strong> - Rewards that were not used before their expiration date and are no longer valid.</li></ul>                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                           |
| **Calculate reward total across all programs** | ![](/files/OoA2qxPalfCYKZvmxuU6) **\[Toggle on]** this user stat to display the total rewards they’ve accumulated across all programs they’re joined to. ![](/files/5SMwTyaETie506iHU7M3) **\[Toggle off]** this stat to only show rewards from the current program.                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                            |
| **Additional settings**                        | <p>Select additional settings. Settings availability depends on whether you are working on a widget or microsite.</p><ul><li><strong>Alignment</strong> - Controls the alignment of the flexbox.</li><li><strong>Description font size</strong> (microsite only) - Set the size of the description text in pixels. Enter a number to adjust the font size.</li><li><strong>Description text color</strong> (microsite only) - Sets the color of the description text. Enter a hexadecimal color code (e.g., #FFFFFF for white) to set the color.</li><li><strong>Flex reverse</strong> - <img src="/files/OoA2qxPalfCYKZvmxuU6" alt=""> <strong>\[Toggle on]</strong> to have the description appear before the stat value.</li><li><strong>Program ID</strong> - Select a program ID to display stats from that specific program. If no ID is specified, it defaults to displaying stats from the current program context.</li><li><strong>Stat font size</strong> (microsite only) - Set the size of the stat value’s text in pixels.</li><li><strong>Stat font weight</strong> (microsite only) - Choose the weight of the stat value’s text.</li><li><strong>Stat text color</strong> (microsite only) - Set the color of the stat value’s text. Enter a hexadecimal color code to set the color.</li></ul> |

</details>

<details>

<summary>Payout balance</summary>

Displays the user’s current cash-out balance. You can use this user statistic type to provide direct financial motivation by showing your advocate’s real-time cash balance that’s ready to be paid out.

| User stat setting       | Description                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                     |
| ----------------------- | --------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- |
| **Additional settings** | <p>Select additional settings. Settings availability depends on whether you are working on a widget or microsite.</p><ul><li><strong>Alignment</strong> - Controls the alignment of the flexbox.</li><li><strong>Description font size</strong> (microsite only) - Set the size of the description text in pixels. Enter a number to adjust the font size.</li><li><strong>Description text color</strong> (microsite only) - Sets the color of the description text. Enter a hexadecimal color code (e.g., #FFFFFF for white) to set the color.</li><li><strong>Flex reverse</strong> - <img src="/files/OoA2qxPalfCYKZvmxuU6" alt=""> <strong>\[Toggle on]</strong> to have the description appear before the stat value.</li><li><strong>Program ID</strong> - Select a program ID to display stats from that specific program. If no ID is specified, it defaults to displaying stats from the current program context.</li><li><strong>Stat font size</strong> (microsite only) - Set the size of the stat value’s text in pixels.</li><li><strong>Stat font weight</strong> (microsite only) - Choose the weight of the stat value’s text.</li><li><strong>Stat text color</strong> (microsite only) - Set the color of the stat value’s text. Enter a hexadecimal color code to set the color.</li></ul> |

</details>

<details>

<summary>Custom</summary>

Allows for a custom-defined stat. You can use this user statistic type to display a non-standard metric, such as tracking specific feature activations or event sign-ups.

| User stat setting       | Description                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                     |
| ----------------------- | --------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- |
| **Path**                | <p>Enter the specific data path that points to the custom statistics you wish to display. This path directs the component to the exact location of the data point in the user’s data object.<br>Examples include: <code>/programGoals/count/\[goalId]</code>, <code>/customFields/\[customFieldKey]</code></p>                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                  |
| **Additional settings** | <p>Select additional settings. Settings availability depends on whether you are working on a widget or microsite.</p><ul><li><strong>Alignment</strong> - Controls the alignment of the flexbox.</li><li><strong>Description font size</strong> (microsite only) - Set the size of the description text in pixels. Enter a number to adjust the font size.</li><li><strong>Description text color</strong> (microsite only) - Sets the color of the description text. Enter a hexadecimal color code (e.g., #FFFFFF for white) to set the color.</li><li><strong>Flex reverse</strong> - <img src="/files/OoA2qxPalfCYKZvmxuU6" alt=""> <strong>\[Toggle on]</strong> to have the description appear before the stat value.</li><li><strong>Program ID</strong> - Select a program ID to display stats from that specific program. If no ID is specified, it defaults to displaying stats from the current program context.</li><li><strong>Stat font size</strong> (microsite only) - Set the size of the stat value’s text in pixels.</li><li><strong>Stat font weight</strong> (microsite only) - Choose the weight of the stat value’s text.</li><li><strong>Stat text color</strong> (microsite only) - Set the color of the stat value’s text. Enter a hexadecimal color code to set the color.</li></ul> |

</details>

#### **Container with Three Stats component**

This component displays a container with three statistics (*Points Balance*, *GiftCards Earned*, and *Referrals*) that can be customized according to your needs. To edit the displayed statistics, select them and then refer to the relevant expandables above.

<details>

<summary>User stat settings</summary>

| User stat setting                | Description                                                                                                                           |
| -------------------------------- | ------------------------------------------------------------------------------------------------------------------------------------- |
| **Display** (widget only)        | Choose whether to display the stats container as a grid or in a flex layout.                                                          |
| **Alignment** (microsite only)   | Set the alignment of the flexbox.                                                                                                     |
| **Gap** (microsite only)         | Adjust the amount of space within each individual stat component.                                                                     |
| **Hide border** (microsite only) | ![](/files/OoA2qxPalfCYKZvmxuU6) **\[Toggle on]** to hide the border line separating statistics within the container from each other. |
| **Space between stats**          | Adjust the amount of space between each stat component. This is useful for preventing stats from appearing too crowded.               |

</details>


---

# Agent Instructions: Querying This Documentation

If you need additional information that is not directly available in this page, you can query the documentation dynamically by asking a question.

Perform an HTTP GET request on the current page URL with the `ask` query parameter:

```
GET https://help.impact.com/brand/readme/advocate-program/manage-advocate-participant-experiences/widget-and-microsite-statistics-explained.md?ask=<question>
```

The question should be specific, self-contained, and written in natural language.
The response will contain a direct answer to the question and relevant excerpts and sources from the documentation.

Use this mechanism when the answer is not explicitly present in the current page, you need clarification or additional context, or you want to retrieve related documentation sections.