SaaSquatch Help Center

Learn about the features of the SaaSquatch microsite editor and how to use them to create your microsite.

A SaaSquatch-hosted microsite provides a centralized place for your program’s participants to sign up to your program and access the referral widget. Our microsite editor gives you control over what your end users will see by letting you customize layouts, pages, branding elements like fonts and colors, and even the domain.

We recommend using microsites when your users don’t have a way to register for an account for your program, like if you don’t have an area of your website where your users can log in. They’re useful if you’re running partner or affiliate programs.

🔗 About this guide

This guide will walk you through how to use the microsite editor to create a microsite that reflects your brand and provides a great experience for your end users.

If you haven’t created a microsite yet, then you’ll need to do so in the SaaSquatch Admin Portal first. Our Microsites Quickstart Guide provides step-by-step instructions on how to do this.

Important: Before attempting to set up a microsite, make sure your plan supports one. If you’re not sure or would like to talk about upgrading, then reach out to our Success team for details.

If you aren’t familiar with the microsite editor, then check out SaaSquatch Microsite Editor for an explanation of the user interface, what layouts/pages/components are, and what’s included by default if you used auto setup to create your microsite.

Note: If your microsite was created before August 2022, then you might be using an older version of our microsites feature that can’t be edited using the microsite editor. Contact our Success team to see if your microsite is eligible for an upgrade.

🔗 1. Add or edit microsite content

Important: You must click Save at the top right corner of the microsite editor before moving to a new layout or page in order for your changes to take effect. If you want to see how they’ll look before committing to saving the changes, click the eye icon in the top menu bar to see a preview.

🔗 Creating a new page or layout

  1. In the microsite editor, click Microsite in the Navigate submenu.
  2. Click the Add Page or Add Layout button.
  3. (Optional) Select the layout that you want to act as the parent layout using the Inherited Layout dropdown menu.
    • Note: We recommend that your new layout/page inherit either the logged in or logged out layouts for site organization purposes. However, you can skip this step if you want to make a new, top-level layout or page.

Example: If you want to add a landing page to your site that anyone can see regardless of whether they’re a logged in user, you can nest a new page within the Base layout.

  1. Enter the page title or layout name.
  2. Enter the URL for your page.
    • Note: Add a slash before the name you want to use and use hyphens if you want to have a multi-word URL, e.g., /company-info rather than /company info.
  3. Required: Choose who you want to be able to see your page.
    • Verified: Logged in users only
    • Unverified: Logged in users who haven't verified their email addresses
    • Public: Viewable by anyone

Note: If you created a custom landing page in Step 3, then make sure you choose Public from the Allowed Users dropdown so that everyone can see your page.

  1. If your page is accessible only to verified users, then choose the page where you want disallowed users to be sent from the Redirect dropdown.
  2. Click Add.
  3. Click Save.
  4. (Optional) Add the new page to the microsite sidebar menu.

🔗 Applying a template to a layout or page

You can apply a template to your new layout or page if you don’t want to start from scratch.

  1. Click Microsite in the Navigate submenu.
  2. Click on the name of your new layout or page.
  3. In the left sidebar menu, click Templates.
  4. Apply the template you want to use.
  5. Click Save.

🔗 Adding a page to the microsite's sidebar

This is recommended if you want logged in users to be able to navigate to the page from the sidebar. The most common use case will be if you add a new page to the logged in layout; these steps will show you how to do so, but you can adapt them if you want to add a sidebar item to another layout.

  1. Open the Microsite tab.
  2. Click the Microsite Logged In layout.
  3. Click the Add tab of the Add/Edit menu.
  4. Expand the Microsite Components category and click Sidebar Item.
  5. Click the green Add to sidebar content button where you’d like the new page to appear.
  6. Return to the Edit tab of the Add/Edit menu.
  7. Select an icon to represent the page.
  8. Enter the label.
  9. Select the page from the Navigation Path dropdown.
  10. Click Save.

🔗 Adding layout and page content

