When you create or edit a splash page using HTML it creates a responsive HTML and CSS boilerplate template which you can adapt to suit your needs or completely replace with your own custom HTML, CSS and JavaScript. If you are unfamiliar with HTML or prefer a simpler method to create your splash pages you can use standard templates.
Custom HTML splash page templates are intended for users who have a good knowledge of HTML, CSS and JavaScript and want to create a splash page design that cannot be achieved using the standard splash page template designer. To see a quick start guide example, click here.
The HTML code editor includes:
-
Syntax highlighting to easily identify code elements.
-
Code folding to hide or display sections of code so you only see what you need to.
-
Auto tag completion to save you time and reduce errors
-
Tab indenting to make the code more readable.
You can develop your splash pages offline and upload the HTML, CSS, JavaScript and image files directly into the portal. To upload a file select Upload file, Choose file, browse to and select the file, select Open and Upload.
Preview
Shows a live preview of your current custom HTML page with all CSS styles and JavaScript applied to it. You can jump back to this tab at any point to refresh and preview your changes whilst you develop your page.
HTML
Add your HTML code in this tab. You can use the snippets library to embed common splash page elements such as social media links, forms, spinners and language choice.
CSS
Add all the CSS classes and styles that you need for your page in this tab. You can modify the default boilerplate CSS or create your own.
JavaScript
Add the JavaScript code for your template in this tab. Custom HTML templates utilize jQuery so this library is available for you to use if you require it.
Images
Upload and manage jpeg, gif or png images.
Settings
This tab contains the settings for your splash page.
Access Journey
|
Access journey logo |
This is the company or venue logo for the splash page. The logo is also used for interstitial pages of the WiFi access journey. For example, the Facebook 'Like' page, additional profile page, SMS authentication page etc. To add a logo, select Upload logo, Choose file, browse to and select the file, select Open and Upload. |
|
Background color |
The background color of your splash page, this also styles the headers and buttons of the interstitial pages. |
Editor Settings
|
Code editor theme |
This changes the theme of the code editor on the HTML, CSS and JavaScript tabs, it does not have any impact on the splash pages. |
|
Font size |
This is the font size of the code editor on the HTML, CSS and JavaScript tabs, it does not have any impact on the splash pages. |
Provider Settings
These options enable login access to your WiFi via Facebook, X, LinkedIn and Apple. To add a login method for staff to use to differentiate visitor logins from staff logins, refer to Staff WiFi.
Guide & Resources
A step-by-step guide with referenced resources is available here: https://purpleportal.net/splashpage/custom-html/help/quick-start-guide