help center

| Submit or View Help Requests | Developer Docs |
|

Customizing Microsite Layouts and Pages

This guide will walk you through how to use the microsite editor to create a microsite that reflects your brand and provides an engaging experience for your end users. If you haven’t set up a microsite yet, then you’ll need to do so in the SaaSquatch Admin Portal first.

Our microsite editor doc explains the user interface, microsite structure (including layouts, pages, and components), and what’s included by default if you used auto setup to create the microsite.

Warning

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

Step 1: Change your microsite’s branding

This step is 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 applied to various parts of the microsite, including highlight colors and button colors.

  1. Go to the microsite editor.

    1. In the admin portal, select the Content tab.

    2. On the microsite card, select Edit Content.

  2. Select Microsite in the navigation sub-menu.

  3. Select the Microsite Base layout in the Microsite tab.

  4. Under the Current Layout sub-menu, select Layers.

  5. Select the Brand Container component.

  6. Edit the component properties in the Add/Edit menu:

    • Color

    • Font

  7. Select Save.

Customizing the microsite header

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

  1. Select Microsite in the navigation sub-menu.

  2. Select the Microsite Base layout in the Microsite tab.

  3. Under the Current Layout sub-menu, select Layers.

  4. Select 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 participants will be redirected upon clicking the image.

Step 2: Create a new layout or page

  1. In the microsite editor, select Microsite in the navigation sub-menu.

  2. Select the Add Page or Add Layout button.

  3. [Optional] Select the layout you'd want acting as the parent layout, using the Inherited Layout dropdown menu.

    Note

    We recommend that your new layout/page inherits 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 participant, you can nest a new page within the base layout.

  4. Enter the page title or layout name.

  5. Enter the URL for your page.

    Note

    Add a forward slash before the name you want to use and use hyphens in the case of a multi-word URL, e.g., /company-info.

  6. Required: Select who you want to be able to see your page.

    • Verified: Logged-in participants only

    • Unverified: Logged-in participants 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 select Public from the Allowed Users dropdown list so that everyone can see your page.

  7. If your page is accessible only to verified participants, then select the page to which you want disallowed participants to be sent, from the Redirect dropdown list.

  8. Select Add.

  9. Select Save.

  10. [Optional] Add the new page to the microsite sidebar menu.

Step 3: Add 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, select the name of the layout or page you want to edit.

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

  3. Select 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.

Step 4: Apply 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. Select Microsite in the Navigation sub-menu.

  2. Select the name of your new layout or page.

  3. In the left sidebar menu, select Templates.

  4. Apply the template you want to use.

  5. Select Save.

Step 5: Edit the microsite’s sidebar

This is recommended if you want logged in participants to be able to navigate to a 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. Select the Microsite Logged In layout.

  3. Select the Add tab of the Add/Edit menu.

  4. Expand the Microsite Components category and select Sidebar Item.

  5. Select 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. Select Save.

Step 6: Preview and save

Preview your microsite

You can preview how the microsite will appear to your participants. You can switch between a preview of the experience for desktop, tablet, or mobile by clicking the respective device icon.

  1. To enter preview, select the [View] from the top menu bar.

  2. To return to the editing interface, select the [Edit] from the top menu bar.

Save your microsite

  1. After making all relevant changes, select Save in the top right.

  2. Once saved, the changes will appear instantly in the live version of your microsite.

    Note

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

Advanced customization options

Install 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 by impact.com Admin Portal.

  2. Select Content in the top menu bar.

  3. Select Edit settings on the microsite card.

  4. Under the Site Hosting section, select Edit next to Packages.

  5. Select Add PackageAdd from NPM.

  6. Enter the package name, file path, and version.

  7. Select AddSave.

Return to the microsite editor to start adding your custom components to your site.

Edit microsite HTML/CSS

You can edit the HTML or CSS to further customize your microsite’s layouts and pages.

  1. Open the microsite editor.

  2. Select the layout or page that you want to edit, from the tree in the microsite tab.

  3. Select [Code view] in the top menu bar.

  4. Make edits in the code.

  5. To view the effects of your edits, select the [Edit] to return to the microsite editing interface.

  6. Once you’re happy with the results, select Save.

Did you find it helpful? Yes No

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