Captive Portal Builder (CPB)€¦ · Captive Portal Builder (CPB) is a powerful tool that allows to quickly create branded & responsive captive portals using a drag & drop wizard,

GlobalReach CPB Setup Guide

© GlobalReach Technology Ltd 2016

1

Captive Portal Builder (CPB) Setup Guide v 1.3



2

Table of Contents

1. Introduction ……….....…………………………………………………………………………................ 3

2. Getting started with CPB …...……………………………….…………..……….……….……......... 3

3. CPB Window explained ………………………………..….…….…...……................................ 4

4. Content recommendations and restrictions …………………….….….…...………........... 6

5. Add content to a page …..……………………………….……………….………...…........…......... 7

5.1 Page Header ...…………………………………………….....…………...…....................... 8

5.2 Page Footer ………………...…………………………….....…………...…........................ 11

5.3 Page Body content ………...………………………….....…………...…........................ 13

5.3.1 Authentication Providers …………………………...…........................ 13

5.3.2 Add more content …………………………….…...…............................. 16

6. The ‘Design’ panel: customise the look & feel of a page …..…………………….…….. 21

6.1 Layout ...…………………………………………….....…………...…................................ 21

6.2 Side Menu ...…………………………………………….....…………...….......................... 23

6.3 General Typography ...…………… ………………….....…………...…....................... 26

6.4 Links & Buttons ...…………………………………………….....…………...….................. 27

6.5 Form Elements ...…………………………………………….....…………...…................... 28

6.6 Advanced Options ……………………………………….....…………...…...................... 29

6.6.1 Page Title …………………………...…................................................. 30

6.6.2 Custom CSS …………………………….…...…....................................... 30

7. Screenshots of final product …..…………………………………….……..….……………………… 31



3

1. Introduction

Captive Portal Builder (CPB) is a powerful tool that allows to quickly create branded & responsive captive portals using a ‘drag & drop’ wizard, incorporating all of the captive portal authentication methods supported, adverts, surveys, new vs returning user journeys & pre-integrated into the content manager.

Advanced features like custom CSS along with HTML ‘Code Block’ units enable to create completely custom bespoke designs.

This document will guide you through the CPB setup, from the basics to the customisation of your portal look & feel and user flows.

2. Getting started with CPB

Login to your Odyssys account. From the left menu click ‘Captive Portals’ > ‘HTML Editor’ and select the portal you want to edit from the portal list (or create a new portal).

IMPORTANT: Before starting to create and customise your portal with CPB, you have to choose and set up your authentication type (Auth Providers tab underneath the portal list).

If you need help, please see support.odyssys.net/?s=authentication

NOTES: For the purposes of these guidelines, we will use One Time Signup and Facebook auth types.

Once the auth types are set up, click the ‘Pages’ tab to see the list of pages you can edit and customise with CPB.

As we chose One Time Signup and Facebook, the following pages are available:

Splash Page

Success Page

Returning User Page

Loading Page

Interstitial Page

NOTES: choosing different auth types might result in having more pages available for customisation, for instance with Hotspot 2.0 Registration.

http://support.odyssys.net/?s=authentication



4

3. CPB window explained

The CPB editing window has diverse features; features are the same for every page of your portals. Here we will open the Splash Page window, clicking the relevant button.

CPB window is split in three section:

Top header – here is the info about the page you are editing (name and language of the page) along with the buttons to preview your page, save it or close it without saving

Left side – the content of your page; you can drag and drop content here from the right side of the window in order to edit the header, the page body and the footer (note that header and footer are the same for every page of your portal, no matter if you save the changes while editing different pages)

Right side – this section comprises ‘Content’ and ‘Design’ panels

The ‘Content’ panel allows to add content to your page and it is divided in three sections – see Picture 1 below:

Branding/Content – this section allows to add header and footer to your page and drop different content to your page (line divider, image area, text area, code block and change language unit)

Registration – this section allows to add the auth types you have previously set up to your page. NOTES: only the set up auth types are selectable, while the others are greyed out – see Picture 1 below

Legal – this section allows to add T&Cs and Marketing opt-in options



5

Picture 1. CPB window – The 'Content' panel

The ‘Design’ panel allows to customise the look & feel of your page: layout, side menu colours and icons, typography, link and buttons colours, form elements (colours and shape) and custom CSS (Advanced Options) – see Picture 2 below.

Picture 2. CPB window – The ‘Design’ panel



6

We will see all the ‘Design’ section and features further down in this document at page 20.

NOTES: CPB window colours match your Odyssys account colours.

4. Content recommendations and restrictions

