Help Center

| Submit or View Help Requests | Developer Docs |
| |

Microsite Editor Explained

Our microsite editor gives you control over what your end users will see by letting you customize layouts, pages, content, and branding elements like fonts and colors. This document explains the editor’s interface and provides information about how microsites are structured, including layouts, pages and components. If you’ve used our widget editor before, you’ll find that the microsite editor feels quite familiar–it has a similar interface and many of the same features.

See our other documentation for instructions on Setting up a microsite and customizing its appearance.

Microsite editing interface

The SaaSquatch microsite editor has five main areas:

Top menu

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

Canvas

The canvas displays the current content of your microsite. 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.

Left sidebar menu

The left sidebar menu is a collapsible panel to the left of the canvas. Use the Navigate submenu to switch between the microsite editor, the email editor, and the widget editor. The second submenu displays options that change depending on whether you’re in a page or a layout.

  • Select Layers to see a detailed view of all of the components on your page or layout

  • Templates takes you to our template pages, layouts, widgets, and more

  • You’ll see a context-dependent third menu based on your selected page, layout, widget, or email

Microsite tab

The microsite tab visualizes the inheritance structure of your layouts and pages as a tree. Select individual layouts or pages to view the content and make adjustments. This is also where you can add more pages and layouts.

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.

Advocate - Microsite Editor

Building blocks

There are a few building blocks that are important to understand as you customize your microsite: layouts, pages, and components. See our guide on customizing microsites for help with creating, modifying, and personalizing your microsite’s layouts and pages.

Layouts and pages are linked through an inheritance structure. Both pages and layouts can inherit a layout. Pages/layouts that have an inherited layout will have their content wrapped by their inherited layout’s content. For example: if your base layout contains a header image, any pages that inherits the base layout will display the same header image in the same location.

Layouts

Layouts act as “frames” for your microsite. They’re where you can place components that you want to appear pervasively across the microsite, like headers and banner images.

If you used auto setup to create your microsite, then your site has three layouts by default:

The base layout is where you can place content that you want to appear regardless of which page a user is on and whether they’re authenticated on your site. This is where you can add a header or footer that you want to appear across the site. The base layout also contains the brand container, which manages colors and fonts sitewide.

Both the logged in layout and the logged out layout inherit the base layout.

Pages

Pages are where you build the content of your site, like program explainers, referral and sharing information, and text/images. In the Settings under the Current Page submenu, you can choose the page visibility and restrict it to:

  • Verified: Logged in users only

  • Unverified: Logged in users who have not verified their email address

  • Public: Viewable by anyone

If you used auto setup to create your microsite, then your site comes equipped with several pages that inherit the logged in and logged out layouts.

Inherited Layout

Page

Logged in layout

Dashboard

Activity

Edit Profile

Logged out layout

Page Not Found

Email Verification

Forgot Password

Login and Logout

Register

Reset Password

Verify Email

Components

Components are individual elements that you can add to your pages and layouts to further personalize your users’ microsite experience. SaaSquatch’s mint components library powers the microsite editing experience.

We’ve grouped common component types together in the Add/Edit menu so that they’re easy to locate. Our doc on Participant Experiences has you covered if you want to learn more about SaaSquatch component libraries in general.

Did you find it helpful? Yes No

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