Administrator Manual
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.
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. |
It contains the standard editing options.
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. |
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:
| 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. |
| 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. |
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:
|
||||||
| 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. |
| 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. |
| 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:
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:
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.
| Field | Description |
| Type | Type of combinations of colours that you can use. Possible values are:
|
| 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. |
| Field | Description |
| Custom Head HTML | It allows entering custom definitions in the HTML HEAD. |
| 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; } |
| Field | Description |
| Custom JavaScript | It allows entering custom JavaScript. |
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. 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>
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:
|
| %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. |
| 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. |
| 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. |
| 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. |
Fields that are used if the Login app is displayed without the support of the Welcome Portal.
These fields are available only if the subsystem 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. |
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:
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?gateway=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%.
| 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. |
Various multilingual fields and the CSS of the templates can be parameterised with the following variables:
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.