Components are the individual building blocks, like hero images and task cards, that make up your Advocate program's widget or microsite. These elements shape the participant experience and can be customized to align with your brand.
This article provides a categorized list of available components within the widget and microsite editors. Most components support styling and customization, though some have design limitations.
Note: Some custom components are only available to specific Advocate editions. Contact us to upgrade your account and access this feature.
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 | Shows the participant’s Points balance. Used in Advocate programs that reward participants with points.  |
Gift card earned | Shows a count of gift card rewards earned by the Advocate.  |
Referrals | Displays how many referrals the participant has made. Includes started and converted referrals.  |
Container with three stats | A template with space for three statistics. The statistics displayed can be changed. Statistics and be added and removed as desired.  |
These components are widely used to enhance both functionality and design consistency across your widget or microsite. They cover general-purpose visual and structural elements like hero images, layout formatting, and descriptive program steps.
Component | Description |
|---|---|
Brand container | Set a font and primary brand color for the widget and/or all microsite pages and layouts.  |
Two-column hero image | A banner image and header text spanning two columns. The image, text, and background color can be updated.  |
Overlay hero image | A banner image with overlaid text. The image, text, and background color can be updated.  |
Image | A picture. The background color, alignment, height, and width can be changed.  |
Link button | A clickable button that redirects participants to your selected link. Button color is controlled by the Brand Color set at the Brand Container level.  |
Program explainer | A template explaining how an Advocate program works, like how to earn rewards. Includes two program explainer steps by default. More steps can be added. The color is controlled by the Brand Color set at the Brand Container level.  |
Program explainer step | Add descriptive text to explain part of your program. Fits within a program explainer component. The color is controlled by the Brand Color set at the Brand Container level.  |
Program timeline | Display an overview of the referral journey and rewards for your participants. Add or remove timeline entries as needed. The color of the circle icon and lines between entries is controlled by the Brand Color set at the Brand Container level.  |
Timeline entry | Fits within a program timeline component to show one step of the referral journey. The color of the circle icon and lines between entries is controlled by the Brand Color set at the Brand Container level.  |
User name display | Dynamically pulls in the participant’s full name. Defaults to “Anonymous User” if the participant has not entered a name.  |
Component | Description |
|---|---|
Task card feed | Task cards let your users perform actions or see progress toward Advocate program goals directly with the widget or microsite. This component adds multiple task cards to your widget or microsite. The button color is controlled by the Brand Color set at the Brand Container level.  |
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. Can include manual rewards and/or rewards earned across multiple Advocate programs.  |
Reward table customer note column | Add another note column to the reward table. Must be placed within the Reward table component.  |
Reward table date column | Add another date column to the reward table. Must be placed within the Reward table component.  |
Reward table reward column | Add another reward column to the reward table. Must be placed within the Reward table component.  |
Reward table source column | Add another source column to the reward table. Must be placed within the Reward table component.  |
Reward table status column | Add another status column to the reward table. Must be placed within the Reward table component.  |
One time task card | A task card with a call-to-action button. The task card is linked to one program goal. The button color is controlled by the Brand Color set at the Brand Container level. 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. The button color is controlled by the Brand Color set at the Brand Container level. 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. The button color is controlled by the Brand Color set at the Brand Container level.  |
Microsite components are primarily used for your microsite’s registration form and navigation sidebar. These components cannot be added to program widgets.
Component | Description |
|---|---|
Form checkbox field | Add a checkbox to the registration form. You can map whether the box was checked to a custom field on the Advocate participant. Read View Your Microsite Registration Form Submissions for more information.  |
Form dropbox field | Add a dropdown list with customizable list items to the registration form. You can map the user's selected list item to a custom field on the Advocate participant. Contact Support for assistance with this.  |
Form input field | Add a free-form text input field to the registration form. You can map the user's inputted text to a custom field on the Advocate participant. Contact Support for assistance with this.  |
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. Can only be placed with the microsite’s Logged In Layout.  |
Form password field | Add a fillable password field to the registration form.  |
Instant Access components make it quick and easy for referred friends to sign up or redeem rewards without going through the standard registration process. They are ideal for programs using instant access referral widgets or friend registration flows.
Component | Description |
|---|---|
Coupon code | Display a redeemable code for a Fuel Tank reward. The rewards fuel tank must have available coupon codes for this component to work as intended.  |
Instant access registration | Allow new Advocates to enter their email address to register and make referrals. After entering their email address, users will be taken to a second screen where they can access their referral sharelinks. 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. After entering their email address, users will be taken to a second screen where they can access their Coupon Code reward. Used for the instant access Friend 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 featuring two columns of content.  |
Row layout container | Add a new row container for content. Other components can be placed within the row.  |
Column layout container | Add a new column container for content. 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 and content. Has three tabs by default, but tabs can be removed or added as needed.  |
Titled section | Add a new section that contains a heading and paragraph text. Other components can be added to the Titled section under the heading.  |
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 in Advocate programs that reward Points. All reward unit Points count as long as they aren't pending or canceled. This leaderboard type is only valid for the Point reward type.  |
Anonymous leaderboard | A completely anonymized version of the leaderboard which does not display any personally identifying information about other program participants. Can display any leaderboard type.  |
This feature is only accessible to specific impact.com editions or add-ons. Contact us to upgrade your account and get access!Tax and cash components let you incorporate tax form collection and cash payout options in your verified access widget or microsite.
This component group is only available if the cash payouts feature has been turned on for your account.
Component | Description |
|---|---|
Payout status alert | Alert the participant of actions they need to take before they can receive a cash payout. The component includes a call-to-action button that takes the participant to review their payout settings. Optionally, customize any of the text descriptions the participant will see when they view the component.  |
Tax and cash multistep form | Insert a form that collects participants' banking information and any applicable tax forms, like a W-8 or W-9. Optionally, customize any of the text descriptions the participant will see when they view the form.  |
Referral components display information about the participant’s referred friends and their conversion status. They make it easy for participants to track who they’ve referred, when conversions happened, and any rewards earned from those referrals.
Component | Description |
|---|---|
Referral card | Pre-formatted component block that includes program timeline, share link, and Facebook, LinkedIn, and Twitter / X share button components. Can add or remove other components as needed.  |
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. Must be placed within the Referral table component.  |
Referral table rewards column | Add another rewards column to the referral table. Must be placed within the Referral table component.  |
Referral table status column | Add another status column to the referral table. Must be placed within the Referral table component.  |
Referral table user column | Add another customer (referred friend) column to the referral table. Must be placed within the Referral table component.  |
Sharing components give participants convenient ways to promote their referral links and codes across multiple channels. When a participant clicks a sharing button, it opens the chosen channel, such as Facebook, LinkedIn, WhatsApp, or email, with a pre-filled message or link, ready to send.
Some components, like Referral Code, display the participant’s individual referral or promo code along with a copy-to-clipboard option for quick sharing. Others, like Promo Codes, present multiple available codes (if allocated) in a slider view, and include sharing buttons so participants can instantly post or send the selected code. These tools make it simple for participants to spread the word and drive new referrals.
Component | Description |
|---|---|
Referral Code | Display a referral code field with a copy to clipboard option. Used as part of the Promo Codes functionality.  |
Promo Codes | Pre-formatted component block that includes referral promo code field with slider to toggle between various codes if more than one has been allocated. It also includes a share link, and Facebook, LinkedIn, and Twitter / X share button components.  |
Facebook share button | Display a Share on Facebook button with customizable text. When clicked, the button will redirect to a new post on the user's Facebook profile with the brand's Social Messaging pre-loaded.  |
Twitter / X share button | Display a Share via Twitter / X button with customizable text. When clicked, the button will redirect to a new post on the user's X account with the brand's Social Messaging pre-loaded.  |
Email share button | Display a Share via Email button with customizable text. When clicked, the button will open the user's default email application and start a new email with the brand's Social Messaging pre-loaded.  |
Web share sheet share button | Display a button to share within the participant’s web browser. When clicked, the button will open a menu listing all available apps the user can open to share their link. When an app is selected, a new post or message will be created with the brand's Social Messaging pre-loaded.  |
LinkedIn share button | Display a Share on LinkedIn button with customizable text. When clicked, the button will redirect to a new post on the user's LinkedIn profile with the brand's Social Messaging pre-loaded.  |
SMS share button | Display a Text a friend button with customizable text. When clicked, the button will redirect to the user's default SMS/text messaging app, and a new SMS/text message will be created with the brand's Social Messaging pre-loaded.  |
Facebook Messenger share button | Display a Share via Messenger button with customizable text. When clicked, the button will redirect to a new message on the user's Facebook Messenger app with the brand's Social Messaging pre-loaded.  |
WhatsApp share button | Display a Share via WhatsApp button with customizable text. When clicked, the button will redirect to a new message on the user's Whatsapp account with the brand's Social Messaging pre-loaded.  |
Line Messenger share button | Display a Share via Line Messenger button with customizable text. When clicked, the button will redirect to a new message on the user's Line Messenger app with the brand's Social Messaging pre-loaded.  |
Pinterest share button | Display a Share on Pinterest button with customizable text. When clicked, the button will redirect to a new post on the user's Pinterest profile with the brand's Social Messaging pre-loaded.  |
Share code | Display the participant’s share code for this program.  |
Share link | Display the participant’s share link for this program.  |
QR Code | Display the participant’s share link in the form of a QR code for this program.  |
Widget Verification components are used to enable Cash Payouts on a Verified Access Widget. These components are not compatible with the instant access Website Referral and Friend Widgets.
Component | Description |
|---|---|
Widget Verification Flow | Lets users verify their account details before setting up their banking information to receive cash payments. Users can enter their email address to receive a verification code. Only for use in the Verified Access Widget for brands using Cash Payouts.  |
Widget Verification Controller | Lets users verify their account details before setting up their banking information to receive cash payments. Users can enter their email address to receive a verification code. Automatically displays the Tax and cash multistep component when verification is complete. Only for use in the Verified Access Widget for brands using Cash Payouts. |
Advanced components give you more control over what participants see and when they see it. They allow conditional display of content, program overrides, and other specialized configurations that help tailor the experience for specific audiences.
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. Users within the set segment will see all content displayed in the conditional section, while users not in the segment will not see the content.  |
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 name and value, open the component’s properties and edit the JSONata expression in the Condition field. Users with the correct custom field value will see all content displayed in the conditional section, while users without the correct custom field value will not see the content. |
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. Included by default in most widget and microsite templates. |