Brand your Insider Portal to create a consistent guest experience. Using your brand colours on booking confirmations reinforces your brand identity, helping guests easily recognise your organisation and build trust in your brand. For example, a consistent colour scheme and logo on booking confirmations can increase guest confidence.
Accessing this feature
REQUIRES_DEVELOPER_INPUT
How to use it
Upload Organisation Logo
Locate the Main Logo section.
Click Upload Logo to select your primary organisation logo file. Supported formats include PNG, JPG, and SVG.
Make sure the logo is high-resolution and has a transparent background for optimal display. Recommended dimensions will be specified within the interface.
Repeat this process for the Favicon section, uploading a small, square image (e.g., 32x32 pixels, ICO or PNG format) that appears in browser tabs.
Define Colour Palette
Go to the Colour Scheme section.
Primary Colour: This colour is used for prominent elements such as buttons, active navigation items, and key headings. Click the colour swatch or enter a hexadecimal colour code (e.g., #1A5276) to select your primary brand colour.
Secondary Colour: This colour provides contrast and is used for secondary buttons, highlights, or accents. Select your secondary colour using the same method.
Text Colour: Set the default colour for body text within the portal to make sure readability against your chosen background colours.
Background Colour: Define the overall background colour of your portal interface.
Link Colour: Specify the colour for hyperlinks within the portal content.
Hover Colour: Determine the colour a link or interactive element displays when a user hovers over it.
The preview pane will dynamically update to reflect your colour selections.
Select Typography
In the Typography section, choose the desired font families for your portal.
Heading Font: Select a font for all main headings (H1, H2, H3) within the portal.
Body Font: Select a font for all general text content. Consider readability and brand alignment when making your selections.
A limited set of web-safe or Google Fonts are available to make sure consistent rendering across devices.
Brand Login Screen
Access the Login Page section.
Background Image: Upload a background image for the login page. This image should be high-resolution and visually appealing, reflecting your brand or organisation's values. Make sure the image dimensions are suitable for various screen sizes (e.g., 1920x1080 pixels minimum).
Login Box Position: Adjust the placement of the login form (e.g., left, centre, right) to best complement your background image.
Login Box Transparency: Modify the transparency of the login form's background to allow the background image to show through more or less.
Login Text Colour: Set the colour for text elements on the login page to make sure they are legible against your chosen background.
Apply Custom CSS (Advanced)
For advanced branding beyond the standard options, go to the Custom CSS section.
Enter valid CSS rules into the provided text editor. This allows for detailed control over elements not exposed in the standard branding interface.
Exercise caution when using custom CSS, as incorrect code can affect portal functionality or display. It is recommended to have a solid understanding of CSS before using this feature.
Preview and Save Changes
Throughout the branding process, use the preview pane to see the impact of your selections.
Once satisfied with your branding, click the Save Changes or Publish button (exact label may vary) to apply the new branding to your live Insider Portal.
To revert to the default settings, locate and click the Reset to Default option, if available.
Tips
Logo Management: Upload and manage primary organisation logos and favicons for consistent brand representation.
Dynamic Colour Schemes: Define and apply custom primary, secondary, text, background, and interactive element colours using hex codes or a colour picker.
Typography Control: Select distinct font families for headings and body text to enhance readability and align with brand guidelines.
Login Page Branding: Brand the login screen with unique background images, adjustable login box positioning, and text colours.
Advanced CSS Branding: Implement detailed styling adjustments through a custom CSS editor for comprehensive design control.
Preview: Instantly view all branding modifications before publishing them to the live portal.
Revert to Defaults: Option to reset all branding settings to the default settings.
Maintain Brand Consistency: Make sure all colours, fonts, and logos align precisely with your organisation's established brand guidelines. Inconsistency can dilute brand recognition and professionalism.
Optimise Image Assets: Use high-resolution images for logos and background elements. Compress images where possible to make sure fast loading times without compromising visual quality. Make sure logos have transparent backgrounds for seamless integration.
Prioritise Readability and Accessibility: Select colour combinations and font sizes that offer sufficient contrast for all users, including those with visual impairments. Use online contrast checkers to verify accessibility compliance (e.g., WCAG guidelines).
Test Across Devices: After applying branding, thoroughly test the portal's appearance on various devices (desktop, tablet, mobile) and browsers to confirm responsiveness and consistent display.
Iterate and Refine: Branding is an ongoing process. Gather feedback from users and be prepared to make minor adjustments to optimise the user experience and appearance over time.
Document Brandings: Keep a record of your chosen hex codes, font names, and any custom CSS applied. This documentation is helpful for future updates or troubleshooting.
Need help?
For further assistance, contact us at [email protected]