There are not real restrictions to the content you can upload, but we would mention some recommendations about CPB components, images, logos, icons.

Images can be uploaded in the format of PNG, JPG or GIF. There is no restriction in regards to the image file size. We would recommend the following best practices:

Background image – JPG or PNG format; max file size 300 KB at 72ppi

Icons – PNG format; max file size 20 KB at 72ppi with dimensions 40x40 pixels

Header and Footer logos and images – JPG, PNG or GIF format; max file size 60 KB at 72ppi and 40px high*

Body images – JPG, PNG or GIF format; max file size 100 KB at 72ppi

* IMPORTANT: Header and Footer heights are set by default to 70px and the Header/Footer Image is set to 40px height with CSS, thus using a 40px high file will allow the logo/image to have some space around.

NOTES: low size files are best for bandwidth and will load quickly.

Page Background Image

See also section ‘6.1. Layout’ on page 21 of this guide.

Now this is set to 100% size and aligned top-centre to the page. For this reason, we would suggest to use a portrait size background image that will fit better on both small and big screens.

Ideally you can also add a gradient to the bottom of the image, that goes from the solid colour you choose as page background colour to transparent (you will need a software like Adobe Photoshop to do this), in order to smooth the transition from the page background image to the page background colour on long portrait size mobile pages.

This can be customised using the ‘Advanced Options’ in the ‘Design’ panel.

You can remove the image you upload, by clicking the trashcan icon that appears after the upload is completed – we will see this later on in this document

Header Image

Header has a fixed height set to 70px by default, while the Header Image is set via CSS to be 40px high (width will scale proportionally), no matter what your image dimensions are.

This can be customised using the ‘Advanced Options’ in the ‘Design’ panel.



7

Footer Image

By default, footer has the same height as the header, 70px. Footer Image though has not a fixed size, meaning that your Footer Image will appear as per its real dimensions. If you upload an image bigger than 70px high, that extra part will be leaked to show only the part within the 70px height of the footer.

We recommend to upload an image slightly smaller than 70px high so that your image will have some space around and not touch the footer edges.

Page Body Images

There is no restriction on the images that you can upload into your page body.

Bear in mind that, if you upload images wider than your Max Page Width*, your images will be scaled down proportionally to fit in the page.

* We will see this feature further down in this document.

5. Add content to a page

Given that you have already set up your portal authentication providers (see page 3 of this document), you can start to add content to your portal.

In your Odyssys account select the portal you want to customise, click the ‘Pages’ tab, open up the ‘Splash Page’ and click the ‘Edit Splash Page’ button.

By default, CPB window is set to show the ‘Branding/Content’ tab within the ‘Content’ panel when you open it – see Picture 3 below.



8

Picture 3. CPB window – ‘Content’ > ‘Branding/Content’ is open by default when you edit a page

5.1. Page Header

From the ‘Branding/Content’ tab on the right-side of the window, drag and drop the ‘Page Header’ icon (1) into the ‘Drop your HEADER content here’ box to the left (2) – see Picture 4 below.



9

Picture 4. Drag and drop ‘Page Header’ (1) into the header content box (2)

If you move your mouse over the header content, you will notice two icons appearing within the box, the left one is to delete the header element (1) and the right one is to edit it (2). Click on the edit icon to view all the available options on the right-hand side of the window (3) – see Picture 5 below.

Picture 5. Delete icon (1) and edit icon (2) over the header content box. Click the edit icon to view all editing options available (3)



10

Available options to edit in the ‘Header’ are:

Background colour

Header Type drop-down menu o Text – allows to use a Title for your Header o Image – allows to upload a Header Image

Fixed Position – tick this to make the header fixed to the top of the page when scrolling

Text Colour

For these guidelines purposes we will use an image for the header – you can upload it from your machine – and white colour for the background.

NOTES: once you have uploaded an image, a Trash icon will appear to the right of the ‘Header Image’, in order to allow you to change your image file.

Click on the ‘Background Colour’ colour preview (1) to change the header background colour; a colour picker will pop up on the left-hand side of the window. Once you have chosen the background colour click ‘OK’ (2). We also tick the ‘Fixed Position’ box (3) – see Picture 6 below.

Picture 6. Customise the header content

Once you have edited your header, click ‘Update View (1) to see a preview of the header content and then the small arrow (2) in the ‘Header’ panel to go back to the ‘Content’ panel – see Picture 7 below.

NOTES: you can fully customise the Header of your portal using your own custom CSS – see section ‘6.6 Advanced Options’ further down in this document.



11

Picture 7. Preview the header content

You might want to ‘Save & Close’ every now and then, to make sure you do not lose all the work done so far.

5.2. Page Footer

