Help Center

| Submit or View Help Requests | Developer Docs |
|

View desktop instructions
View mobile app instructions
Widget and Microsite Components Explained

Components are the individual building blocks, like hero images and task cards, that make up your widget or microsite.  This article contains a list of the components you can use to build your participant experience, grouped by how they’re categorized within the widget and microsite editors. Most components can be styled individually to match your brand’s needs, but there are a few limitations. Reach out to our Support team for help or more information.

Visit Participant Experiences Explained to learn more about our widget and microsite templates and component libraries.

Statistics

Use Statistics components to let your participants know how they’re doing in your program. For a list of statistics these components can support, visit Widget and Microsite Statistics.

Component

Description

Points balance

Show the participant’s Points balance.

Gift card earned

Show earned available gift card rewards.

Referrals

Display how many referrals the participant has made.

Container with three stats

Add a template with space for three statistics.

Common Components

Component

Description

Brand container

Set a font and primary color for all microsite pages and layouts.

Note: Microsites created with auto setup come equipped with a brand container. To access and edit its properties, select the Base Layout, then open the Layers menu to find the brand container component.

Two-column hero image

A banner image and header text spanning two columns.

Overlay hero image

A banner image with overlaid text.

Image

A picture.

Link button

A clickable button that redirects participants to your selected link.

Program explainer

A template explaining how to earn rewards. Includes two program explainer steps by default. More can be added.

Program explainer step

Add descriptive text to explain part of your program. Fits within a program explainer component.

Program timeline

Display an overview of the referral journey and rewards for your participants. Add additional timeline entries as needed.

Timeline entry

Fits within a program timeline component to show one step of the referral journey.

User name display

Shows the participant’s full name.

Rewards

Note: Reward components can only be used for verified access widgets and microsites.

Component

Description

Task card feed

Add multiple task cards to your widget or microsite.

Reward exchange

Allow participants to exchange earned rewards for another type of reward.

You must have Reward Exchange set up to use this feature.

Reward table

Display a list of rewards the participant has earned.

Customer note column

Add another note column to the reward table.

Date column

Add another date column to the reward table.

Reward column

Add another reward column to the reward table.

Source column

Add another source column to the reward table.

Status column

Add another status column to the reward table.

One time task card

A task card with a call-to-action button. The task card is linked to one program goal.

Best used when the program goal can only be completed once, like upgrading an account.

Repeatable task card

A task card with a call-to-action button. The task card is linked to one program goal.

Best used when the program goal can be completed multiple times, like when a referred friend converts.

Event sending task card

A task card with a call-to-action button. When the participant clicks the button to complete the action, we receive event data. Edit the component’s properties to choose which event key is used.

Microsite Components

Microsite components are primarily used for your site’s sign-up form. They cannot be used in program widgets.

Component

Description

Form checkbox field

Add a checkbox to the registration form.

Form dropbox field

Add a dropdown list with customizable list items to the registration form.

Form input field

Add a free-form text input field to the registration form.

Form name fields

Add fillable First Name and Last Name fields to the registration form.

Sidebar item

Add a new page or link to your microsite’s sidebar navigation.

Form password field

Add a fillable password field to the registration form.

Instant Access

Component

Description

Coupon code

Display a redeemable code.

The rewards fuel tank must have available coupon codes for this component to work as intended.

Instant access registration

Allow referred friends to enter their email address to register. Used for the instant access website referral widget.

Sign out current user

Allow the viewer to exit the personalized instant access display.

Instant access friend registration

Allow referred friends to enter their email address to register. Used for the instant access fried widget.

Layout

Layout components allow you to organize and group together other components. Use them to create sections, rows, columns, or tabs.

Component

Description

Two-column hero layout

Add a hero layout with space for two images.

Row layout container

Add a new row. Other components can be placed within the row.

Column layout container

Add a new column. Other components can be placed within the column.

Tab

Add a new tab to a generic tab group.

Generic tab group

Add a group of tabs. Each tab can contain distinct components.

Titled section

Add a new section that contains a heading and paragraph text.

Leaderboard

The Leaderboard component allows you to rank your program participants, offer rewards to top performers, and incentivize participants to drive greater results in your program. Add leaderboards to your verified access widget or microsite, and configure the scoring system, ranking system, and participant filtering options. See the articles below for more information:

Referrals

Component

Description

Referral card

Pre-formatted component block that includes program timeline, share link, and Facebook, LinkedIn and Twitter / X share button components.

Referral table

Display a table showing the participant’s referred friends, conversion date, and conversion status.

Date column

Add another date column to the referral table.

Rewards column

Add another rewards column to the referral table.

Status column

Add another status column to the referral table.

User column

Add another customer (referred friend) column to the referral table.

Sharing

Sharing components let you add shortcuts for participants to share their link and code to various social media channels and services.

Component

Description

Facebook share button

Display a Share on Facebook button with customizable text.

Twitter / X share button

Display a Share via Twitter / X button with customizable text.

Email share button

Display a Share via Email button with customizable text.

Web share sheet share button

Display a button to share within the participant’s web browser.

LinkedIn share button

Display a Share on LinkedIn button with customizable text.

SMS share button

Display a Text a friend button with customizable text.

Facebook Messenger share button

Display a Share via Messenger button with customizable text.

WhatsApp share button

Display a Share via WhatsApp button with customizable text.

Line Messenger share button

Display a Share via Line Messenger button with customizable text.

Pinterest share button

Display a Share on Pinterest button with customizable text.

Share code

Display the participant’s share code for this program.

Share link

Display the participant’s share link for this program.

Advanced

Component

Description

Conditional section on segment

Display content in this section only when the participant belongs to a certain user segment.

To set the user segment, open the component’s properties and edit the JSONata expression in the Condition field.

Conditional section on custom field

Display content in this section only when a custom field on the participant’s profile contains a certain value.

To set the custom field value and value, open the component’s properties and edit the JSONata expression in the Condition field.

Program section

The program section component allows you to override the program ID of its child components. Use it when you want to display content that isn’t linked to a specific program.

Typography

Typography components let you add formatted text blocks to your widget or microsite. Select from:

  • Paragraph

  • Heading 1

  • Heading 2

  • Heading 3

  • Heading 4

Did you find it helpful? Yes No

Send feedback
Sorry we couldn't be helpful. Help us improve this article with your feedback.