# Widget & Microsite Components Explained

<a href="https://pxa.impact.com/student/activity/2359603?sid=0c0e3e5c-54c9-4435-9bee-ebcdccb7f292&#x26;sid_i=0?utm_source=app.impact.com&#x26;utm_medium=owned-platform&#x26;utm_content=&#x26;utm_campaign=help-center" class="button primary">Take the PXA course</a>

{% hint style="success" %}
**Limited**: Components, apart from the ones provided in the given templates, are only available to certain product editions or add ons. If you’d like more granular control over which components your microsites use, contact us to upgrade your program.
{% endhint %}

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](https://help.impact.com/brand/advocate-program/manage-advocate-participant-experiences/introduction-to-participant-experiences) 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. You can also preview your component states within the editor interface.

<details>

<summary>Statistics</summary>

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](https://help.impact.com/brand/advocate-program/manage-advocate-participant-experiences/widget-and-microsite-statistics-explained).

| Component                  | Description                                                                                                                                                                                                                                                                                                                                                                                                                                          |
| -------------------------- | ---------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- |
| Points Balance             | <p>Shows the participant’s Points balance. Used in Advocate programs that reward participants with points.</p><p><img src="https://4048883401-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FwMLlMoFBtKJa8ptd3zaw%2Fuploads%2Fgit-blob-ff7233d6a49bcc71a20dc6cfb3bf75ee62364ff4%2Fe1d9aac51361456cf34386eb5b5617d320af8f5087f2d38e3e3b25ff04f6efc4.png?alt=media" alt="" data-size="original"></p>                              |
| GiftCards Earned           | <p>Shows a count of gift card rewards earned by the Advocate.</p><p><img src="https://4048883401-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FwMLlMoFBtKJa8ptd3zaw%2Fuploads%2Fgit-blob-51c634a017ce4206b9e6412627708952b5768a3c%2F7ad00a45ca02abc61aa2883c4303e43a878e9702e3410bb5a6eedcb46d8100e4.png?alt=media" alt="" data-size="original"></p>                                                                           |
| Referrals                  | <p>Displays how many referrals the participant has made. Includes started and converted referrals.</p><p><img src="https://4048883401-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FwMLlMoFBtKJa8ptd3zaw%2Fuploads%2Fgit-blob-c5433d26e89df79a0006bc70d66c7f136c8c4de9%2F40d8d181ce9bfcf7ca597db86ffddaf517b98fdcd65270945bcdef43faeccd2d.png?alt=media" alt="" data-size="original"></p>                                      |
| Container with Three Stats | <p>A template with space for three statistics. The statistics displayed can be changed. Statistics and be added and removed as desired.</p><p><img src="https://4048883401-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FwMLlMoFBtKJa8ptd3zaw%2Fuploads%2Fgit-blob-eb3c3041a0cabee4b4be38ed5160f4baa660ba92%2F8526311212dbbab7ee4417e937d156eb481f6feb7a254b4c3e84d21c814d00c9.png?alt=media" alt="" data-size="original"></p> |
| Other Stat                 | Displays a stat of your choice. You can select between a referral stat, various reward stats or build a custom stat.                                                                                                                                                                                                                                                                                                                                 |

</details>

<details>

<summary>Common Components</summary>

*Common 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                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                        |
| ---------------------- | ------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------ |
| Two Column Hero Image  | <p>A banner image and header text spanning two columns. The image, text, and background color can be updated.</p><p><img src="https://4048883401-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FwMLlMoFBtKJa8ptd3zaw%2Fuploads%2Fgit-blob-112e3e854f2ec884d09dcbf3c3a0dd91132b8065%2F0d6b6b7a5f3894b815b738a15afb7bd08e1ee77413858922235268a0119f528d.png?alt=media" alt="" data-size="original"></p>                                                                                                                                         |
| Overlay Hero Image     | <p>A banner image with overlaid text. The image, text, and background color can be updated.</p><p><img src="https://4048883401-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FwMLlMoFBtKJa8ptd3zaw%2Fuploads%2Fgit-blob-def9dab1f6744d99f704005955522c5cae8f7ca1%2F1c8f53dc5117ebce1719f58d4974f97d4cb9fdddaa0a6d8741277d00139a5178.png?alt=media" alt="" data-size="original"></p>                                                                                                                                                           |
| Image                  | <p>A picture. The background color, alignment, height, and width can be changed.</p><p><img src="https://4048883401-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FwMLlMoFBtKJa8ptd3zaw%2Fuploads%2Fgit-blob-e9f631d5fae5baef21e495c18995bcc41931ff86%2Fe0c44f0accab2819658563d03164459fb470eedf4929c402138476b2eb8afa36.png?alt=media" alt="" data-size="original"></p>                                                                                                                                                                      |
| Link Button            | <p>A clickable button that redirects participants to your selected link. Button color is controlled by the Brand Color set at the Brand Container level.</p><p><img src="https://4048883401-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FwMLlMoFBtKJa8ptd3zaw%2Fuploads%2Fgit-blob-875e756c5a4d4a79e4b62187ff8acb00da68f51d%2Fc0ebb75eb41b33f85ab7695f287a373730909122d616a7c19fd4bdd0675c8787.png?alt=media" alt="" data-size="original"></p>                                                                                              |
| Program Explainer      | <p>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.</p><p><img src="https://4048883401-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FwMLlMoFBtKJa8ptd3zaw%2Fuploads%2Fgit-blob-ccd03061b907a18c914385b9fbdfcc1c54dfdd7e%2Fd7a265c23d586b3a6bcd9198cbee8eea2fedda9817794a468f309717081e72c0.png?alt=media" alt="" data-size="original"></p>              |
| Program Explainer Step | <p>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.</p><p><img src="https://4048883401-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FwMLlMoFBtKJa8ptd3zaw%2Fuploads%2Fgit-blob-abf1a9d883d813187d2013fc7c8cd815639c0351%2Fba66c3ec6beb608ff42bb2cbb3757c5e98ad4e1946809fee380b0069cee8677a.png?alt=media" alt="" data-size="original"></p>                                                                      |
| Program Timeline       | <p>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.</p><p><img src="https://4048883401-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FwMLlMoFBtKJa8ptd3zaw%2Fuploads%2Fgit-blob-ad4d74aab6ba3e437ed0b5c2ba350e95e584491c%2Fecfa298fa0a457c5061fc7de31fa195868d524d0905ba16cf512470cb6a9de33.png?alt=media" alt="" data-size="original"></p> |
| Timeline Entry         | <p>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.</p><p><img src="https://4048883401-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FwMLlMoFBtKJa8ptd3zaw%2Fuploads%2Fgit-blob-0d702f85b541b49847a0131fa6094cf37d45b95b%2F6cce8eebc7410fd43031702177f3fa6450cb172e8d420a31b7041ccc926011be.png?alt=media" alt="" data-size="original"></p>                                       |
| User Name Display      | <p>Dynamically pulls in the participant’s full name. Defaults to “Anonymous User” if the participant has not entered a name.</p><p><img src="https://4048883401-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FwMLlMoFBtKJa8ptd3zaw%2Fuploads%2Fgit-blob-454b0c94d3cdf37d3bec1f9feb38efa895ce21d4%2F333618f77b6dee4e26c899eb87962d2769ebbc161da05a90aadb3a5f2b59c3cf.png?alt=media" alt="" data-size="original"></p>                                                                                                                          |

</details>

<details>

<summary>Rewards</summary>

{% hint style="info" %}
**Note:** *Reward* components can only be used for verified access widgets and microsites.
{% endhint %}

| Component            | Description                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                             |
| -------------------- | ------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- |
| Task Card Feed       | <p>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.</p><p><img src="https://4048883401-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FwMLlMoFBtKJa8ptd3zaw%2Fuploads%2Fgit-blob-d1742cb883be61d63192bcb218ab5d53757e9e82%2Fe992aa7cf1f554169c1e60d351739a9bd8990ad01c4c29bf1deb2d971e07c8c4.png?alt=media" alt="" data-size="original"></p> |
| Reward Exchange      | <p>Allow participants to exchange earned rewards for another type of reward.</p><p>You must have <a href="../advocate-rewards/reward-exchange-explained">Reward Exchange</a> set up to use this feature.</p><p><img src="https://4048883401-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FwMLlMoFBtKJa8ptd3zaw%2Fuploads%2Fgit-blob-bbfbff1ec1b5d7b899ab55217f300e5bdf820502%2F914a34e427693bf936d3363a8075046dd25ef3de091552fc7de4cb82e00b3d7b.png?alt=media" alt="" data-size="original"></p>                                                                                   |
| Reward Table         | <p>Display a list of rewards the participant has earned. Can include manual rewards and/or rewards earned across multiple Advocate programs.</p><p><img src="https://4048883401-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FwMLlMoFBtKJa8ptd3zaw%2Fuploads%2Fgit-blob-5b4272b710f08544f2091db011583b6300278788%2Facbbaa66b154eaf370ec5457fd9e77b39272a679f7a9c67b17383c5530362f92.png?alt=media" alt="" data-size="original"></p>                                                                                                                                               |
| Customer Note Column | <p>Add another note column to the reward table. Must be placed within the Reward table component.</p><p><img src="https://4048883401-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FwMLlMoFBtKJa8ptd3zaw%2Fuploads%2Fgit-blob-49a7a7000c4e43d73944d65d9268d049ce733f22%2F4bb3b31be09584ce982c27d57b373dc3ba807de9f29be528bab2361ae68d8c8e.png?alt=media" alt="" data-size="original"></p>                                                                                                                                                                                          |
| Date Column          | <p>Add another date column to the reward table. Must be placed within the Reward table component.</p><p><img src="https://4048883401-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FwMLlMoFBtKJa8ptd3zaw%2Fuploads%2Fgit-blob-9f1dabcef083a77ff77adb59d8d2877821b52e6c%2Fe36fb74a08d833bfbb0ebae4b1ef3ba7b49018b00c9cf835c75f1a6a73f3df9f.png?alt=media" alt="" data-size="original"></p>                                                                                                                                                                                          |
| Reward Column        | <p>Add another reward column to the reward table. Must be placed within the Reward table component.</p><p><img src="https://4048883401-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FwMLlMoFBtKJa8ptd3zaw%2Fuploads%2Fgit-blob-e64ef4645152bb65dd8c3e0ad3b8bee76f930f16%2Fd32357695c9503d7751f493e28b36d9bd8ee1af725556d43a072b2dbc2d1e9f0.png?alt=media" alt="" data-size="original"></p>                                                                                                                                                                                        |
| Source Column        | <p>Add another source column to the reward table. Must be placed within the Reward table component.</p><p><img src="https://4048883401-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FwMLlMoFBtKJa8ptd3zaw%2Fuploads%2Fgit-blob-e22f21797957227a12deafc7384625cf77154c01%2F57891cdf76885a886769e0fa768567c48e36f38c00a0e72e25ca640a21e6c92e.png?alt=media" alt="" data-size="original"></p>                                                                                                                                                                                        |
| Status Column        | <p>Add another status column to the reward table. Must be placed within the Reward table component.</p><p><img src="https://4048883401-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FwMLlMoFBtKJa8ptd3zaw%2Fuploads%2Fgit-blob-10a40c5e3746406038e4e8bac76d9fffabfa2733%2F73173dd2ce38046c737485ea1c0123f1d51c18195c684f59ab776aac9f6f76b9.png?alt=media" alt="" data-size="original"></p>                                                                                                                                                                                        |

</details>

<details>

<summary>Microsite Components</summary>

*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 | <p>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.</p><p><img src="https://4048883401-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FwMLlMoFBtKJa8ptd3zaw%2Fuploads%2Fgit-blob-b755fcb2cb0a2a4332d334c5d4df9750abc74535%2Fbe707549d5ab3386580210dadc39c277a8221a2294690f6f5098f8fa49e91dad.png?alt=media" alt="" data-size="original"></p>                                                               |
| Form Dropdown Field | <p>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.</p><p><img src="https://4048883401-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FwMLlMoFBtKJa8ptd3zaw%2Fuploads%2Fgit-blob-d4d06463b739d6320cca385d51aef2ebb21a06e9%2Fbcfe9233e8daa3f5cdd4213fc80fb2a8ecef610eecaed1be02e99d4939ff14e5.png?alt=media" alt="" data-size="original"></p>                                                              |
| Form Input Field    | <p>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. <a href="https://app.impact.com/support/portal.ihtml?createTicket=true&#x26;">Contact support</a> for assistance with this.</p><p><img src="https://4048883401-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FwMLlMoFBtKJa8ptd3zaw%2Fuploads%2Fgit-blob-22dbac6584da989b0190425decc62f668a813320%2F9324f8dd94e41ba973d7753c410bbd020e8d61f060652fcabbd14482b4d242c5.png?alt=media" alt="" data-size="original"></p> |
| Form Name Fields    | <p>Add fillable First Name and Last Name fields to the registration form.</p><p><img src="https://4048883401-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FwMLlMoFBtKJa8ptd3zaw%2Fuploads%2Fgit-blob-f516e369b49dd1fa5220e0eb0fd5a8a5e13715cc%2Ff86f4e367584f563904db00af1e76cdad40c92a4b2694146b5b755a017e76886.png?alt=media" alt="" data-size="original"></p>                                                                                                                                                                                                     |
| Sidebar Item        | <p>Add a new page or link to your microsite’s sidebar navigation. Can only be placed with the microsite’s Logged In Layout.</p><p><img src="https://4048883401-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FwMLlMoFBtKJa8ptd3zaw%2Fuploads%2Fgit-blob-22080a0fa46172389a9f84eb1f5b915a9cb9bd53%2F927e9d1ef0ec4a6d3c1797199be78426ffcbaf84e4007288b303eee91d005e3d.png?alt=media" alt="" data-size="original"></p>                                                                                                                                                   |
| Form Password Field | <p>Add a fillable password field to the registration form.</p><p><img src="https://4048883401-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FwMLlMoFBtKJa8ptd3zaw%2Fuploads%2Fgit-blob-d11ad739227f7ef4d5ef2155131766cef7bfe569%2Fc09a224e7a38863ef546d342ef93fac272cfde0e95b47c6e99c73302159aece9.png?alt=media" alt="" data-size="original"></p>                                                                                                                                                                                                                    |

</details>

<details>

<summary>Instant Access</summary>

*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           | <p>Display a redeemable code for a Fuel Tank reward.</p><p>The <a href="../advocate-rewards/fuel-tank-rewards-explained">rewards fuel tank</a> must have available coupon codes for this component to work as intended.</p><p><img src="https://4048883401-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FwMLlMoFBtKJa8ptd3zaw%2Fuploads%2Fgit-blob-b6751473ff9a89ec2635661cbefd69fe20e2606c%2Fdc86a733cfb70c7df0a19df89b1dd5c9bbc57d5e0ff52bb5278be069d9543ed6.png?alt=media" alt="" data-size="original"></p>                                              |
| Advocate Registration | <p>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.</p><p><img src="https://4048883401-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FwMLlMoFBtKJa8ptd3zaw%2Fuploads%2Fgit-blob-848bf4497a7280a28c48b76e0031a7cabd2702d1%2Fcb04ab4a85a9c132631ae16c6f15215af60c9f5355ab77de58469379dc65e0a9.png?alt=media" alt="" data-size="original"></p> |
| Sign out current user | <p>Allow the viewer to exit the personalized instant access display.</p><p><img src="https://4048883401-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FwMLlMoFBtKJa8ptd3zaw%2Fuploads%2Fgit-blob-0a4b2367a12e92611062ba6b3385739c3f25f195%2Fcf128314c155054d77102dafd71a5e5082975ee8851b79b718d105095f498eef.png?alt=media" alt="" data-size="original"></p>                                                                                                                                                                                                 |
| Friend Registration   | <p>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.</p><p><img src="https://4048883401-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FwMLlMoFBtKJa8ptd3zaw%2Fuploads%2Fgit-blob-848bf4497a7280a28c48b76e0031a7cabd2702d1%2Fcb04ab4a85a9c132631ae16c6f15215af60c9f5355ab77de58469379dc65e0a9.png?alt=media" alt="" data-size="original"></p>                            |

</details>

<details>

<summary>Layout</summary>

*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  | <p>Add a hero layout featuring two columns of content.</p><p><img src="https://4048883401-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FwMLlMoFBtKJa8ptd3zaw%2Fuploads%2Fgit-blob-90fbc0943f7a9bf20af2a8ef5224fe307b4cd447%2Fe9d5fb3e534e6d42f93128e7f52c08f21cefd7f0c378c1f6e72877b5fbfe8703.png?alt=media" alt="" data-size="original"></p>                                                                                               |
| Row Layout Container    | <p>Add a new row container for content. Other components can be placed within the row.</p><p><img src="https://4048883401-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FwMLlMoFBtKJa8ptd3zaw%2Fuploads%2Fgit-blob-c6a50f4ca39b0fa9df127beda85b8fda790dbd1c%2F792b42fe4a633f3b3950954d520b5f5d8e7bce7c15d0d6ce14cc041c0244ea3c.png?alt=media" alt="" data-size="original"></p>                                                               |
| Column Layout Container | <p>Add a new column container for content. Other components can be placed within the column.</p><p><img src="https://4048883401-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FwMLlMoFBtKJa8ptd3zaw%2Fuploads%2Fgit-blob-c6a50f4ca39b0fa9df127beda85b8fda790dbd1c%2F792b42fe4a633f3b3950954d520b5f5d8e7bce7c15d0d6ce14cc041c0244ea3c.png?alt=media" alt="" data-size="original"></p>                                                         |
| Tab                     | <p>Add a new tab to a generic tab group.</p><p><img src="https://4048883401-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FwMLlMoFBtKJa8ptd3zaw%2Fuploads%2Fgit-blob-bf80a7b35daafb8849d2fabb0acac194eb8de4ae%2F5517db3bff5c64677ef351b5ec94ce32336e728877cca2b5614cdc719bbdd087.png?alt=media" alt="" data-size="original"></p>                                                                                                             |
| Generic Tab Group       | <p>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.</p><p><img src="https://4048883401-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FwMLlMoFBtKJa8ptd3zaw%2Fuploads%2Fgit-blob-f38bb2abbd959f6de3dd3057279bef72b167bd7a%2F6d51c82449438758a0d7e7c667b4e41e8b1ba274f5f32206ea0a934ef967349b.png?alt=media" alt="" data-size="original"></p> |
| Tilted Section          | <p>Add a new section that contains a heading and paragraph text. Other components can be added to the Titled section under the heading.</p><p><img src="https://4048883401-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FwMLlMoFBtKJa8ptd3zaw%2Fuploads%2Fgit-blob-d2e2627c0305da170e459293404b3a7a32bbdd57%2Fd5c2b7ee84117e3804a0afe8d99c1681b0c370c578620d960f2cd780b1b034f9.png?alt=media" alt="" data-size="original"></p>              |

</details>

<details>

<summary>Invoices</summary>

*Invoice* components allow you to insert invoice components to view earnings data.

| Component                 | Description                                                                                                                                                                                                                                                                                                                                                                    |
| ------------------------- | ------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------ |
| Invoice Table             | <p>Add an expandable invoice accordion that houses earnings data.</p><p><img src="https://4048883401-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FwMLlMoFBtKJa8ptd3zaw%2Fuploads%2Fgit-blob-4c505a7531266547be4dd870343a448fbe506af7%2F987ceee7ddf4cf17d9cc5978b505139e06c16cab3e44c221d7374f65e563fa19.jpg?alt=media" alt="" data-size="original"></p> |
| Invoice Table Date Column | <p>Add a new column to your invoice table component.</p><p><img src="https://4048883401-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FwMLlMoFBtKJa8ptd3zaw%2Fuploads%2Fgit-blob-fb42d6e770406c2e2cc06864b1aaf1d129d7df72%2F48530b7fb857185f3571f592166d3b8f937e5a2f84e6d8b0387c6b63c2e382de.png?alt=media" alt="" data-size="original"></p>              |

</details>

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](https://help.impact.com/brand/advocate-program/manage-advocate-participant-experiences/widget-experiences/widget-types-explained) or [microsite](https://help.impact.com/brand/advocate-program/manage-advocate-participant-experiences/microsite-experiences/microsites-overview), and configure the scoring system, ranking system, and participant filtering options. See the articles below for more information:

* [Leaderboards Explained](https://help.impact.com/brand/advocate-program/manage-advocate-participant-experiences/leaderboards-explained)
* [Set Up a Leaderboard](https://help.impact.com/brand/advocate-program/manage-advocate-participant-experiences/set-up-a-leaderboard)

| Component             | Description                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                  |
| --------------------- | -------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- |
| Referral Started      | <p>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.</p><p><img src="https://4048883401-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FwMLlMoFBtKJa8ptd3zaw%2Fuploads%2Fgit-blob-347d66dfe033a6dcf0e6d487801fbab053997704%2Fc4df3139983a0454f0cca11c832c8870fea8cf861c651210e437d2ee148ee757.png?alt=media" alt="" data-size="original"></p>                                                                                                                                            |
| Referral Converted    | <p>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.</p><p><img src="https://4048883401-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FwMLlMoFBtKJa8ptd3zaw%2Fuploads%2Fgit-blob-347d66dfe033a6dcf0e6d487801fbab053997704%2Fc4df3139983a0454f0cca11c832c8870fea8cf861c651210e437d2ee148ee757.png?alt=media" alt="" data-size="original"></p> |
| Points Earned         | <p>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.</p><p><img src="https://4048883401-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FwMLlMoFBtKJa8ptd3zaw%2Fuploads%2Fgit-blob-c77ede4e082778754887872f948e6b8b0d188474%2F83ae9393fa0cb1e9bc6f4dd53aa9d77e858bb40ef4e985a5247413950ff66729.png?alt=media" alt="" data-size="original"></p>                                                    |
| Anonymous Leaderboard | <p>A completely anonymized version of the leaderboard which does not display any personally identifying information about other program participants. Can display any leaderboard type.</p><p><img src="https://4048883401-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FwMLlMoFBtKJa8ptd3zaw%2Fuploads%2Fgit-blob-7de957636976c1d06b91c963c3bc6befffa789d8%2Fb04ceffabe2ed8007c96b0f932ebf06063fd5d3a4af2dec81b1fad443ee7d4b5.png?alt=media" alt="" data-size="original"></p>                                                                                                                                         |

<details>

<summary>Tax and Cash</summary>

{% hint style="success" %}
This feature is only accessible to specific impact.com editions or add-ons. [Contact us](https://app.impact.com/support/portal.ihtml?createTicket=true) to upgrade your account and get access.
{% endhint %}

*Tax and cash* components let you incorporate tax form collection and cash payout options in your [verified access widget](https://help.impact.com/brand/advocate-program/manage-advocate-participant-experiences/widget-experiences/widget-types-explained) or [microsite](https://help.impact.com/brand/advocate-program/manage-advocate-participant-experiences/microsite-experiences/microsites-overview).

This component group is only available if the [*cash payouts*](https://help.impact.com/brand/advocate-program/advocate-rewards/pay-with-cash/cash-payouts-for-advocate-explained) feature has been turned on for your account.

| Component                           | Description                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                          |
| ----------------------------------- | ------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------ |
| Payout Status Alert                 | <p>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.</p><p>Optionally, customize any of the text descriptions the participant will see when they view the component.</p><p><img src="https://4048883401-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FwMLlMoFBtKJa8ptd3zaw%2Fuploads%2Fgit-blob-4d9b5f8072ff2b0c78e1f173493cf4d2ddef9334%2F2c0be35e8e0bfbcb7d7b5e9b9ea30b1b794722e04336f566b033cc9850e1b486.png?alt=media" alt="" data-size="original"></p> |
| Microsite & Widget Cash Payout Form | <p>Insert a form that collects participants' banking information and any applicable tax forms, like a W-8 or W-9.</p><p>Optionally, customize any of the text descriptions the participant will see when they view the form.</p><p>You can also set verification alerts and requirements within this component.</p><p><img src="https://4048883401-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FwMLlMoFBtKJa8ptd3zaw%2Fuploads%2Fgit-blob-00fc2e186e360a8330580a3163c8016aae9c6ecc%2F270f47b47bd597f40b6a4253ce541ea0b53a552847e5efc71afeaa74fba1354b.png?alt=media" alt="" data-size="original"></p>         |

</details>

<details>

<summary>Sharing</summary>

*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             | <p>Display a referral code field with a copy to clipboard option. Used as part of the Promo Codes functionality.</p><p><img src="https://4048883401-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FwMLlMoFBtKJa8ptd3zaw%2Fuploads%2Fgit-blob-350b4cd5d21cca6714a3eadcac9b273250d1489b%2Fc765bebedb73ecdfcb67f14de17f261c9d55d4043cf4296025801350717df9ff.png?alt=media" alt="" data-size="original"></p>                                                                                                                                                                            |
| Promo Codes               | <p>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.</p><p><img src="https://4048883401-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FwMLlMoFBtKJa8ptd3zaw%2Fuploads%2Fgit-blob-3fd5339df311e321f51f058bbaa88ddfaf08d6bc%2Ffe4b15e28eecd25533da83c6417660b98eb94e8dd083040f5f847d1683a8f7b2.png?alt=media" alt="" data-size="original"></p>                                   |
| Facebook Share Button     | <p>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.</p><p><img src="https://4048883401-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FwMLlMoFBtKJa8ptd3zaw%2Fuploads%2Fgit-blob-ac40825644d43883701dfefcf84d0d237ed0c694%2Fe90f8748aff7c0bf33cba007cab091851f916f9dfb24ec228bc27634bca575fe.png?alt=media" alt="" data-size="original"></p>                                                                                             |
| X Share Button            | <p>Display a Share via 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.</p><p><img src="https://4048883401-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FwMLlMoFBtKJa8ptd3zaw%2Fuploads%2Fgit-blob-ce26efcd37d82f16d9f2d4d288f42b28e54bcb9b%2Fc4de3610b0ba8f1599ff74aa83740b07bf9d20a3ae09f33df7858dc15d8a82b2.png?alt=media" alt="" data-size="original"></p>                                                                                                          |
| Email Share Button        | <p>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.</p><p><img src="https://4048883401-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FwMLlMoFBtKJa8ptd3zaw%2Fuploads%2Fgit-blob-99cd491d8066557af00352c2161adbf0d1ff80d9%2F65667d26945a492f02467c4d6cd3d88f4501f029c3fa924ce20587ae6661fde1.png?alt=media" alt="" data-size="original"></p>                                                                                     |
| Mobile Share Sheet Button | <p>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.</p><p><img src="https://4048883401-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FwMLlMoFBtKJa8ptd3zaw%2Fuploads%2Fgit-blob-b0aefc7accad7dc192307b765172cba66908faeb%2Fbf216b95fbd48c0377b824b12708e0ca1f8e6e2a9c1660359e7e0bbc65725b09.png?alt=media" alt="" data-size="original"></p> |
| LinkedIn Share Button     | <p>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.</p><p><img src="https://4048883401-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FwMLlMoFBtKJa8ptd3zaw%2Fuploads%2Fgit-blob-2a776449d19fc08bb449a5f8351c7101075f1c74%2F2f76bd37890d40e8839f6cab5f0cb5a2b8b11d7bf5f9dfe02d48dad3a8d96cb1.png?alt=media" alt="" data-size="original"></p>                                                                                             |
| SMS Share Button          | <p>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.</p><p><img src="https://4048883401-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FwMLlMoFBtKJa8ptd3zaw%2Fuploads%2Fgit-blob-798893a05da61813dc9d1935d7008941222a8b90%2F3a3fc9c019417421b28b3a5514384cc6a02b25046b7703325aeefe2ed4ca902a.png?alt=media" alt="" data-size="original"></p>                                                     |
| Messenger Share Button    | <p>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.</p><p><img src="https://4048883401-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FwMLlMoFBtKJa8ptd3zaw%2Fuploads%2Fgit-blob-93f82656f6614d7f34071466b5d061b7c3d1d463%2F2b31207d2addc11e7d589fada9808712bfa21e218fde0aebcbd0bc989d18919d.png?alt=media" alt="" data-size="original"></p>                                                                                  |
| WhatsApp Share Button     | <p>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.</p><p><img src="https://4048883401-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FwMLlMoFBtKJa8ptd3zaw%2Fuploads%2Fgit-blob-e3b0d2368c1eaa1b37d41216636f85eee4c9e138%2Fb939f470eb31109551821fe0d22887a99ae81678872ff3241ddcfe2e382c5796.png?alt=media" alt="" data-size="original"></p>                                                                                         |
| LINE Share Button         | <p>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.</p><p><img src="https://4048883401-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FwMLlMoFBtKJa8ptd3zaw%2Fuploads%2Fgit-blob-0551e0947b75a319cd37b2fc5190f94aa7ac3275%2Fc9b7ee44e3f60422f7f0c1314fd669569eac6da0c1f4cdfe8baa7733f704b67b.png?alt=media" alt="" data-size="original"></p>                                                                                 |
| Pinterest Share Button    | <p>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.</p><p><img src="https://4048883401-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FwMLlMoFBtKJa8ptd3zaw%2Fuploads%2Fgit-blob-6c91830cc012ce3ddbdd99a80c2ab4808e27eb14%2F32f7f7814c6be91a947add2d5d7f0bb5b375a16f212313a18774e79dfa562374.png?alt=media" alt="" data-size="original"></p>                                                                                           |
| Share Link                | <p>Display the participant’s share link for this program.</p><p><img src="https://4048883401-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FwMLlMoFBtKJa8ptd3zaw%2Fuploads%2Fgit-blob-a7096d63847a389d28ffebcc71d0883ed90cc525%2F2eb89dd61c2c37dbc09f4a4d765b980826a5a3f755bad93880e9fb9248593db6.png?alt=media" alt="" data-size="original"></p>                                                                                                                                                                                                                                   |
| QR Code                   | <p>Display the participant’s share link in the form of a QR code for this program.</p><p><img src="https://4048883401-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FwMLlMoFBtKJa8ptd3zaw%2Fuploads%2Fgit-blob-1aa383efd76c4268b71ab2118635a650a5dca9b3%2Fb575c24753eb2779431f9a9bfe56e84abd836992751052ea5d6b58b54a2fd964.png?alt=media" alt="" data-size="original"></p>                                                                                                                                                                                                          |

</details>

<details>

<summary>Referrals</summary>

*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                 | <p>Pre-formatted component block that includes <em>program timeline</em>, <em>share link</em>, and <em>Facebook</em>, <em>LinkedIn,</em> and <em>Twitter / X</em> share button components. Can add or remove other components as needed.</p><p><img src="https://4048883401-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FwMLlMoFBtKJa8ptd3zaw%2Fuploads%2Fgit-blob-f756a1f54cf83ab690539ad68993287112cce6c0%2F8f6c3feabc2b64c582ba9c730c7813b993ead61741d6b21490dd04cc1a92c766.png?alt=media" alt="" data-size="original"></p> |
| Referral Table                | <p>Display a table showing the participant’s referred friends, conversion date, and conversion status.</p><p><img src="https://4048883401-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FwMLlMoFBtKJa8ptd3zaw%2Fuploads%2Fgit-blob-ce55181b973b561145f087c8112c6008d71daac2%2F14f8e870dfa6c7bf6ab3d1d1fc0ccdc296b2e0b654b72d9b955d7e658fcce1a3.png?alt=media" alt="" data-size="original"></p>                                                                                                                                   |
| Referral Table Date Column    | <p>Add another date column to the referral table. Must be placed within the Referral table component.</p><p><img src="https://4048883401-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FwMLlMoFBtKJa8ptd3zaw%2Fuploads%2Fgit-blob-8992234a958c425bfc53bf938cd323162d62d857%2Fd33d6f5ef933f7df85c392f6733973cafe2b798ea1798628f55b67f201cb0734.png?alt=media" alt="" data-size="original"></p>                                                                                                                                    |
| Referral Table Rewards Column | <p>Add another rewards column to the referral table. Must be placed within the Referral table component.</p><p><img src="https://4048883401-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FwMLlMoFBtKJa8ptd3zaw%2Fuploads%2Fgit-blob-ef97eededbc5f92ec490dcab90fd10fb97170671%2F12c9225c7808b735b15b3534fd04a4ffbb7556b6fdc457a942f3ffb76456ba69.png?alt=media" alt="" data-size="original"></p>                                                                                                                                 |
| Referral Table Status Column  | <p>Add another status column to the referral table. Must be placed within the Referral table component.</p><p><img src="https://4048883401-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FwMLlMoFBtKJa8ptd3zaw%2Fuploads%2Fgit-blob-e3440cacb4114c9d370932773b6d92b971729d75%2F1cbe3630384c042632077d3cf87577401eaa02496651fbf90e6e4dba9f62a5aa.png?alt=media" alt="" data-size="original"></p>                                                                                                                                  |
| Referral Table User Column    | <p>Add another customer (referred friend) column to the referral table. Must be placed within the Referral table component.</p><p><img src="https://4048883401-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FwMLlMoFBtKJa8ptd3zaw%2Fuploads%2Fgit-blob-07c39fcbf12ca844c00d89c7e423190d5e7ee38e%2F2e6b9f6c02a9670ddd7b2bf8fc050f6a8776851c6eac94b794c42d3aa33ed2f8.png?alt=media" alt="" data-size="original"></p>                                                                                                              |

</details>

<details>

<summary>Advanced</summary>

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 Area / Segment | <p>Display content in this section only when the participant belongs to a certain <a href="../manage-advocate-participants/manage-advocate-user-segments">user segment</a>.</p><p>To set the user segment, open the component’s properties and edit the JSONata expression in the <em>Condition</em> field.</p><p>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.</p><p><img src="https://4048883401-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FwMLlMoFBtKJa8ptd3zaw%2Fuploads%2Fgit-blob-2fe790e8458995641bd60d7f1efc8f81a0c5598e%2Fbb4c121de32787e766f9d5930e0e34f0ce2637ab3a1dfc6aa5fb7bf7bb4bd0d5.png?alt=media" alt="" data-size="original"></p>                                                                                                        |
| Conditional Area / Field   | <p>Display content in this section only when a <a href="../manage-advocate-participants/custom-and-calculated-fields/custom-fields-for-advocate-explained">custom field</a> on the participant’s profile contains a certain value.</p><p>To set the custom field name and value, open the component’s properties and edit the JSONata expression in the <em>Condition</em> field.</p><p>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.</p><p><img src="https://4048883401-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FwMLlMoFBtKJa8ptd3zaw%2Fuploads%2Fgit-blob-2fe790e8458995641bd60d7f1efc8f81a0c5598e%2Fbb4c121de32787e766f9d5930e0e34f0ce2637ab3a1dfc6aa5fb7bf7bb4bd0d5.png?alt=media" alt="" data-size="original"></p> |
| Program Section            | <p>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.</p><p><img src="https://4048883401-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FwMLlMoFBtKJa8ptd3zaw%2Fuploads%2Fgit-blob-2fe790e8458995641bd60d7f1efc8f81a0c5598e%2Fbb4c121de32787e766f9d5930e0e34f0ce2637ab3a1dfc6aa5fb7bf7bb4bd0d5.png?alt=media" alt="" data-size="original"></p>                                                                                                                                                                                                                                                                                                                              |

</details>

<details>

<summary>Typography</summary>

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

* Paragraph
* Heading 1
* Heading 2
* Heading 3
* Heading 4

  <div data-with-frame="true"><figure><img src="https://4048883401-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FwMLlMoFBtKJa8ptd3zaw%2Fuploads%2Fgit-blob-a21333a42165afd0b94699beb820ce6f01d4967b%2F98486fd03f5278fcc0128c28d9b9c6a7a62508a7f08c0db73e8d274a1198d0e0.jpg?alt=media" alt="" width="208"><figcaption></figcaption></figure></div>

</details>
