Customise your WiFi page design
You can update the design of your guest login page in your guest WiFi journey. You will need access to Login Journeys in your WiFi configuration to complete these steps. These changes help you create a branded and engaging login experience for your guests.
Follow along with our video guide.
Select a journey to edit
Follow the steps below to open the journey and access the design tools for the page you plan to customise:
Click Configure WiFi in the left-hand menu, then open Login Journeys.
Click the name of the journey you want to update.
Or click the Cog
icon, and then click Edit.
In the Login Journey editor, select the Show Page
node.Then click the edit
icon to open the page design editor.
Set up your layout
📌 Note: The Standard Template is recommended for most users because it is regularly improved and supports all available features.
Follow these steps to customise the main images in your page design:
Select Standard Template from the template list.
Optional: Enter a description to help you identify the page, for example Edinburgh venue or Christmas promotion.
Select your logo and background image. You can either select an existing image asset from the dropdown list or click the upload
icon to add a new image. See the Asset Requirements section for supported formats.
If you prefer a video background, select a video from the dropdown list or click the upload
icon to upload a new a background video. See the Asset Requirements section for supported formats.
🤓 Tip: If using a video background, adding a fallback background image or page colour ensures your page still looks good on devices with power-saving modes.
Set your colours and text
Next, update colours, fonts and button styles to match your brand. Follow the steps below:
Choose your Page Colour by clicking the colour selector to access the colour options.
You can use RGB, HSL or Hex values. To select your preferred value click RGB to cycle through to HSL or Hex.
You can also use the eyedropper tool to match colours already on screen. Click the eyedropper
icon and then click on your preferred colour on screen.
Optional: To change the Call to Action Text, delete 'GET ONLINE' and enter your chosen text.
Choose the Call To Action text colour that appears above your login methods. Click the colour selector to access the colour options.
Update the Email Login Button colour and text colour. Click the colour selector to access the colour options.
To switch between a rectangular or rounded button, click the Rounded Buttons toggle.
The default Yes option is a rounded pill shape, turning off to No, will change the button to a rectangular shape.
You can adjust the alignment of the call to action text and login options. To move elements to the bottom, turn on the Align Main Content to Bottom toggle.
In the Form Background Colour field, set the form's background and text colour.
Preview this by clicking Use your email.
If you want to use different fonts, choose from the available options or upload a custom font file. Most common web font formats are supported.
🤓 Tip: Separate fonts may be used for headings and body text on the login page and across the full login journey.
Add promotional content
It is also possible to add optional images to highlight offers or campaigns. You can place images in one of three positions:
Content Image 1 appears above your call to action.
Content Image 2 appears below the login methods.
Footer Image appears at the bottom of the page.
⚠️ Important: Content Images appear on the login page before the guest goes online. Because the guest is still offline, these images cannot contain hyperlinks. Use wording such as 'Download on the App Store' rather than wording that implies a clickable link.
To add an image, select an existing image asset from the dropdown list or click the upload
icon to add a new image.
🤓 Tip: Content Images support GIF format, so you can display all your promotions on a carousel.
If you want to schedule different images for seasonal campaigns or tailor images for different venues, use Decision Nodes in your journey logic.
Save and preview your journey
Finally save and preview the login journey by following the below steps:
Click Close, then click Save Journey.
Click Preview to view how your design will appear to guests.
Asset requirements
Below is a list of the different image, video and font requirements:
Logo: JPG or PNG, up to 400 pixels wide.
Background image: JPG or PNG, landscape format only, minimum width 1200 pixels.
📌 Note: Mobile view is a central crop of the image, so we would recommend a zoomed-out style image.
Background video: MP4 using h264; with no audio, text or logo, landscape 16:9 ratio, maximum 5 MB. 20 seconds or less. Plays on repeat.
Fonts: WOFF, WOFF2, TTF or OTF.
Content images: JPG, PNG or GIF, recommended width up to 400 pixels.