Hotspot customisation

The portal presented to the users when they first connect to the Hotspot can be customised in several ways: the Language used in the portal, the text contained in the various pages, the CSS, the logo of the company running the Hotspot, and the portal’s name. The last setting can be configured only from the CLI, while all other can be carried out from the Hotspot’s administration interface, in the Languages section (Hotspot ‣ Administration Interface ‣ Settings ‣ Languages)

Available languages.

There are six languages that are active by default: en (English, also used as default), de (German), it (Italian), ja (Japanese), es (Spanish), pt (Portuguese). A user connecting to the portal can select to customise each of the language. Additional languages can be served by the hotspot, by choosing them from the multi-select box the desired languages

Templates.

These are the templates that can be modified:

Welcome Page

The page presented to the user before logging in.

Account Print

A welcome message printed and handed out to the users after their registration along with their username and password. These are the variables that can be used: $title, $firstname, $lastname, $username, $password.

Terms of Service

They are presented to the user when clicking the link next to the checkbox asking them to accept the Terms of Service before being able to login.

Help

The content of this page will be shown to the user as an help message.

Email body

The text to be included in the e-mail sent with the user’s credentials upon registering, used when registration by email is active. These are the variables that can be used: $hotspot_name, $activation_link, $rate_name, $username, $password, $amount, $price, $currency, $txn_id.

Lost password email body

The text to be included in the e-mail sent with the user’s credentials , used when the user lost them and the password recovery by email option is selected. These are the variables that can be used: $username, $password

