help center

| Submit or View Help Requests | Developer Docs |

Customize Program Widgets

SaaSquatch by offers a pick-and-plop editor that allows you to customize the look and contents of the widgets presented to your participants.

Access the widget editor

  1. From the Admin Portal, select Programs.

  2. Select Edit at the right-hand side of your program.

  3. Select Customize beside the name of your widget.

Widget editor interface

The SaaSquatch by self-serve widget editor has four main areas:

Top menu bar

The menu bar at the top of the page is where you can undo actions, view the HTML code, and preview the finished widget. Use the desktop, tablet, or mobile icons to see how your widget will appear on devices with different screen sizes.


The canvas shows all of the components that make up your widget. You can select individual components to edit them, or add new ones and see at a glance how they’ll show up for your participants.

Settings sidebar menu

The settings menu is a collapsible panel to the left of the canvas. Here, you can select Layers to see a detailed view of all of the components in your widget, or select Templates to use one of our pre-made widgets. The Settings button takes you to the package installation sub-menu.

Add/Edit sidebar menu

The Add/Edit sidebar menu is a panel to the right of the canvas. Use the Add tab to insert new components into the canvas, and use the Edit tab to make adjustments to what’s already there.

Customize your widgets

Step 1: Choose a template

Get started by choosing from one of our template widgets for your referral, loyalty, or combined referral and loyalty program. See Participant Experiences for details about each available template.

  1. Select Templates from the Settings menu.

  2. Select Apply template next to the template you would like to start with.


If you want to preview how the template looks without committing to the change, then you can refresh the page before saving.

Step 2: Adjust widget content

You can add, edit, move or remove components to modify the content your participants see in the widget.

  1. In the Add menu, select the category of component that you would like to add.

  2. Select the appropriate component.

  3. Select the green Add to button where you want the component to appear on the canvas.

If you add a component and don’t like it (or think it would look better elsewhere), then jump ahead to the section on editing and removing components for help.

Step 3: Customize widget appearance and theme

Add images or logos

  1. From the Add menu, select the Common Components category.

  2. Select either:

    • Overlay (an image with overlaid, editable text)

    • Image (a plain image with no text on top)

  3. From the Edit menu, select the Upload button underneath the Image heading.

Edit images or logos

  1. Within the canvas, select the photo you want to change.

  2. In the Edit menu, select Upload.

  3. Upload the photo using one of these methods:

    • Dragging and dropping the photo

    • Browsing for a file on your computer

    • Pasting the public URL of the file

  4. Select Done.

Adjust which share buttons are shown

You can edit existing share buttons using the Edit menu.

  1. Select the share button you want to edit on the canvas.

  2. In the Edit menu, select the name of the site or service under the Share Medium heading.

Add a new share button by using the Add menu.

  1. From the Add menu, select Sharing.

  2. Select the appropriate card.

  3. Select the green Move to button to place the component on the canvas.

Step 4: Preview and save

Preview the widget

Preview how the widget will appear to your participants by selecting the eye icon from the top menu bar. You can switch between a preview of the experience for desktop, tablet, or mobile users by selecting the respective device icon.

To return to the editing interface, select the paintbrush icon from the top menu bar.

Save your changes


The widget editor does not autosave your changes. Click Save frequently to make sure you don’t lose your work.

When you click Save, the changes will instantly appear in the widget that is presented to your end users—there’s no need to make changes to the code on your website or app.


The widget has two layers of validation to check for errors in component placement and component properties. Common reasons for receiving an error message include:

  • Missing a required field

  • Choosing an invalid color

  • Entering an invalid URL

When you have unresolved errors, a warning message displays at the top right of the canvas that notifies you of how many errors were found.

View unresolved error details

  1. Select Details for a brief explanation of what went wrong.

  2. Go to the component with the error by either:

    • Selecting Open Layers

    • Selecting the error explanation message

  3. Find the component with the error. It will be marked with a red exclamation mark icon.

  4. Select the component to open the properties in the Edit bar.

  5. Make the required changes.

Advanced customization options

Advanced components allow you to include conditional content that is based on user email, segment, or custom field. For example, if you want to display a leaderboard only for participants who are gold-level subscribers, the conditional section on segment component will let you do so.

You can add advanced components from the Add menu. Setting them up takes a little extra work as you’ll need to enter a JSONata expression in the Condition box that defines the logic for when the condition is met.

If your program has a custom widget that doesn’t use our components, then you can install a custom package.

  1. From the Settings menu, select Settings.

  2. Select Add Package.

  3. Select Add from NPM.

  4. Enter the package name and file path.

  5. Select Add.

Selecting Add will allow you to add your components and properties. To push the changes out to your users, select Save in the top menu bar.

Additional assistance

For further assistance with the design and editing of your widgets using the basic customization options, feel free to reach out to our support team.

Did you find it helpful? Yes No

Send feedback
Sorry we couldn't be helpful. Help us improve this article with your feedback.