Custom Branding

Design a guest portal that looks and feels like your venue

Portal Management
Documentation/Portal Management/Custom Branding

WYSIWYG Branding Editor

Every portal has a live branding editor — a what-you-see-is-what-you-get design panel where changes appear instantly in a preview pane on the right. Open it from any portal card via Customise Branding.

Branding is saved per portal. If you want a consistent look across all portals, apply the same settings to each one, or use the tenant-level global default as a starting point.

Changes are only published when you click Save. The live preview reflects your unsaved edits — guests do not see changes until you save.

Logo & Background

Logo

Upload a logo image (PNG, SVG, or JPEG) to appear at the top of the portal page. You can control:

Position
Left · Centre · Right
Size
Small · Medium · Large
Max width
Up to 240 px

Background

Choose between a solid colour background or a full-bleed background image:

Solid colour

Pick any colour from the colour picker. Works well for brand-consistent portal designs.

Image

Paste a direct image URL, or use the built-in Unsplash picker (see below) to search for a professional photograph.

Unsplash Background Library

QuuPass includes a built-in integration with Unsplash — a library of high-quality, royalty-free photographs. When you select the image background type, a Browse Unsplash button opens a search panel inside the editor.

1
Open the picker: Click Browse Unsplash in the Background section of the branding editor.
2
Search by keyword: Type a term such as "coffee shop", "hotel lobby", "forest", or your venue name. Results load instantly.
3
Select a photo: Click any photo to set it as the portal background. The preview pane updates in real time.
4
Save: The image URL is stored securely. Unsplash is attributed automatically in compliance with their API guidelines.
Admin note: The Unsplash integration requires a valid UNSPLASH_ACCESS_KEY environment variable to be set on the server. Contact your system administrator if the Browse Unsplash button is missing or returns no results.

Colour Palette

Four independent colours control the visual theme of the portal card overlay:

ColourApplied to
PrimaryButtons, active states, and primary accent highlights.
SecondarySecondary accents, borders, and subtle UI elements.
BackgroundThe portal card background colour — set this to white for a clean card-on-background look.
TextBody text, labels, and instructional copy inside the portal card.

QR Code Styles

Choose how the QR code rendered on the portal page looks. Three styles are available, with live mini-previews in the editor:

Classic

Standard hard-edged square modules. Maximum scanner compatibility across all devices and QR apps.

Rounded

Modules with soft, rounded corners. Modern appearance while remaining highly scannable.

Dots

Circular dot modules for a distinctive, contemporary aesthetic. Works best with high-contrast colour choices.

Text & Content Options

Welcome text

Toggle on/off

An optional heading displayed above the QR code. Use it to greet guests or display venue name: "Welcome to The Grand Hotel" or "Scan to connect to our Wi-Fi".

Custom text panel

Toggle on/off

A free-text area for instructions, brand messaging, or disclaimers. Displayed in a landscape layout beneath the QR code. Useful for adding context like "By connecting you agree to our network usage policy."

Terms & Conditions

Toggle on/off

Displays a terms acknowledgement line on the portal. You can enter the terms text directly and link to a full external URL (e.g. your venue terms page). Guests see this before receiving their credential.

Show password

Toggle on/off

Displays the plaintext Wi-Fi passphrase below the QR code. Helpful for guests who prefer to type the password manually rather than scan. Disable if you want to keep the passphrase less visible.

Advanced Display Settings

QR fade duration

The QR code auto-hides itself after a configurable period to deter guests from photographing each other's codes. The default is 15 seconds. Guests can reveal it again by tapping. Adjust this to suit your venue security preference.

Show instructions toggle

Shows or hides the default "How to connect" instruction text that QuuPass includes below the QR code. Disable this if your custom text panel covers the same ground or you prefer a cleaner, minimal design.

Branding Tips

Use a high-contrast background to background-card colour combination so the QR code stands out clearly.
Logos with a transparent background (PNG or SVG) look best and integrate naturally with any background colour or image.
If using a background photograph, opt for images with a central blur or plain area where the portal card will sit.
The Unsplash picker provides high-resolution images — choose something that matches your venue mood: hospitality, co-working, retail, or outdoor.
Test your portal on multiple devices (iOS and Android) after saving branding changes to ensure the QR code scans correctly with your chosen colours.