How to create a splash page? – Plasma Cloud

A splash page is a custom web page shown to users before they can access the Internet from your network. This is often done to have users agree to specific terms and conditions before starting their navigation.

This article leads you through the process of creating, building and configuring your own local splash page on the Plasma Cloud console.

Creating and editing splash pages is only available in organizations where you have full access (as owner or shared organisation with edit permissions).

Create a Splash Page

Log into the Plasma Cloud console;
Select the Organisation of interest from the top right menu (splash pages can be configured on any network belonging to the selected organisation);
Navigate to Settings > Splash Pages > Create splash page in the main menu on the left;
Type your splash page name and click Create in the form that opens up.

You will be redirected to a page with the splash page editor and all the splash page settings. You can now start building your splash page - let's see how.

Build a Splash Page

You can build a splash page through the splash page editor. To do so, you can either start from scratch or use one of the templates available from the Templates drop-down menu on the top left of the editor.

You can freely use and customize any of these templates. To start from scratch or to apply heavy customization, you will need some knowledge of HTML/CSS, JavaScript and web design in general.

The templates can be modified both graphically, using the WYSIWYG (what-you-see-is-what-you-get) editor tools, and via code, by clicking the icon on the top right of the editor.

Do not forget to click Save to make sure your changes don't get lost.

Import External Files

You can import external files, such as CSS or JavaScript files, to the splash page through the Upload Assets button.

Doing this opens the Asset management pop-up, where you can drop files to upload or pick them manually from your folders.

Once an asset has been uploaded, it's shown in the same pop-up window. Upon selection, you can rename any asset by clicking on the edit button next to the current name.

Make sure you do not forget to click on the save icon afterwards.

The following message will be displayed on the bottom of the window, to easily indicate the file path to be used in the editor to directly refer to the selected asset.

The icon in the editor can be used in a similar way to upload images only. We strongly advise using this option for images, as it also allows to specify a title, description and width/height values.

Create a "Proceed to Internet" Button

The provided templates are already equipped with a working "Proceed to Internet" button to allow users to start browsing. If you are making your own splash page from scratch, please use the following code in order for your button to work correctly:

<form action="$authaction" method="get">
 <input name="tok" type="hidden" value="$tok" /> 
 <input name="redir" type="hidden" value="$redir" /> 
 <button class="button" type="submit">Proceed to Internet</button>
</form>

Feel free to customize the submit button text, but please do not alter the other values as they are essential to the captive portal software.

Special Keyword

A special keyword can be used to help you build your code more easily and effectively:

$gatewayname -> any occurrence of this keyword in the splash page HTML code will be substituted with the name of the Plasma Cloud network used to navigate.

Configure a Splash Page

Once your splash page looks great and is ready to be published, make sure you go through all its configuration settings as well.

Advanced:

Type the web page where clients have to be redirected after login (leave empty to have clients redirected to the originally requested page).
Type the number of minutes that need to pass before showing the splash page again.

Policies:

Unauthenticated client traffic: You can either decide to Block all traffic until your user has successfully clicked-through your splash page or Block web traffic only and let all the rest go through.
Walled garden: Type all those websites that users are allowed to visit prior to clicking-through your splash page. Make sure the various links are separated by a space.