Components are the individual building blocks, like hero images and task cards, that make up your Advocate program's widget or microsite participant touchpoints. Visit Introduction to Participant Experiences to learn more about widget and microsites.
This article contains a list of the components you can use to build a widget or microsite, 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 the support team for help or more information.
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. You must have Reward Exchange set up to use this feature. |
Reward table | Display a list of rewards the participant has earned. |
Reward table customer note column | Add another note column to the reward table. |
Reward table date column | Add another date column to the reward table. |
Reward table reward column | Add another reward column to the reward table. |
Reward table source column | Add another source column to the reward table. |
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. 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 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. |
This feature is only accessible to specific impact.com editions or add-ons. Contact us to upgrade your account and get access!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:
Component | Description |
|---|---|
Referral started leaderboard | This type of leaderboard ranks participants by the number of referrals they've initiated. Your customer advocates' scores will correspond with the number of initiated referrals. |
Referral converted leaderboard | This type of leaderboard ranks participants by the number of referrals they've converted. Referrals are regarded as converted once the referred friend achieves a program goal, such as making a purchase of a value you've defined. Your customer advocates' scores will correspond with the number of converted referrals. |
Points earned leaderboard | This type of leaderboard ranks participants by the total number of points they've earned. All reward unit points count as long as they aren't pending or canceled. This leaderboard type is also only valid for the Point reward type. |
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. |
Referral table date column | Add another date column to the referral table. |
Referral table rewards column | Add another rewards column to the referral table. |
Referral table status column | Add another status column to the referral table. |
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. |