Splash Page Editor
The Splash Page Editor is the primary tool for designing and customising the captive portal page your guests see when they connect to your WiFi network. It provides a real-time visual editor with a live preview panel and a comprehensive settings sidebar.
Overview
The editor is built as a full component (EditSplashPage) that renders two main areas:
- Live Preview Panel — A mobile-first preview of your splash page that updates in real time as you make changes. This gives you an accurate representation of what guests will see on their device when they connect.
- Settings Sidebar — A panel of collapsible sections where you configure every aspect of your splash page, from branding and content through to legal links and post-login behaviour.
All changes are reflected instantly in the preview. When you're happy with the result, click Save to publish your splash page to your network.
Accessing the Editor
You can access the Splash Page Editor from:
- Dashboard sidebar → Splash Page
- Onboarding flow → You'll be guided to the editor as part of your initial setup (see Onboarding Mode below)
Settings Sections
The settings sidebar is organised into collapsible sections. Click a section header to expand or collapse it.
1. Branding
Control the visual identity of your splash page.
| Setting | Type | Description |
|---|---|---|
Logo (logo_url) | File upload | Upload your business logo. Displayed prominently at the top of the splash page. Accepts common image formats (PNG, JPG, SVG). |
Background Image (background_image) | File upload | Upload a background image for the splash page. This fills the entire background area behind your content. |
Background Colour (background_color) | Colour picker | Set a solid background colour. If a background image is also set, the colour acts as a fallback while the image loads. |
Primary Colour (primary_color) | Colour picker | The primary accent colour used for headings and key UI elements. |
Button Colour (button_color) | Colour picker | The background colour of the main call-to-action button (e.g., "Connect to WiFi"). |
Button Text Colour (button_text_color) | Colour picker | The text colour inside the call-to-action button. Ensure sufficient contrast with the button colour for readability. |
Tip: Use your brand colours consistently. Upload a high-quality logo and choose a background image that represents your venue.
2. Content
Customise the text your guests see on the splash page.
| Setting | Type | Description |
|---|---|---|
Welcome Title (welcome_title) | Text input | The main heading displayed on the splash page (e.g., "Welcome to Our Café"). |
Welcome Message (welcome_message) | Textarea | A longer message displayed below the title. Use this to greet guests, explain the WiFi, or promote offers. |
Connect Button Text (connect_button_text) | Text input | The label on the main action button. Defaults to "Connect to WiFi". You can change this to anything that suits your brand (e.g., "Get Online", "Join Our Network"). |
3. Login Method
Choose how guests authenticate before gaining WiFi access.
| Option | Value | Description |
|---|---|---|
email | Guests enter their email address to connect. This is the most common method and allows you to build a mailing list. | |
| Social Login | social | Guests log in via a social media account (e.g., Facebook, Google). Useful for capturing richer profile data. |
| Click-Through | click_through | Guests simply click the connect button — no data entry required. Lowest friction, but no data capture. |
| SMS | sms | Guests enter their phone number and receive a verification code via SMS. Provides verified phone numbers. |
| Voucher | voucher | Guests enter a pre-issued voucher code to connect. Ideal for paid WiFi or controlled access scenarios. |
Select the login type from the dropdown. The preview will update to show the corresponding form fields.
Note: Some login methods may require additional configuration (e.g., SMS requires an SMS provider, social login requires OAuth app credentials). Check the relevant integration guides for setup details.
4. Form Fields
When using login methods that collect data (e.g., Email, SMS), you can choose which additional fields to display on the splash page. Each field has two toggles:
| Field | Toggle | Required Toggle | Description |
|---|---|---|---|
| First Name | collect_first_name | Required on/off | Collect the guest's first name. |
| Last Name | collect_last_name | Required on/off | Collect the guest's last name. |
| Phone Number | collect_phone | Required on/off | Collect the guest's phone number. |
| Date of Birth | collect_date_of_birth | Required on/off | Collect the guest's date of birth. Useful for age-gated venues. |
| Postcode | collect_postcode | Required on/off | Collect the guest's postcode/ZIP code. Useful for geographic insights. |
- Toggle on/off — Controls whether the field appears on the splash page at all.
- Required toggle — When enabled, the guest must fill in this field before they can connect. When disabled, the field is shown but optional.
Tip: Only collect the data you actually need. Fewer fields mean higher completion rates. Make fields required only when absolutely necessary.
5. Marketing Consent
Configure how you capture marketing opt-in from guests. This is critical for GDPR and other data protection regulations.
| Setting | Type | Description |
|---|---|---|
Enable Marketing Opt-In (marketing_opt_in_enabled) | Toggle | Show or hide the marketing consent checkbox on the splash page. |
Opt-In Text (marketing_opt_in_text) | Text input | The label displayed next to the checkbox. Defaults to "I'd like to receive marketing emails". Customise this to match your brand voice or legal requirements. |
Default Checked (opt_in_default_checked) | Toggle | Whether the marketing checkbox is pre-ticked by default. Note: In many jurisdictions (e.g., under GDPR), pre-ticking consent checkboxes is not compliant. Check your local regulations before enabling this. |
Important: Always ensure your marketing consent mechanism complies with applicable data protection laws. When in doubt, leave the checkbox unchecked by default and use clear, unambiguous opt-in language.
6. Legal
Provide links to your legal documents. These are displayed as clickable links on the splash page, typically near the bottom.
| Setting | Type | Description |
|---|---|---|
Terms & Conditions URL (terms_url) | URL field | A link to your terms and conditions page. Guests can click to review before connecting. |
Privacy Policy URL (privacy_url) | URL field | A link to your privacy policy. Required in most jurisdictions when collecting personal data. |
Tip: Host your terms and privacy policy on your website and paste the URLs here. Make sure these pages are accessible without WiFi (or consider hosting them within the portal).
7. Post-Login
Configure what happens after a guest successfully connects.
| Setting | Type | Description |
|---|---|---|
Redirect URL (redirect_url) | URL field | The web page guests are sent to after login (e.g., your website, a special offers page, or a review prompt). Leave blank to show the default success screen. |
Success Message (success_message) | Text input | A message displayed on the success screen (if no redirect URL is set). Use this to thank guests or provide additional information. |
Show Social Links (show_social_links) | Toggle | Display links to your social media profiles on the post-login screen. |
Facebook URL (facebook_url) | URL field | Link to your Facebook page. |
Instagram URL (instagram_url) | URL field | Link to your Instagram profile. |
TripAdvisor URL (tripadvisor_url) | URL field | Link to your TripAdvisor listing. |
Twitter / X URL (twitter_url) | URL field | Link to your Twitter/X profile. |
Website URL (website_url) | URL field | Link to your main website. |
Tip: The post-login screen is a great opportunity to drive engagement. Link to your review pages to encourage positive reviews, or redirect to a special offers page.
Live Preview
The live preview panel sits alongside the settings sidebar and renders a mobile-first representation of your splash page. Key details:
- Mobile-first design — The preview simulates a mobile device screen, which is the most common form factor for captive portal interactions.
- Real-time updates — Every change you make in the settings sidebar is instantly reflected in the preview. No need to save and reload.
- Accurate rendering — The preview uses the same styles and layout as the production splash page, so what you see is what your guests will see.
Use the preview to:
- Check colour contrast and readability
- Verify that your logo and background image display correctly
- Preview the form fields and login flow
- Review the complete guest experience from landing to post-login
Onboarding Mode
When you access the Splash Page Editor during the initial onboarding flow (i.e., when setting up your account for the first time), the editor operates in a simplified onboarding mode:
- Guided experience — The editor may highlight key settings and provide contextual tips to help you get started quickly.
- Simplified flow — Some advanced settings may be collapsed or de-emphasised to keep the initial setup focused.
- Celebration on save — When you save your splash page during onboarding, a confetti animation plays to celebrate completing this step! 🎉
- Automatic progression — After saving, you'll be guided to the next step in the onboarding flow.
You can always return to the editor later to adjust any settings you skipped during onboarding.
Best Practices
- Keep it simple — A clean, uncluttered splash page converts better. Use a clear headline, a brief message, and a prominent connect button.
- Use strong branding — Upload your logo, use your brand colours, and choose a background image that represents your venue.
- Minimise form fields — Only collect what you need. Every additional required field reduces completion rates.
- Set a redirect URL — Don't waste the post-login screen. Send guests to your website, a review page, or a special offers page.
- Stay compliant — Always include links to your terms and privacy policy. Configure marketing consent correctly for your jurisdiction.
- Test on mobile — Use the live preview to check your splash page looks great on mobile devices, as the vast majority of guests will be on phones.
Troubleshooting
| Issue | Solution |
|---|---|
| Preview not updating | Ensure your browser supports JavaScript and that no ad-blockers are interfering with the system. Try a hard refresh (Cmd+Shift+R / Ctrl+Shift+R). |
| Logo not displaying | Check the file format (PNG, JPG, SVG) and file size. Very large images may fail to upload. |
| Background image looks stretched | Use an image with a resolution suitable for mobile screens (at least 1080px wide). Portrait orientation works best. |
| Changes not saving | Check your internet connection. If the save button is disabled, ensure all required fields are filled in correctly. |
| Confetti not showing during onboarding | This only triggers on the first save during the onboarding flow. Subsequent saves will not show the animation. |