www.hsnetworkmanager.com
Administrator Manual
Templates

Templates customise functionalities, some texts and graphics of the Welcome Portal and Apps.

In practice, if you want to customise the Welcome Portal or login page, you have to define a template based on the manager’s requests and work on the images, backgrounds, text, CSS, etc.

The Context Dropdown Menu

By clicking on the context properties button of the template, you expand the context dropdown menu with a range of options grouped by: edit; admin.

Commands

Button Description
Import Allows you to import the template from a previously exported file. File must be separated by a semicolon, have a first header row with the “Code” and “Langdata” columns and have n lines of translations with code and translated text. The syntax of the file can be analysed by exporting translations by pressing the “Export” button.
After the import, it is necessary to save the translations by using the “Save” button on the top-right for changes to take effect.

The “Edit” Section

It contains the standard editing options.

The “Admin” Section

It contains the following options:

Option Description
Export Data Allows downloading the template data to a file in order to upload it in another HSNM using the “Import” button on the top-right.

Adding or Editing

To add a new image, select “Templates” and press “Add template” in the command bar. While to modify a template, press the context button of the image and select “ Edit”. In both cases, a page appears that allows you to manage the following fields:

General data

Definitions

Field Description
Code Code assigned to the template
Use Default If enabled, undefined values are uploaded by the default template defined in the general options in the “Welcome Portal template” field.
Notes Enter possible notes for the template.

Welcome Portal

Definitions

Field Description
Main Title Main title of the Welcome Portal displayed at the top.
If the template is used on a domain that uses the Welcome Portal lite, it will not be considered.
Subtitle Subtitle of the welcome displayed at the top.

If the template is used on a domain that uses the Welcome Portal lite, it will not be considered.
Theme Colour combination to use for the Welcome Portal. The available options are: default; light.
Main Image Image displayed on the upper left corner of the Welcome Portal. It must have dimensions of 100 x 100 pixels.

If the template is used on a domain that uses the Welcome Portal lite, it will not be considered.
Display App Bar When enabled, it displays the App bar.

You can use it only if the license of the Welcome Portal module is active.
Display Sidebar Button When enabled, it displays the button to access the Sidebar.

You can use it only if the license of the Welcome Portal module is active.
Display Apps in the Sidebar When enabled, it displays the App list in the Sidebar.

You can use it only if the license of the Welcome Portal module is active.
Welcome Portal Customization Enable the Welcome Portal customization by activing the fields “Custom HTML Head”, “Custom CSS”, “Custom JavaScript” and “Custom HTML”.

If customizations have been entered, disabling this value does not lose their content. It hides them from the administration interface and does not use them for the Welcome Portal. If it is reactivated, the content will be revised and reused

You can use it only if the license for Welcome Portal is active.
Help for User Help displayed to users on the Welcome Portal.

Welcome Portal Intro (no Lite)

These fields customise the introduction, that is, the page displayed to the user before moving on to Welcome Portal that allows the login and use of the Apps.
These options are not available if the module “Welcome Portal” has not been activated and they will be considered only if in the domain you have chosen the option “Welcome Portal” in the “Users login interface” field.

Field Description
Intro Type Defines the type of Intro to be displayed in the Welcome Portal. Possible values are: none, upload image from file; static image, image of the place where the gateway is installed, Flickr image from the photo set, images based on the weather forecast of the gateway location, YouTube video, external URL.
Image for Intro Defines the image displayed in the intro when “Upload Image from File” has been choosen in the introduction type.
Static Image URLs List of the URLs of the images to display or custom image variables (syntax: % %CustomImage:ImageID%) separated by comma.

If you enter multiple images, they will appear in random rotation.
Flickr Photo Set Name Flickr photo set assigned to the set of images to display.
YouTube Video ID List of ID videos of YouTube separated by commas. They will appear randomly.
External URL Defines an external URL without http:// prefix that contains the page you want to display in the intro.

Warning! If the external site contains links to other URLs, you have to enter the relating Walled Gardens otherwise users will not be able to view them.

Warning! The (http or HTTPS) protocol between Welcome Portal and external URL must match. Basically, if the Welcome Portal is on HTTPS, even the external site must be included in HTTPS.

The external displayed site may execute the following JavaScript comands:

Comand Description
window.top.postMessage (‘HideSkipIntro’) Hides the button to skip the intro. It prevents the user to close the intro. It is used with the command “SkipIntro”.
window.top.postMessage
(‘SkipIntro’, ‘*’)

