Introduction

Encapto Portals are the screens that appear on an end user device to enable web-authentication to a Wi-Fi network. On most devices, this portal will pop up automatically on connection to a network. On others, it will appear when an end user opens a browser and attempts to access the internet.

Encapto portals are configured to produce an elegant display on all types of screens including smart phones, tablets, and laptops while minimizing the work involved in design and deployment. Encapto Clouddeck enables the configuration of sophisticated. colour themed and branded authentication portals with a variety of content types.

Portal List View

The Portal List View shows all portals that have currently been configured on an Encapto account. From here several operations can be performed on existing portals and new Portal designs can be created.

To access the Portal List View, log on to Encapto Wi-Fi Clouddeck.

1. Click Portals under VISITOR JOURNEYS.
   
   TIP: If there are no portals currently configured, a prompt will appear with a button to Get started. Clicking this button has the same effect as clicking the +New button.

2. Click the +New button to create a new Portal.
3. Search existing Portals by name or tags.
4. To perform actions on one or more Portals, select using the checkbox and:
   1. Delete the Portal; or
   2. Edit tags; or
   3. Rename the Portal; or
   4. Duplicate the Portal; or
   5. Assign the Portal to a Hotspot; or
   6. Unassign the Portal, if assigned to a Hotspot.
5. Click on a non-active area of a Portal line item to edit an existing Portal.
6. Click a link under ASSIGNED TO to edit the Device and Hotspots on which a Portal is used.

Create a New Portal

When you have elected to create a Portal, details can be entered which will assist in identifying and managing the Portal. To create a new Portal, click the +New button and in the lightbox:

1. Give the Portal a Name.
2. Search and select an existing tag or press enter to create a new tag for the Portal to help search for and group the Portal in the future (optional).
3. Add Notes.
4. Create.
   
   

Create Portal Design

To create a new Portal design, Navigate to the Designs tab and click the +Create button and in the lightbox:

1. Select the portal language.
   
   Note: English is the default language, contact sales (sales@encapto.com) if you would like additional languages made available to your clouddeck account.
   
   
2. Select the design type to “Modern (Recommended)”.
3. Select a layout.
   1. Basic - A simple layout with a logo and an area for text.
   2. Classic webpage - A layout with a logo, banner and an area for text.
   3. Business - A layout with a logo, hero and trading hours.
   4. Modern webpage - A layout with a logo, hero and three columns dedicated to text.
   5. WiFi splash page - This layout has user journeys occur inline. Simply add your logo and the portal is ready to go.
4. Search and select an existing tag or press enter to create a new tag for the Portal to help search for and group the Portal in the future (optional).
5. Create.
   
   
   

Theming a Portal Design

The Portal Theme defines how the content areas of a Portal will appear.

To theme a Portal:

1. Portal language: English (Default).
2. Click Back to navigate to Portal Designs.
3. Click to Edit details.
4. Click to Preview the portal.
5. Navigate to Theme tab.
6. In the PAGE BACKGROUND section;
   1. Click the Settings button to change the display mode.
   2. Click the Change button in the PAGE BACKGROUND section to assign a new or existing background image. 
7. Click the Change button in the COLOUR SCHEME section.
   1. Section background - Sets the background colour of all sections. An individual sections background colour can be changed via "appearance".
   2. Section background opacity - Sets how much page background is visible under a section (eg. 0% means a fully visible background). Please note this only applicable to background color, not to background image.
   3. Headings - Sets the colour of headings in all sections. To update the heading colour for each individual section use “appearance”.
   4. Section text - Sets the colour of the body in all sections. To update the colour of the body for each individual section use “appearance”.
   5. Login process button colour - Sets the colour of the primary buttons, displayed in the get online process. The colour of the button text is automatically set.
   6. Get online button colour - Sets the colour of the Get online button. The colour of the button text is automatically set.
      
      TIP: See last section 7 for guidance on using colour pickers.
      
      
