Participants in your referral programs can interact with your program through a SaaSquatch widget or microsite. Widgets and microsites emphasize the value of your program and strengthen your brand’s presence. They give your participants access to unique program benefits, like Reward Exchange and leaderboards.
The Content tab in the Admin Portal is where you can create and manage widgets and microsites. It's home to the visual editor, which lets you adjust the content and appearance of your widget or microsite. There are a variety of widget and microsite templates available here to get you started, or you can create one from scratch.
The visual editor is powered by our three component libraries: mint, vanilla and bedrock. You don’t need to know how these work to build a beautiful and effective widget or microsite, but some templates require the latest version of a component library to work properly. For clients who’d like to use their own component library, we offer custom component library uploads.
This guide outlines the templates available in the visual editor and explains the component libraries that power them. For instructional content about using the visual editor to build widgets and microsites, see our docs on Customizing Program Widgets and Microsites.
There are several templates available for your widgets.
Verified access widgets provide a robust experience for your referral participants, including their reward and referral history, Reward Exchange or PayPal cash payouts, and other features. To protect your participants’ personal information, we recommend displaying this widget only to those who have signed in to your product.
Microsites are purpose-built miniature websites that only give participants access to program information. They’re built using the visual editor. Each microsite supports having multiple pages. When you use auto setup to create a microsite, we set up a basic site structure with distinct layouts and pages for signed-in and signed-out participants. We provide additional layout and page templates for clients who want to add more to their site.
See our doc on Microsites for more info about what layouts and pages are, and how they can be branded.
Layouts are containers for microsite pages. You can add components that you want to appear consistently across all pages within the layout—like headers and banners. Our auto setup microsites come with pre-made layouts, but you can add more. The three templates are:
Base Layout - for overall content.
Logged In Layout - for signed-in participants.
Logged Out Layout - for public access.
We offer a variety of page templates as well.
This page acts as the dashboard for logged in participants within your microsite. It includes:
Program explainer section
Program statistics
Referral code and share links
Share buttons
Clients offering PayPal cash payouts can use the Dashboard with PayPal version of this template.
The activity page is a one-stop shop for participants’ program activity within your microsite. It includes program statistics and a referral history table.
We also offer templates for pages that participants encounter when performing different site functions. These are included by default in an auto setup microsite, but can be adjusted. The account management templates are:
Edit profile page
404 page
Email verification page
Forgot password page
Login page
Logout page
Registration page
Reset password page
Verify email page
Components are the individual building blocks, like hero images and task cards, that make up your widget or microsite. All of our current templates are powered by our mint and bedrock components libraries.
Widgets and microsites built with mint components provide participants with SaaSquatch’s latest experiences. Most of our current templates use mint components. If you aren’t sure, you can manually check to make sure you’re using the current component library, and update your library if needed.
To upgrade to mint components for your program widget:
Sign in to the SaaSquatch Admin Portal.
Navigate to the Content tab.
Select Edit widgets on the widgets card.
Select the name of the widget you want to edit.
Select Settings at the bottom left of the page.
Select
Add package.
Select
Add on the mint components card.Select Save at the top right of the page.
To upgrade to mint components for your microsite:
Sign in to the SaaSquatch Admin Portal.
Navigate to the Content tab.
Select the Edit settings button on the microsite card.
Under the Site Hosting heading, select the Edit button next to Packages.
Select
Add Package.Select
Add on the mint components card.Select Save.
All templates powered by mint components also have the bedrock component package installed. Bedrock components can’t be seen by participants, but they offer the ability to add advanced logic to your design. They can conditionally show other components and define which program a component sources data from. You can find the bedrock components package in the advanced components section within the Add menu.
There are two components in the bedrock component package:
The conditional section component lets you to include conditional content based on a participant’s email, segment, or a custom field. Insert a JSONata expression in the Condition box to set the display conditions. 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.
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.
To further customize your user experience, you can bring in your own components. These components can be added to any template and used alongside SaaSquatch-built 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.
To begin building your widget with custom components, install your custom package:
From within the visual editor, select Settings in the left-hand menu.
Select
Add Package.Select
Add from NPM.Enter the package name, version and file path.
Select
Add.