Customizing Program Widgets

🔗 Overview

SaaSquatch offers a WYSIWYG (What You See Is What You Get) drag-and-drop editor that allows you to customize the look and contents of the widgets presented to your participants.

Our latest version of the widget editor uses mint components to offer you stylish and powerful out-of-the-box templates that you can use to build your program widgets. You can also choose to build a basic widget based on our vanilla components, which offer a minimum level of customization.

To access the widget editor from the Admin Portal, click Programs. Click Edit at the right-hand size of your program, and then click Customize beside the name of your widget.

🔗 Widget editing interface

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

1. Top menu bar
2. Canvas
3. Settings sidebar menu
4. Add/Edit sidebar menu

🔗 1. 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.

🔗 2. Canvas

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

🔗 3. Settings sidebar menu

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

🔗 4. 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.

🔗 Default widget

The editor page will initially load with the default widget for your program type, which is a widget based on our vanilla components. We highly recommend that you review and make adjustments to the default widget, as it contains generic copy and placeholder images.

If you make changes to your widget and later decide that you want to revert to the default state, then you can go to the Settings menu, click Templates, and select the original template you would like to return to.

🔗 Choose a template

Get started by choosing from one of our template widgets for your referral, loyalty, or combined referral and loyalty program. Our widgets are powered by either SaaSquatch's mint components, which are our latest offering, or by our vanilla components, which power the original widget-building experience. If you'd like to learn more about the component libraries, check out our article on End User Experiences.

We recommend using one of the widgets powered by mint components for a more flexible, updated experience.

1. Click Templates from the Settings menu.
2. Click Apply template next to the template you would like to start with.

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

🔗 Mint components widgets

SaaSquatch's mint components power the newest widget-building experience. Widgets built using mint components have greater flexibility, more customization options, and new features like leaderboards, reward exchange, and reward history tables. We recommend using a mint components template for your program.

You can select from three pre-made templates:

• Referral and loyalty widget, for a combined program
• Referral widget
• Loyalty widget

🔗 Vanilla components widgets

Widgets built on our vanilla components offer the basic SaaSquatch widget-editing experience. The default widget for your program is a widget powered by vanilla components. To upgrade to a mint components widget, just select one of the three widgets described above.

Our vanilla components widgets are:

• Referral widget
• Partner widget
• Points widget
• VIP widget

🔗 Add more components

Want to display some extra details beyond what's in our template, or provide your users with a custom widget experience branded to mimic your product? With our self-serve widget editor, that's easy to do—just use the Add menu. We've grouped common component types together so they're easy to locate. See SaaSquatch Components for a review of the available component types.

🔗 Adding components

1. In the Add menu, click the category of component that you would like to add.
2. Click the appropriate component.
3. Click the green Add to buton 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.

🔗 Adding advanced components

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: you'll need to enter a JSONata expression in the Condition box that defines the logic for when the condition is met.

🔗 Edit or remove components

Editing and removing components is simple with our widget editor. You can edit text directly within the canvas. Use the Edit menu to adjust other components.

🔗 Editing text from the canvas

1. Click the component you want to edit.
2. Use the rich-text editor to adjust any text.
3. Use the options in the Edit menu to change other properties.

Note: Text-only components, like headers and paragraph text, can only be edited within the canvas. You will not see the option to adjust the text in the Edit sidebar menu.

If you want to turn paragraph text into a link, then you can do so by editing the HTML.

🔗 Editing other components with the Edit menu

1. Click the component you want to edit.
2. Use the options in the Edit menu to change other properties.

The properties you can edit will depend on what type of component you selected. For example, if you click the Hero Image component, you'll be able to select a new image and change the background color. If you click a text-only element like a header, then you will only have the option to edit the text directly in the canvas.

🔗 Removing components

1. Click the component you want to remove in the canvas.
2. Click the Trash icon.

🔗 Customize the widget appearance

🔗 Adding an image or logo

1. From the Add menu, click the Common Components category.
2. Click either:
   • Overlay (an image with overlaid, editable text)
   • Image (a plain image with no text on top)
3. From the Edit menu, click the Upload button underneath the Image heading.

🔗 Editing an image or logo

1. Within the canvas, click the photo you want to change.
2. In the Edit menu, click 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. Click Done.

🔗 Moving components within the widget

1. Within the canvas, click the component you want to move.
2. Click the Move (four arrow) icon.
3. Click the green Move to button where you want the component to go.

Note: Some components can't be moved. The Move to button will only appear if there's another valid location on the canvas for the component.

🔗 Adjusting which share buttons are shown

You can edit existing share buttons using the Edit menu.

1. Click 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, click Sharing.
2. Click the appropriate card.
3. Click the green Move to button to place the component on the canvas.

🔗 Preview and save

🔗 Previewing the Widget

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

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

🔗 Saving your changes

WARNING: 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.

🔗 Validation and errors

Our 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

🔗 Resolving error messages

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.

1. Click Details for a brief explanation of what went wrong.
2. Go to the component with the error by either:
   • Clicking Open Layers
   • Clicking the error explanation message
3. Find the component with the error. It will be marked with a red exclamation mark icon.
4. Click the component to open the properties in the Edit bar.
5. Make the required changes.

🔗 Advanced customization options

🔗 Installing custom packages

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, click the Settings button.
2. Click Add Package.
3. Click Add from NPM.
4. Enter the package name and file path.
5. Click Add.

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

🔗 Writing a web component for SaaSquatch

SaaSquatch widgets are based on standard HTML and web components. This makes extending the SaaSquatch widget editing experience possible for web developers familiar with these web technologies. See our article on writing a web component for SaaSquatch for details.

🔗 Editing the HTML

You can also edit the HTML or CSS to make further customizations to your widget using the built in HTML editor. While the HTML editor allows for additional flexibility in widget design, keep in mind that the SaaSquatch team is unfortunately unable to troubleshoot any adjustments made with custom HTML or CSS.

1. Click the brackets < > icon in the top menu bar.
2. Make edits in the code.
3. To view the effects of your edits, click the paintbrush icon to return to the widget editing interface.
4. Once you're happy with the results, click Save.

🔗 If you need more help

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.