Portal Design

From Airangel Wiki
Jump to: navigation, search

Bedrock Portal Editor

Bedrock 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 and the completely customisable Portal Templates in order to edit the underlying HTML, CSS and Javascript. Upload your images and fonts into the Media Browser to put your brand stamp on the guest journey.


Image displaying the content within the General Tab on the portal page editor.


This is where you will pick the name of your portal. This is not publically facing, this is just for use within the platform. If you have more than one portal in your venue make sure you call them all something recognisable so it's easy to see at a glance.


This shows if the portal is active. There are four options; Always, Time based, Date based and Disabled. Always and Disabled outline whether the portal is active or not. Selecting Time Date and Date based allows you to select the times and dates when your portal is active and viewable.


Portal templates are the code that hides beneath the surface of the portal. These templates are were you can edit the HTML, CSS and Javascript of your portal. More information can be found on the Portal Templates page.

Available Languages

Here you can select which languages are view-able within the portal. Any languages that have been setup in the Languages area of the settings can be selected. Once a different language(s) is selected, the option to create different language content will be open to you. The drop down box will become available where ever there is editable content, giving you the option to translate that content into the different languages.

Re-Authenticate Recurring Guests

Selecting this tick-box allows returning guests to re authenticate back onto the network without seeing the portal page.


Image displaying the layout options within the portal editor.

Box position

Select whether the login box sits on the left, in the centre or on the right of the page.

Login box layout

Select whether methods of authentication will appear next to one another or below one another when separated by a separator block.

Display Header and Footer

Select whether the header and footer become active. When selected, the header and footer content blocks will appear as well as header and footer colour and border options.

Input Label Placement

Select how the input labels will appear. They can appear above or within the input box.

Box Transparency

Select how, if at all, transparent the login box is. 0% being completely solid and 100% being completely transparent.


Select which font from the system will be displayed on the portal. Web fonts are not included and will have to be input through portal templates and entered into the walled garden.

Available fonts are:

  • Arial
  • Comic Sans MS
  • Courier New
  • Georgia
  • Lucida Sans Unicode
  • Tahoma
  • Times New Roman
  • Trebuchet MS
  • Verdana


Image displaying what options are available within the images tab.

Background Images

Images can be added to the background of all div elements on the portal page. These include:

  • The Login Box
  • The Page Background
  • The Header
  • The Footer


Instead of selecting a single image, a directory of images can be selected and turned into a rolling slideshow. The slideshow speed can be changed to go as fast or slow as you choose.

Logos placed within the image tab will appear at the top of the portal page, above the login box. Logos can also be input into a content block if you wish for it to appear within the login box.

Colours & Borders

Image displaying different colour options that are available within the portal.


Background and text colours of the following can be edited within the colours tab:

  • Page
  • Header
  • Footer
  • Body
  • Box

NB - Background colours will be overwritten if a background image has been used.


Image displaying the different border options that are available for the portal.

You can also edit border aspects of the Header, Footer, Body and Login Box. The parts of the border that can be edited are:


  • Thin
  • Thick
  • Large Dash
  • Small Dash
  • Double Lined
  • Dots


  • Border all around
  • Bottom Border
  • Left Border
  • Right Border
  • Top Border



  • Curved
  • Rounded
  • Right-Angled


Login Page Content

The login page tab is where the structure, text and authentication methods of your portal are outlined. To build out your portal you simply select the 'content blocks' you wish to use and by placing them in the listed column you will build out your portal. There are several types of content block that are used for different aspects of the portal. They are as follows:



Add a content box that you can use to describe the service or welcome the guest. Logos and other images can be placed in them.


Add a new container to the login page

Internal Authentication/Registration


Authenticate against existing accounts, any guest data field can be used (username, username and password, phone and password...)

Self Registration:SMS

Registration Form with mandatory phone field, credentials will be sent to the customer. (Voucher form is required to login)

Self Registration

Free access with the possibility to gather user information.

External Authentication/Billing


Use the venue's Property Management System to authenticate clients based on their room details (Connector plugin required)

