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. This page will breakdown the portal editor page within Bedrock and will go through each option one by one.

General

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

Name

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.

Availability

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.

Template

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.

Layout

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.

Font

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

Images

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

Slideshow

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.

Colours

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.

Borders

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:

Style

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

Type

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

Width

Corners

  • Curved
  • Rounded
  • Right-Angled

Colours

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:

Layout/Content

Content

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.

Separator

Add a new container to the login page


Internal Authentication/Registration

Voucher

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

PMS

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.

PayPal

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
  • Google
  • VK
  • Instagram
  • LinkedIn

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
  • Google
    • Display Name
    • Name
    • Email
  • Instagram
    • Username
    • Full Name
  • LinkedIn
    • First Name
    • Last Name
    • Email Address

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.

Tags

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. ​