Components are how you add content to your layouts and pages. For example, clients commonly add header images or footer text to layouts, and add statistics or share links to pages.

  1. In the microsite editor, click the name of the layout or page you want to edit.
  2. In the Add/Edit menu, click the category of component that you would like to add.
  3. Click the green Add to button where you want the component to appear on the canvas.
  4. Adjust the component properties in the Add/Edit menu.
    • Note: If you added a text component, then you can edit the text directly on the canvas. You won’t see additional properties in the Add/Edit menu.

🔗 Editing layout and page content

You can edit existing components in one of two ways:

  • Click the component on the canvas and use the Edit menu to adjust the component properties
  • Open the Layers menu for the layout or page and click the component you want to adjust

🔗 2. Add or edit lifecycle emails

Two lifecycle emails are created for your microsite during the auto setup process:

  • User verification
  • Password reset

You can leave these as-is, edit them, or create entirely new emails to send your users for these situations.

🔗 Adding a new email

  1. Open the microsite editor.
  2. Click Email Templates in the left sidebar menu.
  3. Click Create new email template in the Emails tab.
  4. Enter your email template ID.
  5. Click Create.
    • You’ll be redirected to the email editor.
  6. Make your changes.
  7. Click Save.

🔗 Editing an email template

  1. Open the microsite editor.
  2. Click Email Templates in the left sidebar menu.
  3. Click the name of the email you want to edit.
    • You’ll be redirected to the email editor.
  4. Make your changes.
  5. Click Save.

🔗 Replacing a lifecycle email

You can decide which email templates are used for the lifecycle emails by adjusting your microsite settings in the Admin Portal.

  1. Return to the Content tab in the Admin Portal.
  2. In the Microsite card, click Edit Settings.
  3. Under the Participant Login heading, find the Lifecycle Emails section and click Change Templates on the right.
  4. Use the dropdown menus to select the email you want to send out for verification or password resets.
  5. Click Save.

🔗 3. (Optional) Modify your site's branding

All of the steps below are optional and can be skipped if you don’t want to make changes.

🔗 Modifying the brand container

Your Base layout contains a brand container component that controls your microsite’s font and brand colors. Brand colors are used by an array of components within your user experience, including highlight colors and button colors.

  1. Click Microsite in the Navigate submenu.
  2. Click the Microsite Base layout in the Microsite tab.
  3. Under the Current Layout submenu, click Layers.
  4. Click the Brand Container component.
  5. Edit the component properties in the Add/Edit menu:
    • Color
    • Font
  6. Click Save.

🔗 Customizing the microsite header

You can add a clickable header image that redirects your users to a page you designate. Set it up in the Base layout.

  1. Click Microsite in the Navigate submenu.
  2. Click the Microsite Base layout in the Microsite tab.
  3. Under the Current Layout submenu, click Layers.
  4. Click the Microsite Frame Header Content component.
  5. Update the image and adjust its height and width as desired.
  6. Set the redirect path. This is where your users will be redirected upon clicking the image.

🔗 4. Preview and save

🔗 Previewing your microsite

Preview how the microsite 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 microsite

Warning: The microsite 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 live version of your microsite.

🔗 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
  • Placing a component in an invalid location
    • Note: You’ll only encounter this error if you make a mistake while using the HTML editor—the visual editor doesn’t allow you to place components in invalid places.

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

error props

  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 you want to use custom components to build your microsite, then you can install a custom package.

  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 from NPM.
  7. Enter the package name, file path, and version.
  8. Click Add.
  9. Click Save. Return to the microsite editor to start adding your custom components to your site.

🔗 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 microsite HTML

You can edit the HTML or CSS to further customize your microsite’s layouts and pages. While the HTML editor allows for additional flexibility in design, keep in mind that the SaaSquatch team is unfortunately unable to troubleshoot any adjustments made with custom HTML or CSS.

  1. Open the microsite editor.
  2. Select the layout or page that you want to edit from the tree in the microsite tab.
  3. Click the brackets < > icon in the top menu bar.
  4. Make edits in the code.
  5. To view the effects of your edits, click the paintbrush icon to return to the microsite editing interface.
  6. Once you’re happy with the results, click Save.

🔗 If you need more help

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