Participant Experiences

🔗 Overview

As part of our widget editing experience, we provide out-of-the-box templates that are powered by our component packages. These templates are built with our mint component library, which features our latest components, or our vanilla component library, which powers our original referral experience. We also provide a bedrock component library with advanced components to add logic to your widgets.

🔗 Mint Components

SaaSquatch’s mint components is a minimal component library that powers the latest Referral and loyalty, Referral only, and Loyalty only experiences. Widgets built with mint components provide participants with SaaSquatch’s latest experiences.

Mint components offer greater customization than vanilla components, our basic component package. The mint components package comes with over twice the amount of UI elements than vanilla components. This includes updated versions of vanilla components plus brand new components. This library provides all the elements needed to add the following features into your widget:

• Referrals (including share mediums, referral history, and components to explain your program)
• Loyalty (including task cards and reward history)
• Reward exchange
• Leaderboards

Note: Reward exchange and leaderboards only available on select plans. Refer to our Pricing & Plans for more information.

🔗 Templates

We offer three templates built with mint components. Each template comes with a set of pre-configured components that can be added, removed, and customized to fit your program.

🔗 Referral and loyalty widget

This widget combines both referral and loyalty programs into a single widget. Participants can earn rewards by referring friends and completing program goals. Default features included in this template are:

• Share mediums (referral link, code, and social media buttons)
• Program explanation
• Task cards (progress indicators for program goals)
• Referral history
• Reward history
• Participant’s referral and reward statistics

🔗 Referral widget

Empower participants to refer their friends and track the status of their referrals and rewards. Default features included in this template are: Share mediums (referral link, code, and social media buttons)

• Program explanation
• Task cards (progress indicator for each program goal)
• Referral and reward history
• Participant’s referral and reward statistics

🔗 Loyalty widget

Reward participants for completing program goals. Default features included in this template are:

• Task cards (progress indicator for each program goal)
• Reward history
• Participant’s reward statistics

🔗 Using mint components

Vanilla components power the default widget for all programs. The mint component package is automatically installed when you apply a template built with mint components. For more information on applying templates, check out our guide on Customizing Program Widgets.

You also can manually upgrade to mint components.

To upgrade to mint components for your microsite:

1. Go to the SaaSquatch Admin Portal.
2. Click Content in the top menu bar.
3. Click the Edit settings button on the microsite card.
4. Under the Site Hosting heading, click the Edit button next to Packages.
5. Click Add Package.
6. Click + Add on the mint components card.
7. Click Save.

To upgrade to mint components for your program widget:

1. Go to the SaaSquatch Admin Portal.
2. Click Content in the top menu bar.
3. Click Edit widgets on the widgets card.
4. Click the name of the widget you want to edit.
5. Click Settings at the bottom left of the page.
6. Click + Add package.
7. Click + Add on the mint components card.
8. Click Save at the top right of the page.

🔗 Vanilla Components

SaaSquatch’s vanilla components is a basic component library that powers our simple Referral, Points, and Partner widgets.

The vanilla components package comes with the following components:

• Share mediums (including referral links, referral codes, and social media share buttons)
• Referral history list
• A user’s referral and commission statistics
• Basic text and image components

🔗 Templates

We offer four templates built with vanilla components. Each template comes with a set of pre-configured components that can be added, removed, and customized to fit your program.

🔗 Referral widget

Allow users to refer friends and track the status of their referrals and rewards. Default features included in this template are:

• Share mediums (referral link, code, and social media buttons)
• Referral history
• User’s referral statistics

🔗 Partner widget

Empower your partners to refer new users. Allow them to track the status of their referrals and commissions. Default features included in this template are:

• Share mediums (referral link, code, and social media buttons)
• User’s commission statistics

🔗 Points widget

Allow users to track the points they have earned for completing program goals. Default features included in this template are:

• User’s points balance

🔗 Using vanilla components

Vanilla components power the default widget for all programs. To use vanilla components, open the widget editor and start building. If you are not using vanilla components and would like to, apply a template powered by vanilla components. For more information on applying templates, check out our guide on Customizing Program Widgets.

🔗 Bedrock Components

SaaSquatch’s bedrock components offer the ability to add advanced logic to your design. Unlike mint or vanilla components, bedrock components cannot be seen by end users. They can be used to conditionally show other components and define which program a component sources data from.

All templates powered by mint components come installed with the bedrock components package. These components can be used with either mint or vanilla components.

Our bedrock component package comes with two components:

1. Conditional section
2. Program section

🔗 Conditional section

The conditional section component allows you to include conditional content based on a user’s email, segment, or a custom field. This component will display its contents when the defined condition is met.

To configure a conditional section on a user’s segment or custom field, enter a JSONata expression in the Condition box. This expression defines the logic that displays the component’s contents when the condition is met.

🔗 Program section

The program section component allows you to override the program ID of its children components. Components placed inside a program section component will use data from the selected program.

To configure a program section, select a program from the options listed.

🔗 Templates

All templates powered by mint components have the bedrock component package installed. Bedrock components can be found in the advanced components section within the Add menu.

Widgets using vanilla components do not come with bedrock components installed.

🔗 Using bedrock components

To install bedrock components to a vanilla powered widget:

1. From the left-hand menu, click Settings.
2. Click Add Package
3. Locate the bedrock component package and click Add

🔗 Custom Component Packages

To further customize your user experience, you can bring in your own components.

🔗 Templates

Custom components can be added to any template and used alongside SaaSquatch built components.

🔗 Using custom components

SaaSquatch widgets use standard HTML and web components. To use your own components in our widget editor, they must be written as web components. For more on building web components for SaaSquatch widgets, check out our article Writing a Web Components for SaaSquatch.

To begin building your widget with custom components, install your custom package:

1. From the left-hand menu, click Settings.
2. Click Add Package.
3. Click Add from NPM.
4. Enter the package name, version and file path.
5. Click Add.

Note: Your users will not see any package related changes until you save your widget.