Portal Design

Owned by Santiago Nanclares (Unlicensed)
Last updated: Oct 09, 2021
7 min read

Available with the module Octopus Guest

 

Within the menu  Configuration>Splash Portal, you can manage the design of captive portals for all customers.  

List Portals

Once we access the submenu of portals we find the list of all the configured ones, being able to filter them and add new ones. 

The content of each column is:

  • Name: Portal Identifier

  • Type: Image showing type of portal

  • Owner: Field indicating which Organization, Location Group or Location is associated with the portal.

  • Associated WLANs: Number of WLANs with which the portal is associated By clicking on the link, you can also assign the portal to the WLANs in a simple and massive way.

  • Individual operations:

    • Delete: Delete the captive portal from the database, this option is only available if there is no WLAN associated to the portal.

    • Clone: Clone the indicated captive portal and it is possibe to modify its configuration and save it with another name.

    • Edit: Allows to modify the configuration of the portal.

It is possible to filter the list by Type, Name, Owner, WLANs and date of creation.

Add or edit captive portal

When a new captive portal is added, a captive portal will appear with the following configuration parameters:

  • Name: Identifier of the portal.

  • Owner: Organization, location group or location to which the portal will be associated.

  • Template: Design from which we will start to make the configuration. There are 4 different templates:

    • Simple: It is the simplest to configure if you want to implement a portal quickly.

    • Fullscreen: The most customizable template, so the most advisable in case you want a more personalized design.

    • Social: Aspect based on the wall of social networks. 

    • Wifi4eu: It meets all the requirements of the Wifi4EU initiative, promoted by the European Commission to provide municipalities with Wifi.



Then, or when you click on edit a portal already created, you can see the configuration environment:



  • Work Area: Allows you to select the configuration area of the captive portal, in addition to observe how will be the look&feel according to the changes made.

  • Toolbar: The different configuration parameters can be selected. 

  • Tool options: Within each configuration parameter in this space we will see the different editing options.

  • General Options: They are the same for all the templates: 

    • Preview: shows a preview of the result of the portal edition. It allows you to simulate the final appearance that a client will see, being able to select the Access Methods, the language and the type of device (laptop or smartphone).

    • Save: Saves the introduced changes without abandoning the editing window.

    • Delete: Deletes the portal from the database. This option only appears if the portal doesn't have an asociated WLAN.

    • Validate: Saves the introduced changes and goes back to the Portal List.

    • Discard: Goes back to the Portal List. If there has been any changes without saving, it will appear a confirmation pop-up window.

 



The different portal configuration options are described below, depending on the option selected in the toolbar:

  • Mobile/PC: Changing mobile and desktop views in the portal editing area. Some configuration parameters like the backgroud image differs and it is necessary to configure it in both views. The portal is responsive, but depending on the pixels on the screen of the client device it will apply one or the other.



  • Language: Allows you to select the language displayed in the configuration area. The options displayed will be those configured in the Languages parameter on the General data tab.



  • General data:

    • Name: The name assigned to the portal will be indicated.

    • Owner: You must select a Organization, Location Group or Location to which the portal will be attributed.

    • Lenguages: The languages that you want to appear on the portal will be marked. The English language is automatically configured and within the selected languages it will be possible to configure which is loaded by default, in case the language configured in the browser of the user's device is not in the list. Keep in mind:

      • The captive portal will always automatically load the language the customer has in the device's browser and, in case it is not in the list, the default language. 

      • All the editable texts of the portal (title, subtitle, footer, ...) must be translated into the configured languages. It is also very important to take these languages into account when configuring legal texts and campaigns.



  • General Styles: Possibility of modifying the styles of the different elements such as the buttons, boxes and text of the portal. 

    • Background: Selection of the color you want to establish for the portal's background.

    • Errors: Selection of the color to be applied to the errors that are shown on the screen

    • Radio edges: Using a horizontal bar you can select the radius of the edges of the text boxes and buttons.

    • Font Text: Selection of the font in which you want to display the text of the portal.

    • Text Color: Selection of text color.

    • Normal Buttons: In the color palette on the left you can select the color of the text on the buttons and the color of the button itself.

    • Selected Buttons: Allows you to select the color of the text on the buttons, and the color of the button when it is selected.

    • Text boxes / Text color: Selection of text color in form boxes.

    • Text boxes / Background color: Selection of the background color of the form boxes.

  • Title: In the styles the color, font, alignment, font size and even the shading of the title is selectable. The text of each of the languages selected in the portal can also be configured.



  • Subtitle: In the styles the color, font, alignment, font size and the shading of the title is selectable. The text of each of the languages selected in the portal can also be configured



  • Logo: You must select the image that you want to put as a logo and that has been previously uploaded. To upload a new image simply click with the mouse on the current image or on the icon , in case you don't have any images uploaded. It will open a gallery of images where you can see all the images we have currently uploaded. With the button of the trash  you can delete the images you want. With the button  it is possible to upload new images.



  • Image: You must select the image you want and that has been previously uploaded. If you do not want to put any image, you can select a background color. It is possible to apply transparency to the image on a background color, very useful in case you want to highlight the authentication form and texts. The process to select images, upload new ones or delete them is the same as in the "Logo" section.



  • Header: It is possible to select a background color in the header, to which transparency can also be applied. You can also choose the text color to be applied to the language selector.



  • Footer: Possibility to select a background color for the footer, to which transparency can also be applied, as well as the text color and font type to be applied to the text. The text can also be translated into each of the languages selected in the portal.

 For further clarity, in the Videotutorials section it is possible to view an example of portal configuration.