As you did for the header, from the ‘Branding/Content’ tab on the right-hand side of the window, drag and drop the ‘Page Footer’ icon (1) into the ‘Drop your FOOTER content here’ box to the left.

For these guidelines purposes we will use some text for the footer (1) along with white background (2) and fixed position (3). We also set the ‘Text Colour’ to a blue shade, HEX #0b5c9d (4) – see Picture 8 below.

NOTES: you can fully customise the Footer of your portal using your own custom CSS – see section ‘6.6 Advanced Options’ further down in this document.



12

Picture 8. Customise the footer content

Once done, click ‘Preview’ from top of the window to preview your page in a mobile device frame – see Picture 9 below.

Picture 9. Preview your page in a mobile device frame

Then ‘Close Preview’ and ‘Save & Close’ your changes.



13

5.3. Page Body content

5.3.1. Authentication Providers

NOTES: you should have set up your auth types previously; if not please see page 3 above in this document.

From the ‘Content’ panel go to ‘Registration’ to view the auth types available for your portal. As set up previously, you should be able to add only:

Email Login (1) – One Time Signup set up previously

Social Login (2) – Facebook set up previously

All other auth types are greyed out, as they have not been set up previously – see Picture 10 below.

Picture 10. Auth types set up previously

NOTES: you still can set up more auth types at this stage but we will not address this issue here. Please see support.odyssys.net/?s=authentication if you need help setting up auth types.

Email Login

Drag and drop ‘Email Login’ icon into the page body content and click the edit icon (1) to view all available options for this auth type (2) – see Picture 11 below.

http://support.odyssys.net/?s=authentication



14

Picture 11. ‘Email Login’/One Time Signup auth type options

In the ‘Email Login’ panel you can set up:

Title Text

Placeholder (of your form field)

Button Text

Add a Custom Field – in order to see your Custom Fields in the drop-down menu, you must define them in the ‘Custom Fields’ tab of the Captive Portals section of Odyssys (outside the CPB) before it will appear in the list for adding to the page. If you need help to set up custom fields, please see http://support.odyssys.net/?p=351 and http://support.odyssys.net/?p=593

Add an additional field (drop-down menu)

‘Email Login’ will add to the page body content only the email field and the call-to-action button (CTA). However, for this auth type, you can add pre-set additional fields from the drop-down menu – see Picture 11 above:

First Name

Last Name

User Gender

User Age

Social Login

Click the back arrow (3) to go back to the ‘Content’ > ‘Registration’ panel – see Picture 11 above.

http://support.odyssys.net/?p=351

http://support.odyssys.net/?p=593



15

Drag and drop ‘Social Login’ icon to add Facebook auth type. Move the mouse over Facebook content, click the edit icon (1) to view the available options for Social Login on the right (2) – see Picture 12 below.

Picture 12. ‘Social Login’/Facebook auth type options

Social Login available options are:

Title Text

Use default social icons – tick box

Untick the ‘Use default social icons’ box (1) to upload your custom icons. For these guide purposes, we have created and uploaded a custom icon (2). Click ‘Update View’ for a preview of your custom Facebook icon – see Picture 13 below.



16

Picture 13. Facebook custom icon uploaded

‘Save & Close’ your changes.

NOTES: all elements within the page body content can be moved and swap position by dragging them.

5.3.2. Add more content

Once you have added and customised the auth type(s) you might want to personalise your page with more content.

Go to ‘Content’ > ‘Branding/Content’ panel to add an image area, a text area, a divider (to separate auth types) and a code block to your page.

Image Area

Drag and drop the ‘Image Area’ icon into the page body content. Mouse over the image area content and click the edit icon to upload an image. This can be an advert, for instance. Click ‘Update View’ to preview your new image (1) – see Picture 14 below. In the example, we have uploaded a JPG file 300x250 pixels.

For best user experience and SEO purposes (Google search engine rankings), you can also give the image an ‘Alt Text’ (2) – see Picture 14 below.



17

Picture 14.’ Image Area’ added to page body content


Text Area

Drag and drop the ‘Text Area’ icon into the page body content. Mouse over the text area content and click the edit icon (1) to edit the copy. In the example, we have added a text area as a welcome message on top of the page (2) – see Picture 15 below.



18

Picture 15. ‘Text Area’ element

As you can see from the picture above, ‘Text Area’ allows to customise your text style as a simplified word editor. See Picture 16 below for result.

Picture 16. ‘Text Area’ added to page body content




19

Divider

By default, a ‘Divider’ is a horizontal line that spread for the whole width of the page and visually helps to separate content elements.

