Portals

Created by chris.joinson@airangel.com, Modified on Mon, 21 Feb, 2022 at 12:24 PM by Mark Jones

TABLE OF CONTENTS

Introduction
Location
Portal Creation

Introduction

The portal page is your guest's gateway to the internet. Portal pages can be setup to include various methods of accessing the wireless network as well as styling it to fit in with your brand image.

The platform features a robust, easy to use portal editor that has been built from the ground up to allow almost anyone to create a great looking and functioning portal. The portal can be tailored to your brand specifications by using a combination of the easy to use WYSIWYG (What You See Is What You Get) and the completely customisable Portal Templates in order to edit the underlying HTML, CSS and Javascript. You can also upload your images and fonts into the Media Browser to put your brand stamp on the guest journey.

Location

Step	Description
1	Log into the platform.
2	Select Portals from the left side menu of the Home screen.

Portal Creation

Portal pages are completely customisable, allowing you to create them however you like. Whilst there are many configuration options, and even more when you factor in portal templates, we appreciate it may be difficult for a first time user to construct a functioning portal page. See the steps below on how to create a basic, functioning portal page for your guests to use.

Adding a Portal

Adding a portal is the first step of the portal creation process and will provide you with the foundation to make further amendments. After you've added the portal, it will appear in the portal table ready for further customisation.

Step	Description
1	Select Portals from the left side menu of the Home screen.
2	Click Add portal at the top of the screen.
3	A pop-up will appear. Begin by giving your portal an appropriate name.
4	Next, select the Template dropdown and select Default. There may be other templates here but for this example we'll use the default template.
5	Click the Tag Type dropdown and select Site.
6	Click the Value dropdown and select the site at which you'd like the portal to be displayed. You can add more sites to the portal at the end of the portal configuration.
7	Click Save.

General

The general section allows you to customise high level portal settings such as configuring the portal template, availability, available languages and guest re-authentiction.

Field	Field Type	Requirement	Description
Name	Text input	Required	The name of the portal page. This can be changed at any time.
Availability	Dropdown box	Required	Here you can configure the availability of your portal page. Always: The portal is always available to guests Time-Based: The portal will only show during the times selected. Date based: The portal will only show during the dates selected. Disabled: The portal is not available NB: There should only be 1 active portal for the tag combination linked to the portal page created. Any prior versions should be set as Disabled so that the system knows which portal page to display.
Portal Templates	Dropdown box	Required	The template that will serve as the code base for the portal. Templates can be configured in the settings menu. More information can be found here.
Available Languages	Tick Boxes	One required, more are optional	The languages available for portal translation. Languages can be configured in the settings menu. English will be selected by default, more languages can be selected if needed. One language is required.
Re-authenticate recurring guests	Tick Box	Optional	Tick this box if you want to allow your guests to re-authenticate without seeing the portal page. Guests will see the portal page upon first login but subsequent logins will not require the guest to see the portal page.
Clone	Button	N/A	Clone the selected portal including all configurations that have been applied.
Publish	Button	N/A	Publish the selected portal and all changes made. This will put all changes live for guests to see.
Delete	Button	N/A	Delete the selected portal.
Save	Button	N/A	Save the selected portal. This will save all configurations but will not be seen by guests until you publish the portal.
Next	Button	N/A	Move to the next section of the wizard.

Layout

The layout section allows you to configure how the central content box, which will contain all text and authentication methods relating to guest access, appears on the page.

Field	Field Type	Requirement	Description
Box position	Tick box	Optional	Choose the positioning of the login box. By default, it will displayed in the centre of the screen but can be moved to the left or the right. NB: Only applicable on desktop screens. On a mobile device it will always be centred by default.
Login box layout	Tick box	Optional	It is possible to have multiple login boxes that contain different content. This setting will configure how the login boxes are situated on the page. Below each other: Multiple boxes will display below one another Next to each other: Boxes will be displayed next to each other. Due to screen constraints, this is only possible with a maximum of two content boxes.
Display header and footer	Tick box	Optional	Enable this setting to activate header and footer configuration.
Input label placement	Tick box	Optional	Choose how the labels of input boxes will be displayed. Inside input field (Placeholder): Selecting this option will display the labels within the input field. Above input field: Selecting this option will display the labels above the input box.
Box transparency	Slider	Optional	Configure how transparent the login box will be. Slide to 0% for a completely solid box. Slide to 100% for a completely transparent box.
Font	Dropdown box	Optional	Select the primary font of your portal. By default, there are nine to choose from: Arial, Comic Sans MS, Courier New, Georgia, Lucida Sans Unicode, Tahoma, Times New Roman, Trebuchet MS and Verdana.
Save	Button	N/A	Save the selected portal. This will save all configurations but will not be seen by guests until you publish the portal.
Next	Button	N/A	Move to the next section of the wizard.

Images

Images can be placed at various points across your portal page. Not all will be relevant for your brand, however, the option is available if needed.