Skip the intro. It works as if the user clicks the button. 
It can be useful to control the closure of the hosted site only after the user has performed certain operations.

The external displayed site may execute the following JavaScript comands:
Redirect URL URL for the click of the intro.
External Video URL Defines the URL of the external MP4 video in the intro.

If case of CO.IN., it is recommended to upload the video in a domain that uses a HTTP protocol, in this way it is provided to the clients from the cache, saving bandwidth.

The video format must be MP4.

 If the Welcome Portal is in HTTPS, the URL for the external video must be in HTTPS otherwise it will not be executed.
Video Poster Defines the image displayed as poster when the video is not yet running.
Skip Button Seconds Number of seconds to display the introduction before displaying the button to move on to the Welcome Portal.
With a negative value, it requires a click from the user.
For YouTube videos, if the user does not click play after 10 seconds, the countdown starts anyway. It was made to allow the user to switch to the Welcome Portal and therefore to the Login App even in cases where there are problems with YouTube videos.

Warning! Any external App URL is automatically added to the Walled Gardens. If the external App requires or refers to other external URLs, those must be added manually in the “ Walled Garden“.

Background

Field Description
Background Type Defines the type of background to be displayed in the Welcome Portal. Possible values are: none, upload image from file, static image, image of the place where the gateway is installed, Flickr image from the photo set, images based on the weather forecast of the gateway location.
Background Image Defines the image displayed in the background of the Welcome Portal when “Upload Image from File” has been choosen in the background type.
Static Image URLs List of the URLs of the images to display or custom image variables (syntax: % %CustomImage:ImageID%) separated by comma.

If you enter multiple images, they will appear in random rotation.
Flickr Photo Set Name Flickr photo set assigned to the set of images to display.

Apps

Field Description
Default App Apps to be uploaded automatically when opening the Welcome Portal. If in the domain that uses the template, you have set the Welcome Portal lite, only the info and login apps will be allowed. In this case, if you have defined another app, the setting is ignored and it uploads the login app.
By selecting “Custom App”, it is possible to select in the “Default Custom App” field, a Custom App to load.
Default Custom App Default Custom App to load if you have selected “Custom App” in the “Default App” field.

Warning! The selected App is not loaded if it has not been enabled in the domain or in the gateway.
Hide Info App If enabled, it does not display the Info App.

If the template is used on a domain that uses the Welcome portal lite, it will not be considered.
Hide Login App If enabled, it does not display the Login App.

If the template is used on a domain that uses the Welcome Portal lite, it is not considered

It can be useful if you intend to provide a system that does not allow web browsing but only provide contents through the Info Apps or Custom Apps. Kiosks are a typical example.
Hide Surf App If enabled, it does not display the Surf App.
Hide Profile App If enabled, it does not display the App of the user profile management.

If in the domain the option “Automatic Login for MAC address” has been enabled, the user’s App profile is visualised immediately if the devices MAC address is recognised by the system otherwise it is visualised after the login.

If the template is used on a domain that uses the Welcome Portal lite, it will not be considered.
Hide Weather App If enabled, it does not display the weather app.

If the template is used on the domain that uses the Welcome Portal lite, it will not be considered.
Hide AroundMe App If enabled, it does not display the around me app.

If the template is used on a domain that uses the Welcome Portal lite, it will not be considered.
Connection Status App after Login If enabled, it displays the Connection Status App after the login.
Default App after Login Defines the App to load automatically after the user has logged in. If in the domain that uses the template, you have set the Welcome Portal Lite, only the Connection Status App is allowed. In this case, if you define another App, the setting will be ignored and it will load the Connection Status App.
Possible options are:

  • Default;
  • None;
  • Info;
  • Connection Status;
  • Weather;
  • Around Me;
  • Profile;
  • Custom App.

By choosing “Custom App”, you enable the “Default Custom App to Load after Login” field which allows you to choose a custom App to display.
Default Custom App to Load after Login

Default custom App to load after the login.

The field is enabled only if you have chosen “Custom App” in the “Default App after Login” options.
Button Styles App button styles:
The possible values are:

  • Default (it uses any upper level setting);
  • Rounded Corners;
  • Square;
  • Circle;
  • Rounded Corners Right-Top Left-Bottom;
  • Rounded Corners Left-Top Right-Bottom;
  • Rounded Corners Left-Top Right-Top;
  • Rounded Corners Left-Bottom Right-Bottom;
  • Elliptical Left;

