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.
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. |
Component |
Description |
|---|---|
Brand container |
Set a font and primary color for all microsite pages and layouts. |
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. |
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. |
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 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. |
Component |
Description |
|---|---|
Coupon code |
Display a redeemable code. |
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 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. |
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 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. |
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. |