Drag and drop the ‘Divider’ icon into the page body content. At first, the divider content will look empty. Mouse over it (1) and click the edit icon to bring up the options available for this element (2) – see Picture 17 below.

Picture 17. ‘Divider’ element

Options available are (2):

Height

Vertical Margin

Background Colour

Show Message Block – tick box

Let’s tick the ‘Show Message Block’ to open up more options – see Picture 18 below – and click ‘Update View’ to preview our changes.



20

Picture 18. ‘Divider’ > ‘Show Message Block’

You now can fully customise your divider (2).

We set it up to create a thin dark purple line to divide the auth types, wording ‘OR’, setting the line background colour and the message colour to HEX #333366, the message corner radius to 20 and the message padding to 8px to give the message a nice rounded shape (1) – see Picture 19 below.

Picture 19. ‘Divider’ set up using ‘Show Message Block’ feature



21


6. The ‘Design’ panel: customise the look & feel of a page

As mentioned before in this document (see page 5), the ‘Design’ panel allows to customise the look & feel of your page.

The sections of the ‘Design’ panel are:

1. Layout 2. Side Menu 3. General Typography 4. Links & Buttons 5. Form Elements 6. Advanced Options

Picture 20. The ‘Design’ panel

6.1. Layout

In the Layout section, you can customise the following options:

1. Page Bg Colour – the background colour of the entire page (header, footer and body content)

2. Page Bg Image – the background image of the entire page (header, footer and body content)



22

3. Content Bg Colour – the background colour of the content – NOTES: this does not apply to the components (copy, form, images, etc.)

4. Content Bg Opacity – it allows to give some transparency to the content background, in order to see the background colour/image underneath

5. Content Padding – NOTES: this is a vertical padding only, between components, in pixels; the whole content has a 20 pixels padding between the edges of the content box and the contents

6. Max Page Width – specifies the maximum width of the content box, in pixels

Picture 21. ‘Design’ > ‘Layout’

For the purposes of this guide, we opt for the following settings – see Picture 21 above:

1. Page Bg Colour – #ffe9b3 (a light yellow colour) 2. Page Bg Image – see further below 3. Content Bg Colour – we leave it white (by default) 4. Content Bg Opacity – 70 (out of 100) 5. Content Padding – 0 pixels (as by default) 6. Max Page Width – we leave it 450 pixels (by default)

‘Update View’ to see your changes and ‘Save & Close’.

Page Bg Image

See also section ‘4. Content recommendations and restrictions’ on page 6 of this guide.

Let’s now upload a background image. We opt for a light yellowish image to be consistent with the background colour chosen – see Picture 22 below.



23

Picture 22. ‘Design’ > ‘Layout’ > Background image uploaded

NOTES: the Trash icon to the right of the Page Bg Image will allow you to upload a different image file if you change your mind.

‘Update View’ to see your changes and ‘Save & Close’.

NOTES: you can fully customise the layout of your portal using your own custom CSS – see section ‘6.6 Advanced Options’ further down in this document.

6.2. Side Menu

By default, Side Menu is not active; you have to tick the ‘Use Side Menu’ checkbox (1) to activate it and view all the options available – see Picture 23 below.



24

Picture 23. ‘Design’ > ‘Side Menu’

Key features of the ‘Side Menu’ are:

1. ‘Use Side Menu’ checkbox – it must be ticked in order to see all the options available 2. Position – left- or right-side of the page; menu icon shows within the header 3. Menu Icon – see details below 4. Close Icon – see details below 5. Background Colour – the background colour of the menu when open 6. Link Colour – colour of the menu links 7. Hover Link Colour – colour of links when hovering with the mouse or tapping 8. Side Menu Links – see details below

Menu Icon and Close Icon

Menu Icon (usually called ‘hamburger icon’) and Close Icon can be set as ‘Icon’ or ‘Custom Image’.

The first one allows to create a CSS icon, setting its colour; default size is 40x40 pixels.



25

The ‘Custom Image’ option allows to upload an image file to use as an icon – please see section ‘4. Content recommendations and restrictions’ on page 6 of this guide for icon images best practice.

Side Menu Links

Click the ‘Add new link’ button to choose your link name to be display (Link Text) and the URL to redirect to – see Picture 24 below.

You can add as many links as you want in your side menu.

NOTES: click the Trash icon of a Link Text to remove that link from your side menu.

Picture 24. ‘Design’ > ‘Side Menu’ > ‘Side Menu Links’ detail (we added four links)

Full custom Side Menu

Now we can customise our side menu; for this guide purposes, we use the following settings:

1. Position – right (by default) 2. Menu Icon – we uploaded a custom icon, using a PNG image, 40x40 pixels