Each of the template can be edited for every language avavilable on the hotspot and can make use of the pre-defined variables (see these tables.

Text and images.

The content of the portal, be it images or text, can be modified from the editor, from which it is also possible to upload custom images, CSS and other files. To use the editor, go to the Edit Languages section, choose Portal Templates from the drop-down menu next to the Edit: label, then select the template from the drop-down menu below -labeled with Template- among those available:

  • Welcome Page: The page that all the user see before connecting.

  • Account print: The document to be printed and handed in to the user with her credentials.

  • Terms of Service: The rules that user shall follow during the use of the Hotspot.

  • Help: The page containing help and troubleshooting for the user.

  • Email body: The text of the e-mail sent to the user as confirmation for the successful account creation.

  • Lost password email body: The text of the e-mail sent to the user as a reminder of her credential to access the Hotspot.

In the editor at the bottom of the page it is possible to create documents with text and images. Adding images and custom files s indeed very simple: Put the curson on the point in which to insert an image, then click on the insert button to open a pop-up window called Image Properties. Here, in the Image Info tab, there are two alternatives to insert an image:

  1. Provide an hyperlink to an image on the web in the URL textfield

  2. Click on the Browse Server button to open a file browser and either choose an existing image on the server, or click on the Choose File button on the bottom of the page, to select an image from the local workstation, then click on the Upload button..

Hint

The uploaded files will be stored on the UTM into the /home/httpd/html/userfiles/ directory. Custom files can be also directly uploaded e.g., via SSH in that location.

CSS.

Custom CSS files can also be used: Upload them to the UTM, placing them in the /home/httpd/html/userfiles directory. Like image files, they can be uploaded using the insert button or via SSH. The file shall be named:

  • hotspotcustom.css, the CSS used for the administration interface

  • portalcustom.css, the CSS used for the the Hotspot portal

  • miniportalcustom.css, the CSS used for the Hotspot mini portal, i.e., the one with javascript disabled, tailored for mobile devices.

Hint

The original of these files can be found in the /home/httpd/html/include directory, and are named hotspot.css, portal.css and miniportal.css, respectively. They can be used as a basis for the custom ones.

Logo.

The logo that appears to the users on the portal can be replaced by using custom CSS portalcustom.css or miniportalcustom.css files. Upload the logo in the /home/httpd/html/userfiles directory (which shall be around 100x40 pixels in size), then modify the CSS files like:

div.logo img { display: none; }
div.logo { background-image: url('images/my-logo.png'); }

Hotspot name.

The operation of changing the domain name to the portal must be done manually from the CLI. The CLI access to the UTM can be enabled under Menubar ‣ System ‣ SSH access (see Section Accessing the UTM for directions).

Warning

Editing and modifying by hand any configuration file from the CLI file requires some acquaintance with the UTM internals, since a a wrong edit to a file may cause a service to stop. It is recommended to be careful and it is suggested to save a backup copy of any file before editing it.

To change the Hotspot hostname and domain name, edit as root the file /var/efw/hotspot/settings, using e.g., the installed nano editor, and look for the lines, which are actually variable definitions (the values shown here are only examples):

HOTSPOT_HOSTNAME=hotspot
HOTSPOT_DOMAINNAME=example.com

Replace the values on the right-hand side (hotspot and example.com) with custom ones.

Moreover, since the connection to the captive portal is encrypted, a valid SSL configuration is also required, which amounts to create:

  • a valid certificate (i.e., no self signed one)

  • a private key file, not encrypted, and

  • a file containing the SSL key chain for the certificate.

These files can be created in any directory, although the suggested best practice is to copy these files under /var/efw/hotspot/ as well, to ensure that they are part of every configuration backup. Once all the certificates have been created, is is necessary also to make the Hotspot engine aware of their existence and to overwrite the default certificate settings, again editing the file /var/efw/hotspot/settings and add the following variables:

HOTSPOT_CERT=/<CUSTOM_PATH>/hotspot.example.com-cert.pem
HOTSPOT_KEY=/<CUSTOM_PATH>/hotspot.example.com-key.pem
HOTSPOT_CHAIN=/<CUSTOM_PATH>/hotspot.example.com-cabundle.pem

Remember to replace <CUSTOM_PATH> with the full path to the three certificates.

Finally, if an SSL key chain file is not needed, an empty value can be assigned to the last variable of the above configuration, like:

HOTSPOT_CHAIN=

Meaning of variables.

This is a complete reference for the variables that can be used when customising the Hotspot’s portal templates and portal strings. They prove useful to compose messages tailored to each user: Whenever one of these variables appears in a template, it will be replaced by the corresponding value defined for that account. The variables are grouped together in three tables: Table 1 contains variables that can be used in all portal tempales, Table 2 contains variables that can be used in the Print account template only, and Table 3 contains variable used in the portal strings.

Table 1: Variables for all Portal Templates.

Variable

Replaced by

$title

The title of the account holder

$firstname

The first name of the account holder

$lastname

The last name of the account holder

$username

The username of the account

$password

The password of the account

$rate_name

The name of the Hotspot ticket rate

$amount

The amount of traffic or time available

$price

The cost of the ticket

$currency

The currency in which the ticket was paid.

$txn_id

The ID of the transaction.

The variables in the next table will be replaced in the printed account information by the values supplied in the corresponding fields of the account editor.

Table 2: Variables for the Account Print Portal Template.

Variable

Replaced by

$language

The language of the user

$birth_city

The city or town of the user’r birth

$birth_date

The date of the user’s birth.

$document_type

The document that identifies the user

$document_party

$document_id

The ID of the document

$street

The street in which the user lives

$country

The country the user lives in

$city

The city or town where the user lives

$zip

The ZIP code of the user’s city

$description

The account’s description

$static_ip

$external_id

$phonenumber

The phonenumber supplied by the user

$areacode

$email

The e-mail of the user

Variables for the Portal Strings.

Variable

Replaced by [string #]

%(recovery_freq)s

How frequently can a new password can be recovered [4]

%(phonenumber)s

The user’s phone number [9 42]

%(transaction_id)s

The transaction ID [9 11 28 31 37 42 44 105 121]

%(email)s

The user’s e-mail address [11 44 121]

%(grant_ticket_duration)s

The minutes of the free Internet access [44, 121]

%(seconds)s

The number of seconds an user has to wait [55 113]

%(home)s

The link to the Hotspot’s home page. [107]

Only a few of the portal strings (14 on 123) contain variables. For those 14 strings, it is required that every variable contained in the original string (e.g., string #4 You are limited to one request every %(recovery_freq)s.) be contained also in the translated string.

The strings that contain some variables (and which) are the following:

4 %(recovery_freq)s

9, 42 %(phonenumber)s and %(transaction_id)s

11 %(email)s and %(transaction_id)s

28, 31, 37, 105, %(transaction_id)s

44, 121 %(grant_ticket_duration)s, %(email)s, and %(transaction_id)s

55, 113 %(seconds)s

107 %(home)s