Using the CloudTrax Splash Page Editor

Follow

CLOUDTRAX USER GUIDE:

Using the CloudTrax splash page editor

Overview: what we’re doing

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 an HTML and WYSIWYG editor.
  • Add special notifications for network users.
  • Have network users agree to specific terms and conditions.
  • Control access using vouchers or PayPal.
  • Allow users to roam between nodes without seeing the splash page again with automatic MAC Authentication.

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 PayPal 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.
Quick Tip: Control access with vouchers and PayPal

CloudTrax integrates with vouchers and PayPal to allow you to control network access and provide users with automatic online payment options.

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

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.

2: Using the WYSIWYG editor

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

In addition to the standard editing tools (along the top tool bar) you’d see in an email client or word processor, there are a few more tools in CloudTrax along the bottom. You can toggle between Edit (WYSIWYG), Source (HTML) and Preview modes at any time. Additionally, you can toggle between the Simple and Complete tool bars while in Edit mode.

To edit the splash page, simply treat it as you would an email or word processing document. Click anywhere to type. Edit your text by changing fonts, sizes, highlights and more.

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.

Advanced? Use HTML

If you have a knowledge of HTML, you can edit the source code of your splash page by selecting the “Source” tab on the lower left.

The Insert Image tool lets you do a few things:

View files: Files that are part of the template and files you upload will appear in the box on the top left. You can also see all the images you have access to with this template.

Upload files: In the bottom right, you can upload files from your computer. Click the “Upload files” button, select the file you’d like to upload, and click “Open” to upload. Note that you must upload all images to CloudTrax. Do not use external images.

Change image layout: In the lower left, you can change an image’s properties, including size, border, alignment, and spacing

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

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

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, save it and close the editor window.

 

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.

4: Splash page configuration options

The splash page settings are available on SSID#1. Select “Edit Network” and go to “SSID #1”. Near the top of the page are the following options that relate to your splash page:

Captive Portals: To use a CloudTrax splash page, leave this to the default “CloudTrax.” The other option, Chillispot, is from a third party and will not be covered here.

Splash Page Enable: Now that your splash page is customized how you want, check this box to enable it. You can turn off the splash page here at any time without losing your design.

Block Pre-Authenticated Users: This function blocks all ports until your splash page has been successfully clicked-through. If unchecked, only browsing is blocked. Checking initially disables services such as email, instant messengers, VoIP, etc., but will require first opening a browser to use any internet services. Not (yet) compatible with PayPal “Buy Now” buttons.

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

Redirect URL: The page to display after the splash page. Leave blank to display the user’s requested page.

Client Idle Timeout: Minutes client is idle before showing splash page for non-voucher access. 1 day=1440.

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

For basic splash pages, you can leave all of the settings at their default. 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

Comments

  • Avatar
    SBR

    I want to enable this.... "Allow users to roam between nodes without seeing the splash page again with automatic MAC Authentication."

    So sorry, but I can't find the "MAC Authentication" option. Help please? :(

  • Avatar
    Ryan Detwiller

    Hi Steve - the automatic MAC authentication refers to other access points automatically authenticating the users (based on their MAC address) if they had already been authenticated by another access point on the network. There's nothing to enable - it happens automatically.

  • Avatar
    Jason Moseley

    Is there a way to enable the splash page, but not block any other services at the same time? For instance, at our church, if people want to use a Bible app, they can't until they process the splash page. I'd like everything to work, and then, if they go to their web browser, our page shows up for them first.

  • Avatar
    Bryan Patterson

    @ Jason - you might be able to get this done if you don't enable the "Block Unauthenticated Users" option. With that feature off, any protocol other than HTTP (port 80) will still be able to get through but HTTP traffic would trigger the splash page. However most devices will now check to see if there's a splash page on the network and will prompt the user to click through the splash page as soon as they connect.

Powered by Zendesk