Field	Field Type	Requirement	Description
Box	Link	Optional	Display a background image in the login box itself.
Page	Link	Optional	Display a background image behind the login box that spans the entire page.
Logo	Link	Optional	Display a logo/image at the top of the page above the portal login box.
Header	Link	Optional	Display an image within the header of the page. NB: Headers and footers must be enabled in the layout section.
Body	Link	Optional	Display an image within the body of the login box. This is usually where the text and authentication methods will be.
Footer	Link	Optional	Display an image within the footer of the page. NB: Headers and footers must be enabled in the layout section.
Slideshow speed	Slider	Optional	If a directory of images has been selected for any of the above, they will be displayed as a slideshow. The slideshow speed denotes how quickly these images will be displayed one after another.
Save	Button	N/A	Save the selected portal. This will save all configurations but will not be seen by guests until you publish the portal.
Next	Button	N/A	Move to the next section of the wizard.

Colors

Field	Field Type	Requirement	Description
Background Color	Color Picker	Optional	Click the color block to change the color. The background color will span the entire area of the section selected (Page, Header, Footer, Body and Box). Different sections can have different text colours.To delete a color entry, click the delete icon at the side of the color block.
Text Color	Color Picker	Optional	Click the color block to change the color of the text in the section selected (Header, Footer, Body and Box). Different sections can have different text colors. To delete a color entry, click the delete icon at the side of the color block.
Save	Button	N/A	Save the selected portal. This will save all configurations but will not be seen by guests until you publish the portal.
Next	Button	N/A	Move to the next section of the wizard.

Borders

The borders section allows you to configure the style of the borders around the central content box and the header and footer (If enabled). Each border can be styled differently with different colours, types and styles available.

Field	Field Type	Requirement	Description
Style	Dropdown	Optional	Select the style of the border. Each section can have its own border style. If no border is required, click the blank entry at the top of the dropdown.
Type	Dropdown	Optional	Select the type of border you want to implement. There are several border types available: Border all around Single border on the left Single border on the right Single border on the bottom Single border on the top
Width	Dropdown	Optional	Select the width/thickness of the border.
Corner	Dropdown	Optional	Select the corner radius of the border.
Color	Color Picker	Optional	Select the color of the border. To delete a color, click the delete icon to the right of the color block.

