Skip to main content

How to customise the branding of your microsite

Learn how to customise the look and feel of your new booking microsite

Two Places to Set Branding

You'll notice there are two branding-related options available from an account's Actions menu: Microsite and Branding.

  • Microsite - controls the branding, display, SEO, and link settings for that specific account's booking microsite. This is what this guide covers.

  • Branding - this is an organisation-level setting. If you manage multiple accounts under the same parent brand (for example, 100 stores under one retail brand), this lets you set branding once at the organisation level and have it apply across all of those microsites automatically.

This guide focuses on the account-level Microsite settings. For organisation-level branding, view this guide.


Getting Started

From the account's Actions menu, under Administration select Organisation, then Microsite button.


Theme Mode

At the top of the Branding tab, you can control how the microsite's colour theme behaves:

  • Default theme mode - choose whether the microsite always shows in light mode, always dark mode, or Auto, which matches the visitor's own browser/device preference.

  • Let visitors switch themes - toggle this on to let visitors manually switch between light and dark themes themselves, regardless of the default.

💡 We recommend keeping dark mode available because it's a great option for people with photosensitivity or visual processing differences.


Fonts

  • Font URL - paste a stylesheet link for a custom web font, such as a Google Fonts URL.

  • Font family - enter the CSS font-family name that matches the font you've linked above.

These are shared across both the light and dark themes.


Default Banner and Logo

  • Default banner - upload or paste a URL for a wide hero image shown at the top of the microsite. Recommended size is 1600×400px.

  • Default logo - upload or paste a URL for the account's logo, shown alongside the banner.


Favicon and Page Title

  • Favicon - a small square icon (32×32px or larger recommended) shown in the browser tab. If left blank, it falls back to the default Appointedd logo.

  • Page title suffix - extra text appended after the page title in the browser tab, for example "{page title} | {suffix}".


Colour Palette

Below the font and image settings, you'll find a live preview of how the microsite will look in both Light and Dark themes, followed by tabs to configure each palette separately. Note: the preview is a rough approximation and not the actual site layout.

For each theme (light and dark), you can set:

  • Primary colour - the main brand colour used across headers, buttons, and links.

  • Primary action colour - used specifically for primary call-to-action buttons, like "Book now".

  • Accent colour - a secondary highlight colour used sparingly for emphasis.

  • Surface colour - the background colour of the main content card. Leave blank to use the theme default.

  • Text colour - the main body text colour. Leave blank to use the theme default.

  • Page background - choose a solid colour, a two-colour gradient, or an image for the overall page background. Each option has its own configuration once selected.

Any field left blank will fall back to Appointedd's default colours for that theme.

There's also a Generate light from dark (and equivalent) button, which can automatically create one palette based on the other - handy if you only want to configure one theme manually and let the system suggest sensible values for the other.


Per-Theme Overrides

If you want the banner or logo to look different depending on whether the visitor is in light or dark mode, you can set:

  • Light banner override / Light logo override

  • Dark banner override / Dark logo override (on the Dark palette tab)

These are optional - if left blank, the microsite will use the shared default banner and logo set earlier in the page.


Saving Your Changes

Once you're happy with your settings, select Save changes at the bottom of the page. If you want to discard your edits, select Cancel instead.


Summary

Use the Microsite button to fully customise the theme, fonts, imagery, and colour palette for an individual account's booking page.

Remember if you're managing branding across multiple accounts under one parent brand, keep an eye on the organisation-level "Branding" button. Guide here.

Did this answer your question?