Help Center

| Submit or View Help Requests | Developer Docs |

View desktop instructions
View mobile app instructions
Customize Microsite Layouts & Pages

Microsites are one of the key participant touchpoints for your referral program. This help article explains how to use the microsite editor to customize your existing microsite into a space 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 first.

  1. From the left navigation menu, select Content.

  2. On the Microsite card, select Edit content.

    • This action opens the microsite editor and displays the Microsite slideout.

  3. Use the microsite editor to update your branding or add new content, like layouts and pages.

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 (Optional)
This feature is only accessible to specific impact.com editions or add-ons. Contact us to upgrade your account and get access!

Your Base layout includes 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. In the Microsite slideout, select the Base Layout.

  2. On the left, under Current Layout, select Layers.

  3. Select the Brand Container.

  4. On the right, in the Brand Container menu, edit the brand color and brand font.

    Screenshot_2024-02-22_at_16_26_23.png
  5. Select Save in the upper-right corner.

Step 2: Create a layout or page
  1. In the Microsite slideout, select Microsite.

    • This action opens the structure view of your microsite, which displays all layouts and pages.

  2. Select the Add Page button.

  3. Optionally, use the Inherited Layout drop-down list to select the layout you want to act as the parent layout.

    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. Optionally, adjust the Page key for your page. A page key is automatically generated based on the page title, but you can change it if desired.

  6. Enter the URL for your page.

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

  7. From the Allowed users drop-down list, select the group of users that can access the page.

    • Verified: Logged-in participants only.

    • Unverified: Logged-in participants who haven’t verified their email addresses.

    • Public: Viewable by anyone.

  8. From the Redirect for disallowed users drop-down list, select the page to which you want disallowed participants to be sent.

  9. Select Add.

  10. In the top-right corner of the page, select Save.

Step 3: Apply a template

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

  1. From the Microsite slideout, use the structure view to select the layout or page for which you want to use the template.

  2. On the left, below Current Layout or Current Page, select Templates.

  3. Browse the available templates, then select Apply template on the card of the template you want to use.

    Screenshot_2024-02-22_at_16_50_41.png
  4. At the top-right corner of the page, select Save.

Step 4: Edit the microsite’s sidebar

This is recommended if you want logged in participants to be able to get to a page from the microsite's sidebar navigation menu. 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. From the Microsite slideout, select Logged In Layout from the structure view.

    • Select icons8-cancel-25.png [Exit icon] to close the slideout and access the editing canvas.

  2. On the right, within the Add menu, expand the Microsite Components category, then select Sidebar Item.

  3. Within the editing canvas, select a valid position to add the sidebar item component. Available positions are designated by a Add to Sidebar Content message.

    • On smaller screens, select the bars-solid.svg [Hamburger menu] to access the Add to sidebar content button.

    Screenshot_2024-07-23_at_12_58_45.png
  4. On the right, within the Edit menu, select an Icon and Label to represent the page.

  5. From the Navigation Path drop-down list, select the URL path of the page to which users should be directed.

  6. At the top-right corner of the page, select Save.

Step 5: Preview and save

You can preview how the microsite will appear to your participants.

  1. In the top menu bar, toggle between desktop.svg [Desktop], tablet-alt-solid.svg [Tablet] or mobile-vertical.svg [Mobile] to see how the microsite will appear on each device.

  2. To enter preview, select eye-solid.svg [View] from the top menu bar.

  3. To return to the editing interface, select brush-solid.svg [Edit] from the top menu bar.

Visit our article on Widget and Microsite Components Explained for more on the component aspects of Microsites and Widgets.

Did you find it helpful? Yes No

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