Step	Description
1	Open the Login Page Content section.
2	Click Add Content below the login page content table.
3	A pop-up will appear, select the content block or authentication method you want to add (see below for a description of what's available).
4	The content's configuration pop-up will appear. See below to see how to configure the various authentication methods and content blocks.

Content Options

To add content to the portal, you need to select and add various content blocks. Each content block can be configured individually to suit your needs.

Layout/Content
Item	Description
Content	The content block is used to place text and images onto your portal page.
Separator	The separator is used to separate your content into separate blocks. Anything positioned above and below the separator will be placed into different areas.
Internal Authentication/Registration
Resident	Used for resident authentication. See resident page for more details.
Voucher	Used for voucher code authentication. Displays a voucher input field for users to enter platform generated voucher codes.
Self Registration: SMS	Used for SMS authentication. Guests will enter their mobile number and will receive a text that includes a code. The user will then enter this code into the portal page to log in. NB: Requires an external plugin and SMS gateway.
Self Registration	Our most customisable authentication method. By default, self registration is a click and connected authentication and only requires the user to click the login button. Other fields can be added if needed.
External Authentication/Billing
PMS	Use the venues Property Management System (PMS) to authenticate guests based on their room details. NB: Connector plugin required
Credit Card	Charge guests with any clearing house configured via plugin. Use a voucher authentication option for recurring guests unless re-authentication has been enabled. See plugins for more details.
PayPal	Charge guests with your PayPal account via plugin. Use a voucher authentication option for recurring guests unless re-authentication has been enabled. See plugins for more details.
Accor ALL	Third party loyalty authentication option.
GHA Login	Third party loyalty authentication option.
GHA Registration	Third party loyalty authentication registration option.
Social Media
Facebook	Allow guests to authenticate using their social media account username and password.
Twitter	Allow guests to authenticate using their social media account username and password.
Other
Autodetect	Hide other authentication forms behind a single input field until certain conditions are met. For example, the email login method will not show until an email address is entered.

Title

The title is the title of the webpage. The title will display within the browser tab. Enter your chosen title into the input box provided and click save.

Additional Content

Additional content can be shown in a separate box on all pages and could be useful for displaying time sensitive information or advertisements to your guests. . This box will automatically disappear if the screen size is no longer able to show all content. If configured, a smaller mobile box will appear if the original content cannot be shown.

Step	Description
1	Click Enable to display the additional content box
2	Click within the white content box to open the content editor.
3	Type your content or upload images to display in a separate box on the portal page.
4	Once satisfied, click OK.
5	Configure your mobile box position. The mobile box will display when the screen size is reduced. You can display the mobile box above or below the portal forms.
6	If required, you can configure the additional content box to display different content, or no content, depending on whether it's being viewed on a mobile device. Click the Mobile box behaviour dropdown and select one of either: Use the same content Use different content Show no content

Header and Footer content

NB: For header and footer content to be displayed, you must have ticked Display header and footer content in the layout section.

Header Content
Steps	Description
1	Click within the white content box to open the content editor.
2	Type your content or upload images to display in the header of the portal page.
3	Once satisfied, click OK.

Footer content
Steps	Description
1	Click within the white content box to open the content editor.
2	Type your content or upload images to display in the footer of the portal page.
3	Once satisfied, click OK.

Billing Pages

When using payment authentication methods, such as PayPal and Credit Cards, it is possible to display further information to your guests. There are three billing pages available: New Plan Selection, Payment Success Page and Payment Pending Page.

Item	Description
New Plan Selection	Shows when there are numerous packages to choose from and allows user to select their preferred package. The text input here will display above the options the user can choose from.
Payment Success Page	Shows when payment is confirmed and successful. Text will display on the portal page, replacing the login box content.
Payment Pending Page	Shows whilst the user is waiting for the payment to be confirmed. Text will display on the portal page, replacing the login box content.

Step	Description
1	Navigate to the Billing Pages section in the portal configuration page.
2	Select which of the three billing pages you wish to edit by clicking on the white space within the displayed box. A text editor will appear.
3	Type in your text and click Save.

Post Authentication

Post authentication defines what webpage the guest will see once they've logged in.

Redirection	Description
Show Status Page	Show a pre-configured status page after the guest clicks to login. This option does not include a redirect to a webpage.
Show Status Page followed by redirect to initial URL	Show a pre-configured status page after the guest clicks to login. The status page will display for a pre-determined amount of time before redirecting the user to the webpage they were initially looking to reach.
Show Status Page followed by redirect to custom URL	Show a pre-configured status page after the guest clicks to login. The status page will display for a pre-determined amount of time before redirecting the user to a webpage determined by you. E.g. a hotel landing page.
Redirect to custom URL	Redirect a user to a webpage determined by you.
Redirect to initial URL	Redirect a user to the page they were initially looking to reach.

Redirect to Custom/Initial URL

Redirect to custom URL
Steps	Description
1	Within the post authentication section, click the client redirection dropdown and select Redirect to custom URL.
2	Within the Redirect URL box, input the full URL of the webpage you want your guests to see after they've seen the status page. E.g. https://www.google.com
3	Click Save.
Redirect to initial URL
1	Within the post authentication section, click the client redirection dropdown and select Redirect to initial URL.
2	Click Save.

Status Page

Portal status pages can be used to display optional content to guests after they've clicked to log in. Status pages can be configured to display content for a pre-determined amount of time and are useful for communicating information.

Show Status Page
Steps	Description
1	Within the Post Authentication section, click the client redirection dropdown and select show status page.
2	Click within the white content box to open the content editor.
3	Type your content or upload images to display in the status page.
4	Click OK.
5	Click Show Advanced to display more settings.
6	Click the Login behaviour drop down to determine what happens after the status page is displayed. Options include: Login: The user will be logged in once the status page has been displayed Show login button on status page: The user will need to press the login button on the status page to authenticate. Show login button on status page after completing survey: The user will need to complete a survey before the login button is shown. Do not login: The guest will not be logged in.
7	Click Save.

Show status page followed by redirect to initial URL
Steps	Description
1	Within the Post Authentication section, click the client redirection dropdown and select Show status page followed by redirect to initial URL
2	Within the Redirect timeout in seconds box, enter the amount of time you wish to display the status page in seconds. E.g. 10.
3	Click within the white content box to open the content editor.
4	Type your content or upload images to display in the status page.
5	Click OK.
6	Click Show Advanced to display more settings.
7	By default, a logout button will be displayed on the status page. If you don't want this to appear, it's not usually needed, click the Hide tickbox under the label Logout button.
8	Click Save.

Show status page followed by redirect to custom URL
Steps	Description
1	Within the Post Authentication section, click the client redirection dropdown and select Show status page followed by redirect to custom URL
2	Within the Redirect URL box, input the full URL of the webpage you want your guests to see after they've seen the status page. E.g. https://www.google.com
3	Within the Redirect timeout in seconds box, enter the amount of time you wish to display the status page in seconds. E.g. 10.
4	Click within the white content box to open the content editor.
5	Type your content or upload images to display in the status page.
6	Click OK.
7	Click Show Advanced to display more settings.
8	By default, a logout button will be displayed on the status page. If you don't want this to appear, it's not usually needed, click the Hide tickbox under the label Logout button.
9	Click Save.

When configuring a Personal Area Network, this content box will be used to display information to your users regarding this login method. This pop-up will display prior to authentication when the PAN login option is selected.

To edit the content:

Step	Description
1	Within the portal editor, scroll down to the Post Authentication section and click the title to open.
2	Within the client redirection dropdown select either: Show status page Show status page followed by redirect to initial URL Show status page followed by redirect to initial URL
3	Select + Show advanced
4	Click the white box labelled PAN Popup Content

When using 802.1x authentication, a wireless profile needs to be downloaded to the users phone. By default, all content needed is presented in the content box, however, the wording can be changed if needed.