Snippets are short codes that you can embed in your HTML splash pages to render common elements, such as a link for your visitors to authenticate via social media or a WiFi registration form. Your custom HTML template includes boilerplate JavaScript that binds events to certain snippets (e.g. WiFi authentication snippets such as social media authentication links and the WiFi registration and login forms). This JavaScript provides the core functionality for all snippets. To bind your own events to snippet outputs you can use the JavaScript editor.
An example snippet for a registration form looks like this:
[[!RegistrationForm]]You can embed snippets within your own markup and use the CSS editor to style the HTML output. For example, if you wanted to style the registration form you could create the following custom markup and embed the snippet:
<div class="registration-form-container">
<p>Create an account</p>
[[!RegistrationForm]]
</div>You can also style some of the snippets with an 'id' or 'class' parameter and define this style within the CSS. For example:
<div>
[[!RegistrationForm &class=`my-form`]]
</div>When the splash page compiles, the snippets convert into HTML.
To insert a snippet ensure your cursor is in the correct location and click on the required snippet title. The following snippets are available, the options are the id or class parameters you can apply to the snippet:
Fonts
|
Name |
Snippet Code |
Description |
Example HTML Output |
|
Embed a Google font |
[[!GoogleFont]] |
Embeds a style tag which links to a Google font. |
<link href="https://dowj6t3sraq9r.cloudfront.net/Roboto.css" rel="stylesheet" type="text/css"> |
Options
|
Option |
Option Description |
Option Example |
|
font |
The id for the font family |
[[!GoogleFont &font='Roboto']] |
Dynamic Tags
There are no options for these snippets.
|
Name |
Snippet Code |
Description |
Example HTML Output |
|
Venue Name |
%%VENUE.NAME%% |
Outputs the display name of the venue which the WiFi access visitor is currently at. You can add display names for venues in Management > Details. This outputs an empty string if the venue does not have a display name. |
Urban Cafe |
|
Venue Third Party ID |
%%VENUE.THIRD_PARTY_ID%% |
Output the third party id. |
aa1122 |
|
Venue Town |
%%%VENUE.TOWN%% |
The town of the venue. |
Manchester |
|
Venue Country |
%%%VENUE.COUNTRY%% |
Outputs the country of the venue. |
England |
|
Company Name |
%%%COMPANY.NAME%% |
Outputs the name of the company. |
Urban Cafe |
|
Access Point Mac |
%%%ACCESSPOINT.MAC%% |
Output the access point mac address. |
00-11-22-33-44-55 |
|
Access Point SSID |
%%%ACCESSPOINT.SSID%% |
Output the network SSID if it is available. |
Authentication Links
|
Name |
Snippet Code |
Description |
Example HTML Output |
|
Registration Form |
[[!RegistrationFormAuthLink]] |
Embeds an HTML anchor element so visitors can authenticate on to your WiFi via the registration form. Click on the cog to edit the form settings to determine what fields appear on your WiFi registration forms. |
<a href="#form" data-auth-provider="Form">Form</a> |
|
Login Form |
[[!LoginFormAuthLink]] |
Embeds an HTML anchor element so repeat visitors can authenticate on to your WiFi via the login form. |
<a href="#login" data-auth-provider="Login">Login</a> |
|
|
[[!FacebookAuthLink]] |
Embeds an HTML anchor element to allow visitors to authenticate on to your WiFi via Facebook. |
<a href="#facebook" data-auth-provider="Facebook">Facebook</a> |
|
X |
[[!TwitterAuthLink]] |
Embeds an HTML anchor element to allow visitors to authenticate on to your WiFi via X. |
<a href="#twitter" data-auth-provider="Twitter">Twitter</a> |
|
|
[[!LinkedInAuthLink]] |
Embeds an HTML anchor element to allow visitors to authenticate on to your WiFi via LinkedIn. |
<a href="#linkedin" data-auth-provider="LinkedIn">LinkedIn</a> |
|
Vkontakte |
[[!VkontakteAuthLink]] |
Embeds an HTML anchor element to allow visitors to authenticate on to your WiFi via Vkontakte. |
<a href="#vkontakte" data-auth-provider="Vkontakte">Vkontakte</a> |
|
Staff login |
[[!StaffWifiAuthLink]] |
Embeds an HTML anchor element to allow staff logins via SAML. |
<a href="#staffwifi" data-auth-provider="StaffWiFi">Staff WiFi</a> |
|
Apple |
[[!AppleAuthLink]] |
Embeds an HTML anchor element to allow visitors to authenticate on to your WiFi via Apple ID including face and touch ID. |
<a href="#apple" data-auth-provider="apple">Apple</a> |
Options
|
Option |
Option Description |
Option Example |
|
id |
Adds a DOM id to the element. |
[[!RegistrationFormAuthLink &id=`reg-auth-button`]] |
|
class |
Adds a class to the element. |
[[!LoginFormAuthLink &class=`login-auth-button`]] |
|
text |
Sets the text for the element. Defaults to a translated string if not set. |
[[!FacebookAuthLink &text=`Facebook`]] |
Authentication Attributes
There are no options for these snippets.
|
Name |
Snippet Code |
Description |
Example HTML Output |
|
Registration Form |
[[!RegistrationFormAuthAttr]] |
Embeds an HTML data attribute so visitors can authenticate on to your WiFi via the registration form. This snippet should be embedded as an inline attribute within an existing HTML element. Click on the cog to edit the form settings to determine what fields appear on your WiFi registration forms. |
<div class="my-login-auth-button" href="#" data-auth-provider="Login"></div> |
|
Login Form |
[[!LoginFormAuthAttr]] |
Embeds an HTML data attribute so repeat visitors can authenticate on to your WiFi via the login form. This snippet should be embedded as an inline attribute within an existing HTML element. |
<div class="my-login-auth-button" href="#" data-auth-provider="Login"></div> |
|
|
[[!FacebookAuthAttr]] |
Embeds an HTML data attribute to allow visitors to authenticate on to your WiFi via Facebook. This snippet should be embedded as an inline attribute within an existing HTML element. |
<div class="my-auth-button" href="#" data-auth-provider="Facebook"></div> |
|
X |
[[!TwitterAuthAttr]] |
Embeds an HTML data attribute to allow visitors to authenticate on to your WiFi via X. This snippet should be embedded as an inline attribute within an existing HTML element. |
<div class="my-auth-button" href="#" data-auth-provider="Twitter"></div> |
|
|
[[!LinkedInAuthAttr]] |
Embeds an HTML data attribute to allow visitors to authenticate on to your WiFi via LinkedIn. This snippet should be embedded as an inline attribute within an existing HTML element. |
<div class="my-auth-button" href="#" data-auth-provider="LinkedIn"></div> |
|
Vkontakte |
[[!VkontakteAuthAttr]] |
Embeds an HTML data attribute to allow visitors to authenticate on to your WiFi via Vkontakte. This snippet should be embedded as an inline attribute within an existing HTML element. |
<div class="my-auth-button" href="#" data-auth-provider="Vkontakte"></div> |
Authentication Form
|
Name |
Snippet Code |
Description |
Example HTML Output |
|
Registration Form |
[[!RegistrationForm]] |
Embeds a registration form in your HTML so new visitors can authenticate on to your WiFi network. Please note that in preview mode this form cannot be submitted. Click on the cog to edit the form settings to determine what fields appear on your WiFi registration forms. |
<div class="cf"> <form action="/access/register" method="post" data-registration-form="" data-msg-errors="Something doesn't look right."> <div class="form-alert"></div> <div class="form-field register-email required-field" data-error="Please enter a valid email address."> <label for="regform-email">E-mail address<span class="required"> *</span></label> <input type="email" id="regform-email" name="email" required="required" autocomplete="off" class="email"> </div> <div class="form-field register-confirm-email required-field" data-error="Please confirm the email address."> <label for="regform-email">Confirm E-mail address<span class="required"> *</span></label> <input type="email" id="regform-email_confirm" name="email_confirm" required="required" autocomplete="off" class="email_confirm"> </div> <div class="form-field register-password required-field" data-error="Please enter a password."> <label for="regform-password">Password<span class="required"> *</span></label> <input type="password" id="regform-password" name="password" required="required" autocomplete="off" class="password" data-min-length="8"> </div> <div class="form-field register-confirm-password required-field" data-error="Please confirm the password." data-error-confirm="Passwords do not match."> <label for="regform-password-confirm">Confirm Password<span class="required"> *</span></label> <input type="password" id="regform-password-confirm" name="password_confirm" required="required" autocomplete="off" class="password-confirm" data-min-length="8"> </div> <div class="form-field checkbox-field register-agree-terms" data-terms-block="" data-trans-and="and"> <input id="accept-terms-615c76d1f0b92" name="accept_terms" type="checkbox" value="1" data-error="Please agree to the terms and conditions."> <label for="accept-terms-615c76d1f0b92"></label> <span class="default-terms">I agree to Purple's <a href="/terms/wifi/agreement/terms" target="_blank" class="terms-link">EULA</a> and <a href="/terms/wifi/agreement/privacy" target="_blank" class="terms-link">Privacy Policy</a></span> <span class="custom-terms" style="display: none;">I agree to Purple's <a href="/terms/wifi/agreement/terms" target="_blank" class="terms-link">EULA</a> and <a href="/terms/wifi/agreement/privacy" target="_blank" class="terms-link">Privacy Policy</a> and </span> <span data-tpl-custom-term="" style="display: none;" data-base-uri=""><a class="terms-link" href="%url%" target="_blank">%text%</a></span> </div> <input type="hidden" name="form_type" value="RegistrationForm"> <input type="hidden" name="csrf_token" value="%%CSRF_TOKEN%%"> <div class="form-field submit-field register-submit"> <input type="submit" value="Sign up"> </div> </form> |
|
Login Form |
[[!LoginForm]] |
Embeds a login form in your HTML to allow your existing visitors to authenticate on to your WiFi network. Please note that in preview mode this form cannot be submitted. |
<form class="login-form" action="/access/login" method="post" data-login-form data-msg-errors="Something doesn't look right."> <div class="form-alert"></div> <div class="form-field login-email" data-error="Please enter your email address."> <label for="loginform-email">Email address</label> <input type="email" id="loginform-email" name="email" required="required" autocomplete="off" class="email" placeholder="" /> </div> <div class="form-field login-password" data-error="Please enter your password."> <label for="loginform-password">Password</label> <input type="password" id="loginform-password" name="password" required="required" autocomplete="off" class="password" placeholder="" /> </div> <div class="form-field submit-field login-submit"> <input id="loginform-submit" type="submit" value="Sign in" /> </div> <div class="form-field form-text login-forgot-password"> <a href="#" data-forgot-password>Forgot your password?</a> </div> <input type="hidden" name="form_type" value="LoginForm"> <input type="hidden" name="csrf_token" value="%%CSRF_TOKEN%%"> </form> |
|
Password Reset Form |
[[!PasswordResetForm]] |
Embeds a login form in your html to allow your existing visitors to authenticate on to your WiFi network. Please note that in preview mode this form cannot be submitted. |
<form class="" action="/access/resetpassword" method="post" data-password-reset-form data-msg-errors="Something doesn't look right."> <div class="form-body"> <div class="form-alert"></div> <div class="gw-form-field passwordreset-email"> <label for="resetpasswordform-email">E-mail address</label> <input type="email" id="resetpasswordform-email" name="email" required="required" autocomplete="off" class="email" data-error="Please enter a valid email address." /> </div> <div class="gw-form-field submit-field passwordreset-submit"> <input id="reset-password-submit" type="submit" value="Reset" /> </div> </div> <div class="result" style="text-align: center; display: none;"> <img src="/img/tick-large.png" alt="tick" title="tick" /> <p class="message"></p> </div> <input type="hidden" name="form_type" value="ForgotPasswordForm"> <input type="hidden" name="csrf_token" value="%%CSRF_TOKEN%%"> </form> |
Options
|
Option |
Option Description |
Option Example |
|
class |
Add a class to the form. |
[[!LoginForm &class=`login-form`]] |
User Agreements
There are no options for these snippets.
|
Name |
Snippet Code |
Description |
Example HTML Output |
|
End User License Agreement URL |
[[!TermsUrl]] |
Embeds a URL to the Guest WiFi End User License Agreement (EULA). This snippet can be embedded in the href attribute of an anchor tag. |
<a href="/access/agreement/terms " target="_blank">View our terms and conditions</a> |
|
Privacy Policy URL |
[[!PrivacyPolicyUrl]] |
Embeds a URL to the Guest WiFi privacy policy. This snippet can be embedded in the href attribute of an anchor tag. |
<a href="/access/agreement/privacy " target="_blank">Privacy policy</a> |
|
Cookie Policy URL |
[[!CookiePolicyUrl]] |
Embeds a URL to the Guest WiFi cookie policy. This snippet can be embedded in the href attribute of an anchor tag. |
<a href="/access/agreement/cookies " target="_blank">Cookie policy</a> |
Language
There are no options for these snippets.
|
Name |
Snippet Code |
Description |
Example HTML Output |
|
Select Language |
[[!SelectLanguage]] |
Embeds an HTML <select> element to allow visitors to change the language for the access journey. Changing language is disabled in preview mode. |
<div id="lang-select"> <select class="lang-select"> <option data-url="/?locale=en_GB" value="en_GB" selected>British English</option> <option data-url="/?locale=en_US" value="en_US">English (United States)</option> <option data-url="/?locale=nl" value="nl">Nederlands</option> <option data-url="/?locale=fr" value="fr">Français</option> <option data-url="/?locale=de" value="de">Deutsch</option> <option data-url="/?locale=da" value="da">Dansk</option> <option data-url="/?locale=it" value="it">Italiano</option> <option data-url="/?locale=tr" value="tr">Türkçe</option> <option data-url="/?locale=es" value="es">Español</option> <option data-url="/?locale=es_LA" value="es_LA">Español (LA)</option> <option data-url="/?locale=ca_ES" value="ca_ES">Català</option> <option data-url="/?locale=gl_ES" value="gl_ES">Galician</option> <option data-url="/?locale=el" value="el">Ελληνικά</option> <option data-url="/?locale=eu" value="eu">Euskara</option> <option data-url="/?locale=pt" value="pt">Português</option> <option data-url="/?locale=pt_BR" value="pt_BR">Português Do Brasil</option> <option data-url="/?locale=fi_FI" value="fi_FI">Suomi</option> <option data-url="/?locale=sv" value="sv">Svenska</option> <option data-url="/?locale=no_NO" value="no_NO">Norsk</option> <option data-url="/?locale=lv" value="lv">Latviešu</option> <option data-url="/?locale=id" value="id">Indonesia</option> <option data-url="/?locale=ro" value="ro">Română</option> <option data-url="/?locale=bg" value="bg">български</option> <option data-url="/?locale=cs_CZ" value="cs_CZ">Čeština</option> <option data-url="/?locale=hr_HR" value="hr_HR">Croatian (Croatia)</option> <option data-url="/?locale=ru" value="ru">Русский</option> <option data-url="/?locale=cy" value="cy">Cymraeg</option> <option data-url="/?locale=ar_SY" value="ar_SY">العربية</option> <option data-url="/?locale=he_HE" value="he_HE">עברית</option> <option data-url="/?locale=ja" value="ja">日本語</option> <option data-url="/?locale=ko" value="ko">한국어</option> <option data-url="/?locale=th_TH" value="th_TH">ภาษาไทย</option> <option data-url="/?locale=zh_CN" value="zh_CN">中文（简体)</option> <option data-url="/?locale=zh_TW" value="zh_TW">中文（繁體)</option> <option data-url="/?locale=vi" value="vi">Tiếng Việt</option> <option data-url="/?locale=km" value="km">Khmer</option> <option data-url="/?locale=hu" value="hu">Magyar</option> <option data-url="/?locale=lt" value="lt">Lietuvių</option> <option data-url="/?locale=pl" value="pl">Polski</option> <option data-url="/?locale=rs" value="rs">Српски</option> </select> </div> |
|
Current Language |
[[!CurrentLanguage]] |
Embeds the current language that the template is being viewed in. This is determined by either the locale code requested by the user agent or the current language that the visitor has selected. |
British English |
Venue
There are no options for these snippets.
|
Name |
Snippet Code |
Description |
Example HTML Output |
|
Venue Name |
[[!VenueName]] |
Outputs the name of the venue that the WiFi access visitor is currently at. |
Urban Cafe |
|
Venue Display Name |
[[!VenueDisplayName]] |
Outputs the display name of the venue that the WiFi access visitor is currently at. You can add display names for venues in Management > Details. This snippet outputs an empty string if the venue does not have a display name. |
Urban Cafe - the best coffee in the city |
Images
|
Name |
Snippet Code |
Description |
Example HTML Output |
|
Embed an Image Tag |
[[!Image]] |
Embeds an HTML <img> tag with 'width' and 'height' attributes for an image in your template images list. This snippet requires an 'id' option where 'id' is the name of a file in your template images list. |
<img class="logo" src="https://captive.portal.net/my-file.png" width="150" height="100" alt=""> |
|
Image URL |
[[!ImageUrl]] |
Embeds a url to a template image. This snippet requires an 'id' option where 'id' is the name of a file in your template images list. |
<img src="https://captive.portal.net/my-file.png"> |
Options
|
Option |
Option Description |
Option Example |
|
id |
The name of the file. |
[[!Image &id=`my-file.png`]] |
|
class |
Add a class to the element. This only applies to Embed an Image Tag. |
[[!Image &id=`my-file.png` &class=`logo`]] |
Boilerplate Elements
|
Name |
Snippet Code |
Description |
Example HTML Output |
|
Guest WiFi Logo URL |
[[!GuestWiFiLogo]] |
Embeds a url for the boilerplate Guest WiFi logo image. |
<img src="/img/guest-wifi-logo.png"> |
|
Spinner |
[[!Spinner]] |
Embeds boilerplate HTML markup to generate a spinner. |
<div id="page-spinner" class="gw-spinner" data-spinner> <svg><use xmlns:xlink="http://www.w3.org/1999/xlink" xlink:href="#loader-icon"></use></svg> <p>Loading</p> </div> |
|
Powered By |
[[!PoweredBy]] |
Embeds an HTML element containing a 'powered by' message and a link to the WiFi access cookie policy. This snippet is mandatory and we recommend that it is the last element in the <body>. |
<div class="gw-powered-by"> <p>Powered by Purple. View our <a class="terms-link" href="/access/agreement/cookies " target="_blank">cookie policy.</a></p> </div> |
Options
These options only apply to the spinner.
|
Option |
Option Description |
Option Example |
|
id |
Adds a DOM id to the spinner. |
[[!Spinner &id=`main-spinner`]] |
|
class |
Add a class to the spinner. |
[[!Spinner &class=`green small`]] |
|
text |
Sets the text for the spinner. |
[[!Spinner &id=`main-spinner` &text=`Loading page...`]] |