Disclaimer:

The HeroTill team does not assist with the creation or management of custom hotspot templates.
The creation and management of custom hotspot templates is the WISP’s responsibility.
We would, however, advise that you have a professional assist you with the creation and/or management of the custom hotspot templates.
Custom hotspot templates are not mandatory.

1. Adding a Custom Hotspot Template

We provide two custom templates that may be used once modified. These templates can be found in the following folder on the physical server:

“/var/www/html/datatill/assets/hotspot/templates/” (These files would have to be moved in and out of this directory via FTP)

1.1. To add Custom Hotspot Templates:

To add your custom hotspot templates, you will need to go to “Hotspots” – “Hotspot Setup” – “Hotspot Templates”

On the following screen, click on the “Add Template” button.

The current templates are named as follow:

example
example_data_capture

More custom hotspot templates may be added or renamed as long as they have been stored in the correct directory on the server via FTP.

1.2. Adding a custom hotspot template to a landing page

To add your custom hotspot template to a landing page, go to “Hotspots” – “Hotspot Templates“.

On the hotspot location, you will need to ensure that the following is done:

Select “Use Custom Template”
Select “Custom Template from drop-down menu”.

If no template appears, this means you have not created the custom template correctly under

https://company.com/hotspot/hotspot_templates
Please note it has to be https://Your Company Name.com/hotspot/hotspot_templates

1.3. Sample Hotspot Templates:

2. Template Usage

When using custom templates in HeroTill the various data variables are represented by tokens in the format {{field_name}}.

For example, the {{company_name}} variable will be replaced at display time by the actual company name as defined inside HeroTill.

When the various hotspot pages are loaded from the server to be displayed on the hotspot user’s device the pages are read from disk, the variables replaced with their actual values and the page content is then passed on for display on the end user device.

2.1. Embedded Variables

The variable names must be embedded inside the HTML & javascript code of the template itself. This is then replaced at runtime when the template files are loaded for display.

To display the image visible on mobile devices, use the following HTML:

Some variables are of type CSS. This is used to show or hide certain blocks on the various pages. To use these CSS variables insert them inside a style tag as follows:

This example will hide the entire free trial block if the switch is disabled. The free trial button text and URL link is also supplied via variables.

2.1.1. General Variables:

(available on all pages)

Variable	Type	Description	Source
{{page_title}}	Text	HTML page title	Automatic
{{hotspot_location_name}}	Text	Hotspot location name	Hotspot edit screen
{{company_name}}	Text	HeroTill company name	Company Setup
{{banner_logo_desktop}}	Url	Desktop banner image url	Hotspot edit screen
{{banner_logo_mobile}}	Url	Mobile phone banner image url	Hotspot edit screen

Login header

Variable	Type	Description	Source
{{support_message}}	Text	Custom support text to show	Hotspot edit screen
{{twitter_account}}	Text	Twitter account name	Hotspot edit screen
{{terms_accepted}}	Css	Returns CSS to hide div if already accepted	Automatic
{{terms_link}}	Url	Link to the Terms & Cond page	Hotspot edit screen

Login form

Variable	Type	Description	Source
{{login_text}}	Text	Text to show above login fields	Hotspot edit screen
{{show_error}}	Css	Returns CSS to hide div if no error	Automatic
{{error}}	Text	Login specific error text	Hotspot edit screen

Free Trial

Variable	Type	Description	Source
{{free_trial_enabled}}	Css	Returns css to hide div if disabled	Hotspot edit screen
{{free_trial_details}}	Text	Free trial description text	Hotspot edit screen
{{free_trial_button_text}}	Text	Button Text for Free Trial login button	Hotspot edit screen
{{trial_link}}	Url	Link to login page	Automatic
{{trial_login_link}}	Url	Link to perform free trial login	Automatic

Prepaid

Variable	Type	Description	Source
{{prepaid_enabled}}	Css	Returns CSS to hide div if disabled	Hotspot edit screen
{{prepaid_intro_text}}	Text	Custom prepaid into text to show	Hotspot edit screen
{{twitter_account}}	Text	Twitter account name	Hotspot edit screen

Vouchers

