Customize Login Page
The splash page is the WiFi login screen your customers see when connecting. Customize it with your logo, colors, and welcome message to match your brand.
Overview
Navigate to Splash Pages in the sidebar to create and manage WiFi login pages. Each location can display a different splash page.
Table Columns
Name - Internal reference name for the splash page.
Title - Heading text shown to customers (e.g., "Welcome to Hotel WiFi").
Subtitle - Description text below title (e.g., "Connect to fast, free WiFi").
Status - Page status:
- Active (🟢) - Can be assigned to locations
- Inactive (🔴) - Not available for use
- Draft (🟠) - Work in progress
Login Options - Enabled login methods displayed as tags (Password, Voucher, Logo).
Created At - Page creation date.
Updated At - Last modification date.
Creating a Splash Page
Click + Add to create a new login page. Fill in the basic information:
Basic Fields
Name (required) - Internal reference (e.g., "Hotel Branded Page", "Summer Campaign").
Title (required) - Main heading customers see (e.g., "Welcome to Grand Hotel").
Subtitle (optional) - Secondary text (e.g., "Enjoy complimentary high-speed WiFi").
After creating the basic splash page, click the view icon (👁️) to open the designer and customize appearance.
Customizing with Designer
Click the view icon (👁️) on any splash page to open the visual designer. The designer has three panels:
Components Panel (Left)
Toggle login methods and visual elements on/off:
Password Login (🔐) - Username/password login form. Cannot be enabled with OTP Login.
Voucher Login (🎫) - Voucher code redemption form.
OTP Login (📱) - Mobile number with OTP verification. Cannot be enabled with Password Login.
Logo (🎨) - Display your company logo at the top.
Background Image (🖼️) - Custom background photo.
Terms & Conditions (📋) - Legal terms and privacy policy links.
Login Method Rules
Password Login and OTP Login are mutually exclusive—only one can be active at a time. Voucher Login can be enabled alongside either option.
Live Preview (Center)
Real-time preview showing exactly how customers will see the login page. Switch between device views:
- Mobile (📱) - Phone display
- Tablet (📱) - Tablet display
- Laptop (💻) - Desktop display
Properties Panel (Right)
Customize the selected component's appearance. Properties change based on which component is selected.
Customization Options
Logo Settings
Upload New Logo - Upload logo image from your computer (max 2MB).
Select Logo from Library - Choose previously uploaded logo.
Logo Width - Logo width in pixels (1-800px).
Logo Height - Logo height in pixels (1-500px).
Background Settings
Upload New Background - Upload background image (max 2MB).
Select Background from Library - Choose previously uploaded background.
Overlay Opacity - Darken background (0-100%) to improve text readability.
Password Login Settings
Button Text - Login button label (e.g., "Login with Password", "Sign In").
Button Color - Button color picker.
Voucher Login Settings
Button Text - Voucher button label (e.g., "Login with Voucher", "Redeem Code").
Button Color - Button color picker.
OTP Login Settings
Button Text - Shares setting with Password Login.
Button Color - Shares setting with Password Login.
Shared Settings
OTP Login uses the same button text and color as Password Login since they cannot be enabled simultaneously.
Terms & Conditions Settings
Intro Text - Leading text (e.g., "By continuing, you agree to our").
Terms Link Text - Clickable link text (e.g., "Terms & Conditions").
Terms Content - Full terms and conditions text shown when clicked.
Privacy Connector Text - Text between links (e.g., "and").
Privacy Link Text - Privacy link text (e.g., "Privacy Policy").
Privacy Content - Full privacy policy text shown when clicked.
Global Settings
Title - Main heading text.
Subtitle - Secondary description text (supports multiple lines).
Text Alignment - Left, Center, or Right alignment for title and subtitle.
Title Color - Title text color picker.
Title Font Size - Title size in pixels (10-72px).
Subtitle Color - Subtitle text color picker.
Subtitle Font Size - Subtitle size in pixels (8-48px).
Card Style
Background Color - Login card background color.
Card Opacity - Card transparency (10-100%).
Border Radius - Card corner roundness (e.g., "16px", "1rem").
Saving Changes
After customizing, click Save Changes at the top right. Changes are saved immediately and applied to all locations using this splash page.
Managing Splash Pages
Editing
Click the edit icon (✏️) to modify basic information (name, title, subtitle). For design changes, use the view/designer mode.
Viewing/Designing
Click the view icon (👁️) to open the visual designer and customize all appearance settings.
Audit Log
Click the history icon (📜) to view all changes made to this splash page.
Deleting
Click the delete icon (🗑️) to remove a splash page. Cannot delete pages assigned to locations.
Deletion Restrictions
Splash pages currently assigned to locations cannot be deleted. Unassign from locations first or set status to Inactive.
Use Cases
Hotel Welcome Page
Name: Hotel Branded Welcome
Title: Welcome to Grand Hotel
Subtitle: Complimentary WiFi for all guests
Components: Password Login, Logo, Background Image
Logo: Hotel logo (200x80px)
Background: Hotel lobby photo with 50% overlay
Title Color: White (#FFFFFF)
Button Color: Hotel brand colorCafe Free WiFi
Name: Cafe Guest WiFi
Title: Free WiFi at Coffee House
Subtitle: Connect and enjoy your stay!
Components: Voucher Login, Logo
Logo: Cafe logo (150x60px)
Background: Coffee-themed image
Card: High opacity (95%) for readability
Voucher Button: Green (#52c41a)Event Registration
Name: Conference WiFi Access
Title: Conference WiFi Network
Subtitle: Enter your voucher code from your badge
Components: Voucher Login, Terms & Conditions
Background: Event branding
Terms: Event code of conduct
Privacy: Data collection noticeShopping Mall Portal
Name: Mall Guest Network
Title: Welcome to Central Mall WiFi
Subtitle: Fast, free internet while you shop
Components: OTP Login, Logo, Terms & Conditions
Logo: Mall logo centered
OTP: Collect phone numbers for marketing
Terms: Usage policy and data consentAssigning to Locations
After creating and customizing a splash page:
- Navigate to Locations
- Click edit icon (✏️) on a location
- Select your splash page from the Splash Page dropdown
- Save the location
Customers connecting at that location will now see your customized login page.
Best Practices
Brand consistency - Match colors, logo, and messaging to your existing brand identity.
Background images - Use high-quality photos at least 1920x1080px. Add overlay (40-60%) for text readability.
Logo placement - Keep logos under 200px wide for mobile compatibility.
Login methods - Hotels typically use Password or Voucher; Cafes use Voucher; Businesses collecting data use OTP.
Text clarity - Use short, welcoming titles. Avoid technical jargon.
Mobile-first - Always preview on mobile view—most customers connect via phones.
Terms & Conditions - Include for legal compliance, especially when collecting customer data.
Next Steps
After customizing splash pages, assign them to your Locations so customers see branded login pages when connecting.