Elliptical Right.
Info App Icon Allows you to select and upload a customised image for the Info App displayed in the Welcome Portal.
Login App Icon Allows you to select and upload a customised image for the Login App displayed in the Welcome Portal.
Surf App Icon Allows you to select and upload a customised image for the Surf App displayed in the Welcome Portal.
Connection Status App Icon Allows you to select and upload a customised image for the Connection Status App displayed in the Welcome Portal.
AroundMe App Icon Allows you to select and upload a customised image for the “AroundMe” App displayed in the Welcome portal.
Weather App Icon Allows you to select and upload a customised image for the Weather App displayed in the Welcome Portal.
Profile App Icon Allows you to select and upload a customised image for the user Profile App displayed in the Welcome Portal.
Surveys App Icon Allows you to select and upload a customised image for the Surveys App displayed in the Welcome Portal.
Default Custom App Icon Allows you to select and upload a customised image for the “Custom” Apps without a specific icon displayed in the Welcome Portal.

For the App icons, it is recommended to upload them in SVG format with the size of 128 x 128 pixels in order to obtain images defined in all resolutions.

Colours

Field Description
Type Type of combinations of colours that you can use.
Possible values are:

  • Default: uses pre-defined colours;
  • Custom: allows you to define colours, with its any transparency, of the Welcome Portal areas, using the different field that appear.
Background

Background colour of the Welcome Portal that is displayed when an image is not uploaded.

Visible only if you have chosen “Custom” in the “Colour Type” option.
Header Background Background colour for the header bar.

Visible only if you have chosen “Custom” in the “Colour Type” option.
Header Texts Texts colour for the header bar.

Visible only if you have chosen “Custom” in the “Colour Type” option.
App Background Background colour for the App bar.

Visible only if you have chosen “Custom” in the “Colour Type” option.
App Texts Texts colour for the App bar.

Visible only if you have chosen “Custom” in the “Colour Type” option.
Sidebar Background Background colour for the sidebar.

Visible only if you have chosen “Custom” in the “Colour Type” option.
Sidebar Texts Text colour for the sidebar.

Visible only if you have chosen “Custom” in the “Colour Type” option.
Title Sidebar Background Background colours of titles for the sidebar.

Visible only if you have chosen “Custom” in the “Colour Type” option.
Title Sidebar Texts Text colour of titles for the sidebar
he sidebar It defines the texts colours of the sidebar headlines.

Visible only if you have chosen “Custom” in the “Colour Type” option.

Custom HTML Head

Visible only if you have activated the “Welcome Portal Customization”.

Field Description
Custom Head HTML It allows entering custom definitions in the HTML HEAD.

Custom CSS

Visible only if you have activated the “Welcome Portal Customization”..

Field Description
Custom CSS CSS that allows customizing the graphic aspect of the Welcome Portal.
To hide, for example, the button “Disconnect” in the connection status App, enter the following CSS definition:
#StatusMainContainer .SubmitBox {
    display: none;
}

Custom JavaScript

Visible only if you have activated the “Welcome Portal Customization”.

Field Description
Custom JavaScript It allows entering custom JavaScript.

Custom HTML

Visible only if you have activated the “Welcome Portal Customization”.

Field Description
Custom HTML

Allows you to define the custom HTML that makes up the Welcome Portal.
The content will be inserted in the “BODY” of the page and added to other predefined elements.

You can use it only if the Welcome Portal module is active.

The basic HTML scheme for the Welcome Portal is as follows:

<!– PAGE HEADER –>

<div id=”WP_AppContainerBar”>

<div id=”WP_AppContainerInner”>

<div id=”WP_AppContainerBarText”>

<div id=”WP_AppContainerBarLogoContainer”>

<img class=”HotspotLogo” src=”/functions/get-image.php?t=10&tmplid=%Template_ID%” alt=””/>

</div>

<div class=”WP_AppContainerBarTitle”>

<div class=”WP_AppContainerBarTitleRow”>%Template_PortalTitle%</div>

<div class=”WP_AppContainerBarSubTitleRow”>%Template_PortalSubTitle%</div>

</div>

</div>

</div>

</div>

<!–TOP BANNER–>>

<div id=”WP_AppContainerBarTopBanner” style=”display:none;”>

<img id=”WP_AppContainerBarTopBannerImg” src=”” alt=””/>

</div>