Variable	Type	Description	Source
{{display_voucher_error}}	Css	Returns CSS to hide div if no error	Automatic
{{voucher_error}}	Text	Voucher login error to show below login fields	Automatic
{{show_voucher_purchased}}	Css	Returns CSS to hide div if disabled	Automatic
{{voucher_number}}	Text	Newly purchased voucher number	Automatic
{{voucher_pin}}	Text	Newly purchased voucher pin	Automatic

Products

Variable	Type	Description	Source
{{products_array}}		Start of product list
{{product_id}}	Num	Unique ID for the product	Hotspot Products
{{product_title}}	Text	Product title	Hotspot Products
{{product_cost}}	Amount	Product cost	Hotspot Products
{{currency}}	Text	Currency symbol	System Settings
{{product_expire_months_show}}	Css	Returns CSS to hide div if disabled	Hotspot Products
{{product_expire_months}}	Text	Number of months before product exp	Hotspot Products
{{purchase_link}}	Url	Link to purchase this product	Hotspot Products
{{/products_array}}	Text	End of product list

2.2. Login Page Sample

3. Purchase Page

Same general variables are available as on the login page.

Products

Variable	Type	Description	Source
{{products_array}}		Start of product list
{{product_id}}	Num	Unique ID for the product	Hotspot Products
{{product_title}}	Text	Product title	Hotspot Products
{{product_cost}}	Amount	Product cost	Hotspot Products
{{currency}}	Text	Currency symbol	System Settings
{{product_expire_months_show}}	Css	Returns CSS to hide div if disabled	Hotspot Products
{{product_expire_months}}	Text	Number of months before product exp	Hotspot Products
{{purchase_link}}	Url	Link to purchase this product	Hotspot Products
{{/products_array}}	Text	End of product list

Example:

The {{products_array}} can contain many products, and the code example below can be used to display these multiple products, together with the product info like price, purchase link, etc.

4. Status Page

Same general variables are available as on the login page.

Active Session Status

Variable	Type	Description	Source
{{usage_color}}	Text	Red, orange or green, depending on usage level	Automatic
{{usage_class}}	Text	Css label danger, warning or success	Automatic
{{status_url}}	Url	Link to reload the status page	Automatic
{{username}}	Text	Logged in /username	Automatic
{{ip}}	Text	IP Address	Automatic
{{mac}}	Text	MAC Address	Automatic
{{login_by_mac}}	Css	Returns css to hide not login by mac	Automatic
{{trial}}	Css	Returns css to hide not login by trial	Automatic
{{show_if_customer}}	Css	Returns css to hide if not customer acc	Automatic
{{show_if_prepaid}}	Css	Returns css to hide if not prepaid acc	Automatic
{{customer_title}}	Text	Customer title	Automatic

Active Session Usage

Variable	Type	Description	Source
{{usage_limit}}	Text	Data limit text	Automatic
{{usage_to_date}}	Text	Data used	Automatic
{{show_if_usage_percent}}	Css	Returns css to hide if uncapped data	Automatic
{{usage_percent}}	Url	Usage percentage	Automatic
{{show_if_package_explained}}	Css	Returns css to hide no package details	Automatic
{{package_explained}}	Text	Package details and limits	Automatic
{{capped_package}}	Css	Returns css to hide if uncapped	Automatic
{{show_if_usage}}	Css	Returns css to hide if no usage exists	Automatic
{{show_if_prepaid_usage_detail}}	Css	Returns css to hide if no prepaid usage	Automatic
{{if_topups}}	Css	Returns css to hide if no topups	Automatic
{{if_no_topups}}	Css	Returns css to hide if topups exist	Automatic
{{usage_detail}}	Text	Total data & time usage for the current product	Automatic
{{topup_to_date}}	Text	Topups applied for the current period	Automatic
{{total_limit}}	Text	Total data & time limit	Automatic
{{if_this_session_time_left}}	Css	Returns css to hide if no time limit defined	Automatic
{{this_session_time_left}}	Text	Remain time for the current session	Automatic
{{this_session_time_used}}	Text	Total time used for the current session	Automatic
{{show_if_not_trial_not_voucher}}	Css	Returns css to hide if trial or voucher	Automatic
{{show_if_voucher}}	Css	Returns css to hide if not a voucher	Automatic
{{voucher_explained}}	Text	Voucher data & time limits	Automatic
{{show_if_voucher_data_limit}}	Css	Returns css to hide if not voucher with data limit	Automatic
{{voucher_data_usage}}		Current voucher data used	Automatic
{{show_if_voucher_time_limit}}	Css	Returns css to hide if not voucher with data limit	Automatic
{{voucher_time_usage}}		Current voucher time used	Automatic
{{if_trial_with_data_limit}}	Css	Returns css to hide if not free trial with data limit	Automatic
{{free_trial_data_remaining}}		Current free trial session data used	Automatic
{{free_trial_data_limit}}		Current free trial session time used	Automatic
{{if_trial_with_time_limit}}	Css	Returns css to hide if not free trial with time limit	Automatic
{{free_trial_time_remaining}}		Current free trial session remaining time	Automatic
{{free_trial_time_limit}}		Current free trial session total time limit	Automatic

