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.

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.

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 [Engage] → Content.
2. Open the content editor by selecting Edit Widgets or Edit Content.

   • For help with using the editors, visit Customize Program Widgets or Customize Microsite Layouts and Pages.
3. Select the program Widget or Microsite page that you want to edit from the left slideout.

1. 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.
2. Find and select a spot on the canvas that you’d like to add the statistic component.
3. 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.

Referral

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

All rewards

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	Use the drop-down menu to scope the referral data to a specific period. All time - Calculates the statistic using data from the entire history of the program. Current month - Restricts the calculation to include only data from the current calendar month. Current week - Restricts the calculation to include only data from the current calendar week.
Calculate reward total across all programs	[Toggle on] this user stat to display the total rewards they’ve accumulated across all programs they’re joined to. [Toggle off] this stat to only show rewards from the current program.
Additional settings	Select additional settings. Settings availability depends on whether you are working on a widget or microsite. Alignment - Controls the alignment of the flexbox. Description font size (microsite only) - Set the size of the description text in pixels. Enter a number to adjust the font size. Description text color (microsite only) - Sets the color of the description text. Enter a hexadecimal color code (e.g., #FFFFFF for white) to set the color. Flex reverse - [Toggle on] to have the description appear before the stat value. Program ID - 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. Stat font size (microsite only) - Set the size of the stat value’s text in pixels. Stat font weight (microsite only) - Choose the weight of the stat value’s text. Stat text color (microsite only) - Set the color of the stat value’s text. Enter a hexadecimal color code to set the color.

Fueltank, Credit, & Discount rewards

• 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	Select the unit or currency for the chosen reward type. Examples include Percent (%), various currencies like Credit - CAD or Cash - USD, and even custom units like Tshirt - TSHIRT.
Total	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. Calculation type: Select the kind of calculation to perform on all the rewards: Sum - Calculates the total value of the rewards. Number - Calculates the total quantity of rewards. Reward status: Select the rewards based on their current state in the lifecycle: Earned - All rewards given to the user. Assigned - Rewards that have been allocated to a user. Available - Rewards that are currently available to the user. Pending - Rewards that have been triggered but are awaiting a final action, such as approval or a clearing period. Redeemed - Rewards that the user has already used or cashed out. Cancelled - Rewards that have been voided or revoked and are no longer valid. Expired - Rewards that were not used before their expiration date and are no longer valid.
Calculate reward total across all programs	[Toggle on] this user stat to display the total rewards they’ve accumulated across all programs they’re joined to. [Toggle off] this stat to only show rewards from the current program.
Additional settings	Select additional settings. Settings availability depends on whether you are working on a widget or microsite. Alignment - Controls the alignment of the flexbox. Description font size (microsite only) - Set the size of the description text in pixels. Enter a number to adjust the font size. Description text color (microsite only) - Sets the color of the description text. Enter a hexadecimal color code (e.g., #FFFFFF for white) to set the color. Flex reverse - [Toggle on] to have the description appear before the stat value. Program ID - 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. Stat font size (microsite only) - Set the size of the stat value’s text in pixels. Stat font weight (microsite only) - Choose the weight of the stat value’s text. Stat text color (microsite only) - Set the color of the stat value’s text. Enter a hexadecimal color code to set the color.

Gift card rewards

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	Select the rewards to display based on their current state in the lifecycle. Earned - All rewards given to the user. Assigned - Rewards that have been allocated to a user. Available - Rewards that are currently available to the user. Pending - Rewards that have been triggered but are awaiting a final action, such as approval or a clearing period. Redeemed - Rewards that the user has already used or cashed out. Cancelled - Rewards that have been voided or revoked and are no longer valid. Expired - Rewards that were not used before their expiration date and are no longer valid.
Calculate reward total across all programs	[Toggle on] this user stat to display the total rewards they’ve accumulated across all programs they’re joined to. [Toggle off] this stat to only show rewards from the current program.
Additional settings	Select additional settings. Settings availability depends on whether you are working on a widget or microsite. Alignment - Controls the alignment of the flexbox. Description font size (microsite only) - Set the size of the description text in pixels. Enter a number to adjust the font size. Description text color (microsite only) - Sets the color of the description text. Enter a hexadecimal color code (e.g., #FFFFFF for white) to set the color. Flex reverse - [Toggle on] to have the description appear before the stat value. Program ID - 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. Stat font size (microsite only) - Set the size of the stat value’s text in pixels. Stat font weight (microsite only) - Choose the weight of the stat value’s text. Stat text color (microsite only) - Set the color of the stat value’s text. Enter a hexadecimal color code to set the color.

Payout balance

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

Select additional settings. Settings availability depends on whether you are working on a widget or microsite. Alignment - Controls the alignment of the flexbox. Description font size (microsite only) - Set the size of the description text in pixels. Enter a number to adjust the font size. Description text color (microsite only) - Sets the color of the description text. Enter a hexadecimal color code (e.g., #FFFFFF for white) to set the color. Flex reverse - [Toggle on] to have the description appear before the stat value. Program ID - 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. Stat font size (microsite only) - Set the size of the stat value’s text in pixels. Stat font weight (microsite only) - Choose the weight of the stat value’s text. Stat text color (microsite only) - Set the color of the stat value’s text. Enter a hexadecimal color code to set the color.

Custom

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	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. Examples include: /programGoals/count/[goalId], /customFields/[customFieldKey]
Additional settings	Select additional settings. Settings availability depends on whether you are working on a widget or microsite. Alignment - Controls the alignment of the flexbox. Description font size (microsite only) - Set the size of the description text in pixels. Enter a number to adjust the font size. Description text color (microsite only) - Sets the color of the description text. Enter a hexadecimal color code (e.g., #FFFFFF for white) to set the color. Flex reverse - [Toggle on] to have the description appear before the stat value. Program ID - 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. Stat font size (microsite only) - Set the size of the stat value’s text in pixels. Stat font weight (microsite only) - Choose the weight of the stat value’s text. Stat text color (microsite only) - Set the color of the stat value’s text. Enter a hexadecimal color code to set the color.

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.

User stat settings

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)	[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.