Credit Card

Charge guests with any clearing house configured (Plugin). Voucher form is required for recurring guests unless re-authentication is enabled.


Charge guests with your PayPal account (Plugin). Voucher form is required for recurring guests unless re-authentication is enabled.

Social Media

Guests can authenticate through the following social media platforms.

  • Facebook
  • Twitter

Social Media Data Fields

  • Facebook (Airangel Developer Account)
    • Profile ID
    • Name
    • First Name
    • Last Name
    • Gender
    • Locale
    • Link
    • Timezone
    • Birthday
    • Email

A customer can use their own Facebook developer account and then has full control of the facebook data they which to collect. They can also use the facebook profile link to target those users inside Facebook using their marketing tools.

  • Twitter
    • Name
    • Screen Name
    • Location
    • Followers Count

Header & Footer

If header & footer is selected, content boxes will appear below the login page content. These act like average content boxes and can be coded independent to the login box.

Additional Content

By activating the additional content box you are effectively activating a second div on the portal page. This div can be placed above or below the login box via the drop down options below the content box. The additional content box will take the attributes set for the login box (colours/borders ect...). The behaviour of the box on a mobile device can be set using the drop down.

The additional content box can be coded independently using the source option and by editing the template.

Billing Pages

The option to edit billing pages will be activated when a payed authentication method is selected. The billing pages will allow you to input information relating to what the customer sees when a new plan is selected and when the transaction is complete.

These could include information on what the plan entails, length of WiFi access, ect...

Post Authentication

Image showing a portal that will redirect to google.com.

The post authentication tab allows you to select what the guest sees once they have authenticated onto the system.

There are five options:

  • Show Status page - Shows a status page setup via the marketing tools or the 'status page content' box below the redirect options.
  • Show Status page followed by redirect to initial URL - Shows a status page setup via the marketing tools or the 'status page content' box and redirects the user to the original URL they were going to.
  • Show Status page followed by redirect to custom URL - Shows a status page setup via the marketing tools or the 'status page content' box and redirects the user to a URL defined by you.
  • Redirect to custom URL - Redirects the user to a custom URL defined by you.
  • Redirect to inital URL - Redirects the user to the initial URL they were going to.

Status Pages

Status pages are content boxes that appear after the guest has logged in. They take on board the same style that was defined for the login box and work the same way as a content box. These boxes can appear for how long or little you wish, with you being able to set the redirect timeout and the redirect URL.


The glue that pull the system together. The same tag must be shared by a network, a Portal a Site and a Service Tier to get a basic working system. The same tag can be applied to multiple elements to manage scale efficiently. ​

Media Browser and Images

Media Browser Location withing Settings
Public path that can be referenced within code

The platform's media browser is where all uploaded media (images/Fonts ect...) are stored. From the media browser users can also download files and generate the Public Path for coding. The media browser is individual to a domain and so the Public Path will always be unique to that domain.

Media browsers can be organised via folders or, as they're known in the system, directories.

Font files can also be uploaded into the system to then be referenced in a portal page's CSS. Font files should be uploaded directly into the Media Directory.

Editing Code (HTML/CSS)

Portal Templates are the inner workings of the portal. This is where you'll go if you want to dive in and create something bespoke.

NB - The portal templates should only be edited if you have a degree of experience using HTML and CSS.

The default template will always be available and cannot be deleted. It is recommend that this template be cloned and any new templates be built from this one.

Portal templates can be used to write your own HTML, CSS and JS while still being able to use the portal editor to configure replacement values ( for example ${color:body:background}). The editor has an auto-complete and hint function which you can use by pressing ctrl+enter.

  • HTML: contains HTML but can also contain CSS and JS.
  • CSS: contains the style of the page. Make sure the HTML editor contains <style>${css} </style> or the style will not be applied.
  • JavaScript: contains scripting. Make sure the HTML editor contains <script>${javascript}</script> or non of the scripts will work. Also make sure ${javascript:autodetect} is present if you intend to use an autodetect form.