5. Logout Page

Same general variables are available as on the login page.

Last Session Details

Variable	Type	Description	Source
{{usage_color}}	Text	Red, orange or green, depending on usage level	Automatic
{{usage_class}}	Text	Css label danger, warning or success	Automatic
{{status_url}}	Url	Link to reload the status page	Automatic
{{username}}	Text	Logged in /username	Automatic
{{ip}}	Text	IP Address	Automatic
{{mac}}	Text	MAC Address	Automatic
{{login_by_mac}}	Css	Returns css to hide not login by mac	Automatic
{{trial}}	Css	Returns css to hide not login by trial	Automatic
{{show_if_customer}}	Css	Returns css to hide if not customer acc	Automatic
{{show_if_prepaid}}	Css	Returns css to hide if not prepaid acc	Automatic
{{customer_title}}	Text	Customer title	Automatic
{{link_login}}	Url	Link to get back to login page	Automatic

Usage Details

Variable	Type	Description	Source
{{usage_limit}}	Text	Data limit text	Automatic
{{usage_to_date}}	Text	Data used	Automatic
{{show_if_usage_percent}}	Css	Returns css to hide if uncapped data	Automatic
{{usage_percent}}	Url	Usage percentage	Automatic
{{show_if_package_explained}}	Css	Returns css to hide no package details	Automatic
{{package_explained}}	Text	Package details and limits	Automatic
{{capped_package}}	Css	Returns css to hide if uncapped	Automatic
{{show_if_usage}}	Css	Returns css to hide if no usage exists	Automatic
{{show_if_prepaid_usage_detail}}	Css	Returns css to hide if no prepaid usage	Automatic
{{if_topups}}	Css	Returns css to hide if no topups	Automatic
{{if_no_topups}}	Css	Returns css to hide if topups exist	Automatic
{{usage_detail}}	Text	Total data & time usage for the current product	Automatic
{{topup_to_date}}	Text	Topups applied for the current period	Automatic
{{total_limit}}	Text	Total data & time limit	Automatic
{{if_this_session_time_left}}	Css	Returns css to hide if no time limit defined	Automatic
{{this_session_time_left}}	Text	Remain time for the current session	Automatic
{{this_session_time_used}}	Text	Total time used for the current session	Automatic
{{show_if_not_trial_not_voucher}}	Css	Returns css to hide if trial or voucher	Automatic
{{show_if_voucher}}	Css	Returns css to hide if not a voucher	Automatic
{{voucher_explained}}	Text	Voucher data & time limits	Automatic
{{show_if_voucher_data_limit}}	Css	Returns css to hide if not voucher with data limit	Automatic
{{voucher_data_usage}}		Current voucher data used	Automatic
{{show_if_voucher_time_limit}}	Css	Returns css to hide if not voucher with data limit	Automatic
{{voucher_time_usage}}		Current voucher time used	Automatic
{{if_trial_with_data_limit}}	Css	Returns css to hide if not free trial with data limit	Automatic
{{free_trial_data_remaining}}		Current free trial session data used	Automatic
{{free_trial_data_limit}}		Current free trial session time used	Automatic
{{if_trial_with_time_limit}}	Css	Returns css to hide if not free trial with time limit	Automatic
{{free_trial_time_remaining}}		Current free trial session remaining time	Automatic
{{free_trial_time_limit}}		Current free trial session total time limit	Automatic