8. Click the Change button in the SETTINGS section.
   1. Image rounded corners - Adds rounded corners to image elements within a section.
   2. Vertical padding - Sets vertical padding space to each of the sections.
   3. Horizontal padding - Sets horizontal padding space to each of the sections.
   4. Page background display mode - Sets how the background image appears on the page.
   5. Section background display mode - Sets how the background image appears on the section.
   6. Page margin - Center aligns the page and adds gutters to the sides allowing the background to be seen.
9. Click the Change button in the Custom CSS Section to upload CSS file.
   
   

Portal Editor (WYSIWYG)

Encapto Clouddeck portal editor is WYSIWYG (What-You-See-Is-What-You-Get) tool. It’s a visual tool that combines of Branding, Theme and Content tabs in Portal. From here you can:

1. Click Laptop, Tablet or Mobile button to change the preview size. Add a tool tip to explain that is only a simulation of what the portal will look like on those devices.
2. Click Show Inactive to show inactive sections.
3. Click +Add to add Sections to the portal page, can add sections with one, two, three or four columns. Showing a three-column section in the below image with Trading hours, Free text and banner elements.
4. Click icon to navigate to THEME sections and here.
   
   1. Click icon to change;
      1. Section background - Sets the background colour of all sections. An individual sections background colour can be changed via "appearance".
      2. Section background opacity - Sets how much page background is visible under a section (eg. 0% means a fully visible background).
      3. Headings - Sets the colour of headings in all sections. To update the heading colour for each individual section use “appearance”.
      4. Section text - Sets the colour of the body in all sections. To update the colour of the body for each individual section use “appearance”.
      5. Login process button colour - Sets the colour of the primary buttons, displayed in the get online process. The colour of the button text is automatically set.
      6. Get online button colour - Sets the colour of the Get online button. The colour of the button text is automatically set.
5. Click icon to navigate to SETTINGS sections and here,
   1. Click icon to change SETTINGS.
      1. Image rounded corners - Adds rounded corners to image elements within a section.
      2. Vertical padding - Sets vertical padding space to each of the sections.
      3. Horizontal padding - Sets horizontal padding space to each of the sections.
      4. Page background display mode - Sets how the background image appears on the page.
      5. Section background display mode - Sets how the background image appears on the section.
      6. Page margin - Center aligns the page and adds gutters to the sides allowing the background to be seen.
   2. Click  button in the PAGE BACKGROUND section to assign a new or existing background image. 
   3. Click icon to change CUSTOM CSS.
6. Click icon to reorder Sections.
7. Click Edit to edit the existing sections.
8. Click icon to  change the Appearance of the section. This will only change the appearance of the sections selected.
9. Click to change section Background image.
10. Click Delete icon  to delete the section.
11. Set the section to be active/inactive using the toggle switch. When inactive this section will not be shown to end users.
    
    
    

Assign a Portal to a Hotspot

Once a Portal has been created, details can be edited via its tab. You will be taken directly to the Assignment tab on clicking Create as described in above Sections.

From the Assignment tab you can assign the portal to one or more hotspots. To assign the Portal to a hotspot:

1. Click the +Assign button.
2. Select one or more hotspots.
3. Assign.

From any tab you can edit the Name, Tags and Notes entered when the Portal was created by clicking the Edit details button.

Using Colour Pickers

Encapto Branding and Theme tabs feature colour pickers intended to enable precise colour control and fast theming. Colours can be picked using your browser’s native colour picker, by RGB value using a hex colour or RGB value, and by CMYK value.

Browser Colour Pickers

To use your browser’s Colour picker, click the colour block under the required Theme or Branding control panel and select one the preferred colours. Note that this feature may behave differently depending on the browser used.

Hex RGB

To pick a colour using a Hex value, select Hex using the drop-down selector and enter a hex colour value into the text field.

RGB

To pick colour using an RGB value, select RGB using the drop-down selector and enter red, green, and blue values into the corresponding coloured fields.

CMYK

To pick colour using a CMYK value, select CMYK using the drop-down selector and enter cyan, magenta, yellow, and black values into the corresponding coloured fields.

TIP: CMYK colour values are generally used for print. The Encapto CMYK colour picker has been designed to produce a best screen approximation of CMYK colour. Your screen and printer calibrations affect how colours appear, so some manual adjustment may be required for more exact colour matching.