Using the CloudTrax Splash Page Editor

Follow

Overview

This guide is intended to help you set up your CloudTrax splash page. With a splash page, you can channel network users to see a custom page before they can access the Internet.and

With a splash page enabled, you can:

  • Control of the look and feel with the splash page editor or raw HTML.
  • Have network users agree to specific terms and conditions.
  • Control access using vouchers or PayPal.

Here’s what’s about to happen

  1. We’ll choose an editable, pre-designed template in CloudTrax
  2. We’ll explain how to customize the template with the WYSIWYG editor
  3. We’ll upload images from your computer to be used on the splash page
  4. We’ll set the configuration options for the splash page in CloudTrax

This guide is intended to be used with existing networks. If you haven’t set up your network yet, check out the CloudTrax Quick Start Guide

If you want to control access to your network with vouchers, see the Using Vouchers in CloudTrax guide. 

To require users to pay for internet access using PayPal checkout our PayPal Guide here. 

What you’ll need

To set up a splash page on your network, you’ll need the following:

  1. A CloudTrax network.
  2. A computer with any major browser installed and pointed to www.cloudtrax.com.
  3. A basic understanding of HTML is helpful, though not required.

Steps

Step 1: Choosing a starting template

Let’s open up the splash page editor. You should be under the Configure section and the SSID number you wish to have a splash page. Then enable the splash page toggle and click "Edit Splash Page". 

basic_splash_page.PNG

You can choose another template from the drop-down menu at the top of the editor.

Here are a few samples:

Default Airport Beach
Brew Camp Coffee
Downhill Hotel Shop
Park Restaurant Relax

The templates are simply starting places. You can use and customize one of them, or—if you have a knowledge of HTML and web design—start from scratch using the "Default" template.

To choose a template to customize, simply select one from the lower right menu and start editing it. You will be editing a copy of the template and you can go back to the default at any time.

Step 2: Using the WYSIWYG editor

With your starting template selected, it’s time to customize it with your own message, links, and images. CloudTrax uses a WSIWYG (what-you-see-is-what-you-get) editor and can also support HTML editing. Below is an overview of the editing environment.

To edit the splash page, simply treat it as you would a word processing document. Click anywhere to type. Edit your text, change text formatting, or insert hyperlinks and images using the top tools.

The top-left '<>' icon allows for direct HTML imports or HTML modification.

Save changes on both the splash page editor and the SSID configuration pane when you are done making changes, or the changes may be lost.

example_splash.PNG

Step 3: Adding and modifying images

Each splash page template comes complete with standard stock images you are able to use. You can also insert your own images such as logos and photos. To do this, you will use the Insert Image tool.

First, click the Insert Image button on the top right side of the tool bar. This will open the window shown below.

insert_image_splash.PNG

Advanced? Use HTML

If you have a knowledge of HTML, you can edit the source code of your splash page by selecting the “<>” icon on the upper left.

The Insert Image tool lets you do a few things:

Upload: Drag files into the 'Drop file here', or select 'Browse...'. Note that the max file size you can upload is 512 KBs, and the total of all images uploaded to the APs should not exceed 1 MB.

Link: You can add a URL that your image will link to and add titles and alternative text.

Insert: Once you have your image ready to use, you can insert it into your splash page by clicking the “Insert” button. 

insert_link_image.PNG

Finishing your splash page customization: As you import and insert images, you may toggle back and forth between the regular WYSIWYG editor and the Insert Image tool.

Once your splash page is complete, select 'Save Changes' from the top-right of the editor, and save the settings of the SSID configuration pane. 

Quick Tip: Find out the size of an image

By selecting an existing image, you’ll be able to see the height and width, in pixels. You can use this information to edit your own replacement images before uploading so they can fit precisely into the template.

Step 4: Splash page configuration options

The splash page settings are available on the [Configure > SSID X > Splash Page] pane. At the top of the Splash Page Configuration pane are the following options that relate to your splash page:

Splash Page Types: 

  • Custom - Authenticate through the AP or other local resource.
  • Facebook WiFi - The AP will act as the authenticator in the Facebook WiFi process.
  • Hosted Remotely - The AP will act as the authenticator to an external splash page.

Splash Page Authentication Types: 

  • CloudTrax - The AP will host the splash page and handle the authentication process.
  • RADIUS - The AP will act as the authenticator for a RADIUS server.
  • HTTP - The AP will act as the authenticator for a HTTP authentication server.

Failed Authentication Block: Set the amount of voucher attempts that can be made before a lockout event occurs, and how long said lockout period will last.

Client Force Timeout: Minutes between showing splash page regardless of activity for non-voucher access. 1 day=1440.

Require Voucher: Require a valid voucher on splash pages. If unchecked, allows you to provide a basic tier of service at the rates and durations above and (optionally) faster service using vouchers or PayPal.

Enable Failsafe Mode: Enable this to allow clients to connect to the internet, when the authentication server is unreachable.

Display Name: This will be displayed in place of $gatewayname in the splash page. Leave this empty to use the SSID name.

Redirect URL: The page to display after the splash page. Leave blank to display the user’s requested page. Note that if the client is authenticating with a native mobile browser, these clients will typically close the native browser once the client is authenticated and not receive the redirect. This will work on computers or mobile devices using an app based browser.

Include user date in redirect URL: If set, additional information specific to the request is added as URL parameters when the final redirect occurs. The parameters node_mac, client_mac, and client_url will be set to the MAC addresses of the Access Point and Client, and the original request URL, respectively.

Block Unauthenticated Users: This function blocks all ports until your splash page has been successfully clicked-through. If this is left disabled, any client will be able to load HTTPS (encrypted) traffic without issue, regardless of whether it is authenticated or not. Be sure to enable this if you wish to require authentication before the client has internet access.

Whitelist: MAC addresses, one per line that will not see the splash page. Useful for game consoles and other devices that do not have a browser. Bandwidth throttling still applies to white-listed devices.

Walled Garden: Sites users can visit prior to authentication. Valid host names or IP addresses should be provided, each on a separate line.

splash_page_configuration.PNG

For basic splash pages, you can leave most of the settings at their default, but do consider enabling the 'Block Unauthenticated Clients' option depending on your use case. You can also adjust any settings later on. 

Next Steps

Splash pages do more than simply ask users to connect to the network: you can also control network access with vouchers and use PayPal to enable online automatic payment for those vouchers.

Have more questions? Submit a request!