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.
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.
Go to the microsite editor.
In the admin portal, select the Content tab.
On the microsite card, select Edit Content.
Select Microsite in the navigation sub-menu.
Select the Microsite Base layout in the Microsite tab.
Under the Current Layout sub-menu, select Layers.
Select the Brand Container component.
Edit the component properties in the Add/Edit menu:
Color
Font
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.
Select Microsite in the navigation sub-menu.
Select the Microsite Base layout in the Microsite tab.
Under the Current Layout sub-menu, select Layers.
Select the Microsite Frame Header Content component.
Update the image and adjust its height and width as desired.
Set the redirect path. This is where your participants will be redirected upon clicking the image.
In the microsite editor, select Microsite in the navigation sub-menu.
Select the Add Page or Add Layout button.
[Optional] Select the layout you'd want acting as the parent layout, using the Inherited Layout dropdown menu.
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.
Enter the page title or layout name.
Enter the URL for your page.
Required: Select who you want to be able to see your page.
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.
Select Add.
Select Save.
[Optional] Add the new page to the microsite sidebar menu.
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.
In the microsite editor, select the name of the layout or page you want to edit.
In the Add/Edit menu, select the category of component that you would like to add.
Select the green Add to button where you want the component to appear on the canvas.
Adjust the component properties in the Add/Edit menu.
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.
Open the Microsite tab.
Select the Microsite Logged In layout.
Select the Add tab of the Add/Edit menu.
Expand the Microsite Components category and select Sidebar Item.
Select the green Add to sidebar content button where you’d like the new page to appear.
Return to the Edit tab of the Add/Edit menu.
Select an icon to represent the page.
Enter the label.
Select the page from the Navigation Path dropdown.
Select 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.
To enter preview, select the
[View] from the top menu bar.To return to the editing interface, select the
[Edit] from the top menu bar.
Install custom packages
If you want to use custom components to build your microsite, then you can install a custom package.
Go to the SaaSquatch by impact.com Admin Portal.
Select Content in the top menu bar.
Select Edit settings on the microsite card.
Under the Site Hosting section, select Edit next to Packages.
Select Add Package → Add from NPM.
Enter the package name, file path, and version.
Select Add → Save.
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.
Open the microsite editor.
Select the layout or page that you want to edit, from the tree in the microsite tab.
Select
[Code view] in the top menu bar.Make edits in the code.
To view the effects of your edits, select the
[Edit] to return to the microsite editing interface.Once you’re happy with the results, select Save.