<!–APP BAR CONTAINER (Automatically added if “Display App Bar” is active)–>

<div id=”WP_AppContainer”>%WP_AppBar%</div>

<!–SIDEBAR BUTTON (Automatically added if “Display the Sidebar Button” is active)–>

<a id=”SidebarButton” href=”#” style=”display: none;”>%WP_SidebarButton%</a>

<!–WELCOME PORTAL MAIN CONTAINER –>

<div id=”WP_Container”>

<!–LEFT BANNER–>

<div id=”Wp_AppLeftBanner” style=”display:none;”>

<img id=”Wp_AppLeftBannerImg” src=”” alt=””/>

</div>

<!–RIGHT BANNER–>

<div id=”Wp_AppRightBanner” style=”display:none;”>

<img id=”Wp_AppRightBannerImg” src=”” alt=””/>

</div>

<!– INTRO MIXED CONTENT –>

<div id=”WP_FullScreenAd”>

%WP_IntroContent%

</div>

<!–POWERED BY–>

<div id=”WP_AppBarPoweredBy”>

Powered by <a target=’_blank’ href=’https://www.hsnetworkmanager.com’>HSNM Hotspot Manager</a>

</div>

</div>

Using the basic scheme above, you will get the same result as the “standard” Welcome Portal.

The following variables can be used in HTML:

Code Descritption
%Address% Address defined in the manager.
%City% City defined in the manager.
%CompanyName% Company name defined in the manager.
%Country% Country defined in the manager.
%Domain% Name of the domain.
%EMailAddress% Email address defined in the manager.
%FirstName% First name defined in the manager.
%FreeProductDescription% Description of the free product defined in the domain.
%GatewayName% Name of the gateway.
%Lang% Defines the language code chosen by the user. It can be useful to parameterize the texts displayed to the user using custom JavaScript. The codes of the languages passed are the follows:

  • us: English United States;
  • en: English United Kingdom;
  • es: Spanish;
  • fr: French;
  • de: German;
  • it: Italian;
  • l1: first additional language;
  • l2: second additional language;
  • l3: third additional language.
%LastName% Last name defined in the manager.
%Phone% Phone number defined in the manager.
%SmsNumber% Main phone number to which a confirmation/registration SMS will be sent depending on what is defined in the domain registration mode.
%SmsNumber2% Secondary phone number to which a confirmation/registration SMS will be sent depending on what is defined in the domain registration mode.
%Translations_ID%

Insert the translation text for the Welcome Portal based on the ID defined and the active language.

Instead of “Translations_ID”, you need to enter the translation code to be inserted.
%Template_ID% ID of the reference template. It can be used for example to load the main image defined in the template by using the following URL in the “src” attribute of an “img” tag: src=”/functions/get-image.php?t=10&tmplid=%Template_ID%”.
%Template_PortalTitle% Title of the Welcome Portal in the active languages.
%Template_PortalSubTitle% Subtitle of the Welcome Portal in the active languages.
%Web% Web address entered in the manager.
%WP_IntroContent% Content of the Intro.
%WP_AppBar% Content of the AppBar.
%WP_SidebarButton% Button of the Sidebar.
%Zip% ZIP code defined in the manager.

Google Tag manager

Field Description
Enable Google Tag Manager Enable the Google Tag Manager service.
Google Tag Manager ID Insert the Google Tag Manager ID for the container created in the workspace (Eg. GTM-XXXXXXX).
Enable Google Analytics Enable the Google Analytics service.
Enable HotJar Enable the HotJar service.

Info App

Field Description
Maximized Show the app info in maximised mode.
Top Custom HTML Custom HTML to display at the top.
The text may contain HTML code.
Header Image Image displayed at the top. Recommended dimensions: 1920 x 200 pixels (maximised display) or 800 x 300 pixel (standard display).
Header Image Link Define an URL for the header image.
Footer Image Image displayed at the bottom.
Footer Image Link Define an URL for the footer image.
Welcome Text Enter the text that, if not defined otherwise by the custom CSSs, will appear below the header image.
The text may contain HTML code.
Bottom Text Enter the text that, if not defined otherwise by the custom CSSs, will appear at the bottom of the app.
The text may contain HTML code.
Custom CSS CSSs that allow you to customise the graphical appearance of the info app.

Login App

