Disclaimer:

 

  • The DataTill 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

1.3.  Sample Hotspot Templates:

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

2.  Template Usage

 

When using custom templates in DataTill 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 DataTill.

 

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 DataTill 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

 

6.  Code Examples

6.1.  Login

 

 

6.2.  Logout Page

 

 

6.3.  Purchase

 

 

6.4.  Status