dimensions, 1KB size and yellow colour HEX #ffcc33 3. Close Icon – we used the ‘Icon’ option, setting the colour to HEX #ffcc33 4. Background Colour – left default (dark grey HEX #35393b) 5. Link Colour – left default (white) 6. Hover Link Colour – we chose the same colour as the page background colour (HEX

#ffe9b3) 7. Side Menu Links – we added four links – see Picture 24 above



26

See Picture 25 below for a full custom side menu.

Picture 25. ‘Design’ > full custom Side Menu

‘Update View’ to see your changes.

Then ‘Save & Close’.

NOTES: you can fully customise the Side Menu of your portal using your own custom CSS – see section ‘6.6 Advanced Options’ further down in this document.

6.3. General Typography

You can set font options for your portal within this section:

1. Font – choose from four pre-defined typefaces from the drop-down menu 2. Heading Colour 3. Text Colour 4. Text Size (pixels)

For the purposes of this guide, we will keep the default settings – see Picture 26 below – but you can try and play a bit to see this feature potentials.



27

Picture 26. ‘Design’ > ‘General Typography’

NOTES: you can fully customise the typography of your portal using your own custom CSS – see section ‘6.6 Advanced Options’ further down in this document.

6.4. Links & Buttons

In this section, you can customise your portal links and buttons look & feel to make all your components consistent with your brand – see Picture 27 below.

We have changed link and button settings to match the look & feel of our sample portal.



28

Picture 27. ‘Design’ > ‘Links & Button’

Do not forget to ‘Save & Close’ your changes every now and then.

NOTES: you can fully customise the links & buttons of your portal using your own custom CSS – see section ‘6.6 Advanced Options’ further down in this document.

6.5. Form Elements

Customise your portal form elements, colours and shape:

1. Border Colour – of form fields and buttons 2. Background Colour – of form fields 3. Border Radius – 0 to 20 pixels; it allows to give a more rounded shape to form

elements (fields and buttons)

We set the Border Colour to HEX #ffe9b3, leave the Background Colour white as default and set the Border Radius to 20 pixels, to give our form elements a smoother rounded shape – see Picture 28 below.

NOTES: again, you can fully customise the look & feel of form elements, using your own custom CSS – see next section ‘6.6 Advanced Options’ in this document.



29

Picture 28. ‘Design’ > ‘Form Elements’

6.6. Advanced Options

Advanced Options allow to customise your portal further, by setting up the ‘Page Title’ and ‘Custom CSS’ – see Picture 29 and considerations below.

Picture 29. ‘Design’ > ‘Advanced Options’



30

6.6.1. Page Title

The page title is a “critical [element] to both SEO and user experience that is used to briefly and accurately describe the topic and theme of an online document. The title tag is displayed in two key places: the top bar of internet browsers (or tabs) and search engines results page [Google, for instance]“. Therefore, its importance.

6.6.2. Custom CSS

Copy and paste your CSS code into this box to further customise your portal look & feel.

Paste your custom CSS styles in the same format as you would write an external *.css file code – no need of <style>…</style>.

Odyssys will add your CSS code automatically to an external *.css file accordingly to your portal ID. For instance, if your portal ID is 95608866, Odyssys will create a file named ‘styles_95608866.css’.

A link to this external file will be automatically added to the <head> of every page within the portal, in the format of <link href="/gallery/_GALLERY_ID/styles/styles_95608866.css" media="all" rel="stylesheet"></link>.

To understand better this powerful advanced tool, we will add some custom style to our portal, in the specific to the Splash Page that we have been working on so far.

We will customise the following components:

Main headline – ‘Welcome to our free Wi-Fi’

Subtitles – ‘Register by confirming a few details’ and ‘Connect using a social profile’

Input field

Footer

See below the custom CSS code we have used.

/*Body Content*/ section {padding: 0 24px 0 24px;} input {margin-bottom:0;} .textArea p {font-size:24px; color: #ffcc33; margin-bottom: -7px;} .subtitle {font-size:18px; font-weight:bold;} #social p { font-size:18px; font-weight:bold;}

/*Footer*/ #footerText {font-size:12px; font-weight:bold;}



31

7. Screenshots of final product

Picture 30. Splash Page view on iPhone 6

Picture 311. Splash Page view with side menu open on iPhone 6



32

Picture 32. Splash Page on iPad (portrait view)

Picture 33. Splash Page on iPad (landscape view)

Documents

Captive Portal Builder (CPB)€¦ · Captive Portal Builder (CPB) is a powerful tool that allows to quickly create branded & responsive captive portals using a drag & drop wizard,