Field Description
Custom HTML Custom HTML to be displayed at the top.
Header Image Image displayed at the top. Recommended dimensions: 601 x 185 pixels.
Image Link Defines the URL for the header image.
Welcome Text Welcome text.
The text may contain HTML code.
Text for SMS Request Request SMS text.
The text may contain HTML code.
Bottom Text Text that appears at the bottom.
Text to Require the Password Customised text displayed it in the field of password request if the registration mode to the domain is defined on “Simple password. No registration”.
Text for Marketing Consent Text displayed to the user to request consent for the processing of data for marketing purposes.
Message for Country Calling Code Not Accepted Message displayed to the user at the end of the registration to inform you on how to activate the login if the international country calling code is not among those planned.
Custom CSS CSSs that allow you to customise the graphical appearance of the login app.
Custom JavaScript JavaScript that allows customising the logic function of the login app.

Without Welcome Portal

Fields that are used if the Login app is displayed without the support of the Welcome Portal.

These fields are available only if the hardware version of HSNM is less than 1.7. After version 1.7 and following ones, you can no longer view the front-end without Welcome Portal (the old login page).

Field Description
Help for User Help for the login app if the user interface is without Welcome Portal. In the text, you can use variables: %Domain% (Manager’s domain name), %CompanyName% (Business manager), %SmsNumber% (Number assigned to the first modem), %SmsNumber2% (Number assigned to the second modem).
The text may contain HTML code.
Footer Image Image displayed at the bottom with the user interface without Welcome Portal.
Header Image Link Define an URL for the footer image.

User Profile App

Defines the parameters for the user profile app.

Field Description
Enable the Profile Changes If enabled user can modify or update the data of its profile.
Enable the Password Changes If enabled user can modify the password.
Enable Disconnection of the Devices If enabled, user can disconnect the connected devices.
Devices can be disconnected only if:

  • A gateway type MikroTik is used.
  • If the gateway has a public IP or if in the gateway configuration, in the “Internet connection IP address or DynDNS name” field, you have entered the IP address or the DynDNS name of the xDSL router where it is connected the gateway on which the NAT (port forwarding) has been enabled for the port 8728.

If, in the gateway configuration, in the “MikroTik Router OS” section, you have entered the ‘Admin password’.
Enable Sending Receipts If enabled, users can send themselves the payment receipts.

Warning! In the list of the connected devices a button is available to force disconnection of the devices and it is shown only if the Gateway is in “Same network of the appliance” (option present in The Gateway configuration).

The GDPR (General Data Protection Regulation) in force in Europe from May 25 2018, provides that users who register can then access, edit, delete or download their data.

To comply with this obligation, it is necessary to provide users, eventually via notification mail of successful registration, the URL to access the system and then to the user profile App even when not connected to a WiFi network managed by HSNM. The system provides remote access via the following URL:

http://www.yourdomain.com/portal/index.php?domain=YourDomainName&hotspotname=YourGatewayName&language=en&slogin (replace www.yourdomain.com with the URL to reach the HSNM, YourDomainName with the domain name and YourGatewayName with the name of the gateway). 

This URL can be entered automatically by the variable: %ExternalWelcomePortalLoginURL%.

Connection Status App

Field Description
Custom CSS CSS that allows customizing the graphical appearance of the App of the connection status.

Warning! On versions prior to 7, custom CSS for the App connection status were entered into the general CSS of the Welcome Portal. If you update the system, you need to paste the CSS specific for the App of the connection status into this field.

Parameterizing Fields

Various multilingual fields and the CSS of the templates can be parameterised with the following variables:

  • %Address%: manager’s address;
  • %City%: manager’s city;
  • %Zip%: manager’s ZIP;
  • %Country%: manager’s ountry code;
  • %Phone%: manager’s phone number;
  • %LastName%: manager’s contact last name;
  • %FirstName%: manager’s contact first name;
  • %EMailAddress%: manager’s email address;
  • %Web%: manager’s web address;
  • %FreeProductDescription%: description of the first free product assigned to the domain;
  • %Domain%: manager’s domain name;
  • %CompanyName%: manager’s company name;
  • %GatewayName%: gateway name;
  • %SmsNumber%: number assigned to the first modem;
  • %SmsNumber2%: number assigned to the second modem.

The use of parameterised templates allows sharing them on multiple domains/gateways. In practice, it is possible to define a single template that parameterises for multiple domains or gateways making any changes be easy.

Prometeo, HSNM, HsNetworkManager and logos Prometeo are HSNM and HsNetworkManager trademark. | Privacy Policy | Cookie Policy