User Templates

About this task

Configure → Splash Template → User Templates.

The User Templates screen displays a summary of captive portal splash templates hosted by ExtremeGuest Essentials.

These splash templates are of two types: customized-system templates and user-defined templates. The User Templates screen allows you to:
  • upload a splash template from your local file system.
  • apply splash template to a network.
  • edit an existing splash template.
  • create a new splash template.
  • view splash template to network mapping summary.

Follow the steps below to upload, edit, create a splash template or get a summary view of existing templates.

Procedure

Uploading Splash Templates

  1. Select the User Templates tab.
    The User Templates screen displays.
    Click to expand in new window
    Splash Template - User Templates Screen
  2. Select the icon at the top right corner of the screen.
    The Upload Template window opens.
    Click to expand in new window
    User Templates - Upload Template Screen
  3. Enter a name for the template, select Browse and navigate your local file system to locate and select the splash template file.
  4. Select Upload.
    The selected splash template is uploaded to ExtremeGuest from your local system.

Applying Splash Templates to Networks

Splash templates displayed on the User Templates screen can be applied to networks.

  1. Select to apply the captive portal template to a network.
    Note

    Note

    The icon indicates that the template is already applied to a network. The icon indicates that the template has been changed after it has been applied to a network.
    The Apply template window opens.
    Click to expand in new window
    Apply Template to Network Screen
    Refer the table below for details:
    Location Map the captive portal page with a location(s). When mapped, the APs within location(s) (either directly or through the ExtremeGuest Essentials web server) serve the captive portal pages to guest users.

    Expand the Location tree to view the locations (RF Domains) defined within your network. Drill-down to the last node and select a site. Or, select anyone of the upper node (country, state, region or campus) to apply the captive portal pages to multiple sites.

    Network Click the icon to view available networks. Select the Network to which this captive portal provides access.

    When selected, guest users attempting access to the specified network are required to authenticate with the captive portal and are allowed access only if successfully authenticated.

    Apply Select to activate the captive portal template.
    Note: The Apply button is enabled only if the mode of distribution, location and network settings are specified.
  2. Select to download a template locally.
  3. Select to delete a template.
  4. Select to edit a template.
    Note

    Note

    If editing a template, go to Creating/Editing Splash Templates for more information.

Viewing Splash Templates to Network Mapping Summary

  1. To view a summary of splash template to network mappings, select the icon.
    Note

    Note

    For information about this screen and its content, see Viewing a Summary of Available Splash Templates.
  2. To return to the default view, select the icon.

Creating/Editing Splash Templates

The User Templates screen provides a robust, easy-to-use splash template builder wizard. Use the wizard's 'drag & drop' elements, color, text and language customization tools and logo upload options to create your branded captive portal web pages.

  1. To create a new splash template, select the icon.
    To edit an existing template, select the icon below the template. The template opens in the edit mode.
    The Create Splash Template screen opens.
    Click to expand in new window
    Create Splash Template Screen
  2. Enter a name for the splash template. Provide a name that uniquely identifies its purpose.
  3. Select the type of web pages your users will be served.
    Note

    Note

    Below the Name field is the splash template page tabs. By default the following three tabs are displayed: Landing, Welcome and Failure.
  4. To add pages, select and select the Login page.
    Note

    Note

    You can remove all other splash template pages except the Landing page. To remove a page, place the cursor on the tab and select the icon.
  5. Select a splash template tab to add or edit the page contents.
    Note

    Note

    The add/edit page screen is divided into a bigger, main pane and a right-hand panel. Each splash page type has its own collection of themes, widgets and page settings options that are displayed in the right-hand panel. These options are the building components that you will use to build your page content.
  6. Select Select Theme.
    Themes divide the page into sections/cells, which are place holders for widgets. To add widgets, you need to first place themes on the splash page. Themes are grouped into Layouts and Templates. Perform one or both of the following tasks:
    • Expand the Layouts section. You have six layout themes to select. Each layout theme has one or more cells. Each cell can contain only one widget. Drag and drop one or more layout on to the main splash template pane.
    • Expand the Templates section. Templates are layouts with pre-filled text and/or image widgets. You have five template themes to select. Drag and drop one or more template on to the main splash template pane.
    Note

    Note

    When creating the page layout, take into consideration the various elements (text, image, buttons, login options, etc.) that you plan at add to the page.
    The Select Theme menu displays.
    Click to expand in new window
    Create Splash Template - Select Theme Options
    Note

    Note

    You can use multiple layouts or templates or a combination of layouts and templates to divide the page into sections. The height of these sections can be adjusted by dragging the bottom margins.
  7. Once the themes are added, you can perform following actions:
    1. Change background color of a layout or template. Select the icon to open the built-in color palette. Select the background color and select OK .
      The Color Palette displays.
      Click to expand in new window
      Create Splash Template - Built-in Color Palette
    2. Reset background color. Select the icon to reset background color to transparent.
    3. Remove a layout or template. Select the icon to remove the layout or template.
  8. Select Select Widget.
    The Select Widget menu displays.
    Click to expand in new window
    Create Splash Template - Select Widget Options
  9. Drag and drop a widget into the layouts/templates on the splash page. Following are the available widget types:
    Text Widget Adds text to the page.
    Image Widget Adds image to the page.
    HTML Widget Adds HTML content to the page. Use this widget to design your web page from scratch, without using any of the system-provided themes or widgets.
    Slide Show Widget Adds a slide-show component to the page, using the images available in the gallery.
    Video Content Widget Adds video to the page.
    Button Widget Adds any button with a per-defined hyperlink to a page.
    Registration Form Widget Adds a registration form to the page. Users are served an internal (or) externally hosted registration page where they have to complete the registration process if not previously registered.
    Login Options Widget Adds buttons that enable “Accept and Connect” action or go to “Login” page action
    Social Options Widget Adds social media sign-in options.
    Terms and Conditions Widget Adds “Terms and Conditions” and “Privacy Policy” hyperlinks with pop-up texts.
    Login Form Widget Adds a simple login form with “Email or Mobile” and “Received Passcode” fields.
    WiFi Logout Widget Adds button that enables the user to logout from connected WiFi.
    Redirect Widget Adds a redirection URL to the web page.
    Note

    Note

    Each of the above widgets has two icon tools on the top, right corner of the widget bar. Use the icon to edit the widget settings, use the icon to remove the widget.

Editing Text Widget

Back to Widget Options Table

Use this widget to insert content/text in the web page. The ExtremeGuest Essentials text widget provides a pop-up, HTML editor to add text.

  1. Select the icon to open the HTML text editor.
    The Text widget - HTML Editor window displays.
    Click to expand in new window
    Create Splash Template - Text Widget - HTML Editor
  2. Enter your text and use the HTML editor tools to set the font style, size, color and text alignment.
  3. Use the tool to preview the content. Make changes if necessary.
  4. Select Save Contents to save and exit the editor.

Editing Image Widget

Back to Widget Options Table

Use this widget to insert images in the splash page.

Note

Note

The Image widget not available for the 'Failure' web page.

  1. Select the icon to open the Image Settings panel.
    The Image Widget Settings panel displays.
    Click to expand in new window
    Upload Image Select Browse and navigate your local file system to locate and select the image file. Select Upload. The image is uploaded to the Gallery .
    Note: The following image file types are supported: .jpg, .jpeg and .png.
    Alignment Use the alignment buttons to set the alignment of the image within the layout cell.
    Width and Height Use these options to change the image size. By default, an image auto-resizes to fit in the layout cell.
    Gallery The gallery displays user-uploaded images. Drag and drop an image into the image widget. Select icon to remove an image.

Editing HTML Widget

Back to Widget Options Table

The HTML widget allows you to design the content of the selected section of the web page using HTML or JavaScript. Use this widget, to create the content of a specific section of the web page from scratch instead of using the system-provided widget content.

Note

Note

Both HTML and JavaScript is supported.

  1. Select the icon to open the HTML editor.
    The HTML Widget - HTML Editor panel displays.
    Click to expand in new window
    Create Splash Template - HTML Widget - HTML Editor
  2. Enter your HTML code or JavaScript and select Save HTML Contents to save and exit the editor.

Editing Slide Show Widget

Back to Widget Options Table

Image slide-shows are an excellent means of enhancing user engagement and experience. Use this widget to add slide shows of images to the splash pages.

  1. Select the icon to open the Slide Show Settings panel.
    The Slide Show Settings panel displays.
    Click to expand in new window
    Create Splash Template - Slide Show Settings Panel

    Drag and drop images from the Gallery to create a slide show. You can upload and delete images from the gallery as described in Step 20: Editing Image Widget.

Editing Video Content Widget

Back to Widget Options Table

Videos enhance user engagement and experience. Make your web pages informative and attractive by adding didoes to your web pages.

  1. Select the icon to open the Video Settings panel.
    The Video Settings panel displays.
    Click to expand in new window
    Create Splash Template - Video Settings Panel

    The Video Settings panel has the Upload Video and Video gallery options, similar to the Image Settings panel. Upload your video to the gallery, then drag and drop the video file into the widget.

    Note

    Note

    This widget uses HTML5 Video tag. The following image file types are supported: .mp4, .ogv and .webm. To ensure cross-browser compatibility, upload your video file in all three formats. For example, save the video 'test' as 'test.mp4', test.ogv' and 'test.webm'. Upload all three files to the video gallery at the same time.

Editing Button Widget

Back to Widget Options Table

Button Widget is a simple and effective tool for inserting a button with hyper link to a web page. Use this widget to create a button that directs users to a pre-defined URL.

  1. Select the icon to open the Button Settings panel.
    The Button Settings panel displays.
    Click to expand in new window
    Create Splash Template - Button Settings Panel
    The Button Settings panel has the following fields:
    Url field Use this widget to insert a button that is hyperlinked to a pre-defined page. In the URL field, enter the URL of the page the user is directed to on clicking the button.
    Text field Enter the text displayed on the button.
    Font Size (in px) Set the font size in pixels.
    Border Radius (in px) Set the button's border radius in pixels.
    Size Use the slider to set the button size.
    Alignment Set the button's alignment within the layout cell.
    Text Use this tab to set the color of the text appearing on the button.
    Button Use this tab to set the color of the button itself.

Editing Registration Form Widget

Back to Widget Options Table

Use the Registration Form widget to insert a form where guest users enter specific information in order to register with your captive portal.
Note

Note

The Registration Form widget is available only for the 'Landing' web page.

  1. Select the icon to open the Registration Form Settings panel.
    The Registration Form Settings panel displays.
    Click to expand in new window
    Create Splash Template - Registration Form Settings Panel

    Insert a registration form for first-time users. First-time users are required to enter information in the fields displayed on the page. The available field options are: Full Name, Email, Mobile Number, Gender, Birth Day, Terms & Conditions. Each field has an associated Enable and Optional checkbox. Select Enable to add the field to the form. Select Optional to make the field optional.

    Note

    Note

    The Terms & Conditions option adds the Terms & Conditions Widget at the end of the page.

Editing Login Options Widget

Back to Widget Options Table

Use the Login Options Widget if you wish to enforce a 'Accept and Connect' or go to 'Login' page action.

  1. Select the icon to open the Login Options Settings panel.
    The Login Options Settings panel displays.
    Click to expand in new window
    Create Splash Template - Login Options Settings Panel
    The Login Options Settings panel has the following fields:
    Login Type Select one of the following login type action:
    • Accept and Connect - redirects user to the accept and connect page.
    • Login - redirects user to the login page.
    Alignment Set the alignment of the button/link within the layout cell.
    Button Select to insert a button.
    Link Select to insert a hyperlink.
    Text If selecting the 'Button' option, specify the text on the button. If selecting the 'Link' option, specify the hyperlink text.
    Font Size (in px) Set the font size in pixels.
    Border Radius (in px) Set the button's border radius in pixels.
    Text/Button Selecting the 'Button' option, enables these tabs. Use these tabs to set the color of the text on the button and the color of the button itself.
    Font Size/Font Color Selecting the 'Link' option, enables these tabs. Use these tabs to set the font size and color of the hyperlink text.

Editing Social Options Widget

Back to Widget Options Table

Use this widget to add user authentication through social media applications. Guest users can use their Facebook, Google or LinkedIn account credentials to authenticate and access the internet.

  1. Select the icon to open the Social Options Settings panel.
    Note

    Note

    The Social Options Settings widget is available only for the 'Landing' and 'Login' web pages.
    Note

    Note

    Ensure that the social media is added as an authenticator on the portal.
    The Social Options Settings panel.
    Click to expand in new window
    Create Splash Template - Social Options Settings Panel
    Social Type Use this drop-down menu to select the social media sign-in options.
    Note: Available options are: Facebook, Google or LinkedIn. You can add more than one social-media login option.
    Button Select to insert a button.
    Link Select to insert a link.
    Alignment Set the alignment of the button/link within the layout cell.
    Text Enter the social media name in the 'Sign in with {name}' field. For example: Sign in with Facebook
    Font Size (in px) Set the text font size.
    Border Radius (in px) Set the button's border radius in pixels.
    Size Use the slider to set the button size.
    Space Use the slider to set the space between buttons.

Editing Terms and Conditions Widget

Back to Widget Options Table

Use this widget to insert 'Terms and Conditions' and 'Privacy Policy' hyperlinks with pop-up texts.

Note

Note

The Terms and Conditions widget is available only for the 'Landing' web page.

  1. Select the icon to open the Terms and Conditions Settings panel.
    The Terms and Conditions Settings panel displays.
    Click to expand in new window
    Create Splash Template - Terms And Conditions Settings Panel
    Terms And Conditions Text Select the Edit Text button to open the HTML editor. Enter the terms and conditions that the captive portal user views on clicking the Terms And Conditions link.
    Privacy Policy Select the Edit Text button to open the HTML editor. Enter your company's privacy policies that the captive portal user views on clicking the Privacy Policy link.
    Alignment Set the alignment of the links within the layout cell.
    Font Color Set the link text font color.
    Font Size (in px) Set the link text font size in pixels.
    Separator Text Set the separator between the two links.
    Separator Space Use the slider to set the space between the separator and the links on either side.

Editing Login Form Widget

Back to Widget Options Table

Use this option to insert a simple login form. A login form is an easy and simple mode of authenticating already registered guest users.

  1. Select the icon to open the Login Form Settings panel.
    The Login Form Settings panel displays.
    Click to expand in new window
    Create Splash Template - Login Form Settings Panel

    The login form allows guest users to enter their username and passcode registered with the ExtremeGuest Essentials database. The form has two fields. Each of these fields has two parameters: The field label and the text displayed within the field placeholder. Customize the field labels and the prompt-text displayed within the placeholder.

Editing WiFi Logout Widget

Back to Widget Options Table

Use this option to insert a WiFi-Logout button. This option allows successfully authenticated guest users to logout from the connected WiFi.

  1. Select the icon to open the WiFi Logout Settings panel.
    The WiFi Logout Settings panel displays.
    Click to expand in new window
    Create Splash Template - Logout Button Settings Panel

    Use the WiFi Logout Settings panel to customize the logout button as per your requirement. This panel provides settings similar to the Button Settings panel with one exception, there is no URL field in the WiFi Logout Settings panel. For more information, click here.

Editing Redirect Widget

Back to Widget Options Table

Use this option to redirect the guest user to another web page. Since the redirect widget takes the user to another page, you cannot use it in combination with other widgets. If your page layout has space for more than one widget, you will be prompted to provide permission to delete other widgets on the web page.
Note

Note

The Redirect widget is available only for the 'Welcome', 'Failure' and 'No Service' web pages.

  1. In the Edit Redirect URL box, specify the URL of the web page to which your users are to be redirected.
    The Edit Redirect URL window displays.
    Click to expand in new window
    Create Splash Template - Edit Redirect URL Box
  2. Select Page Settings. Use the page settings fields to either upload a background image or select a background color for the remainder of the web page that lies outside of the Theme or Widget pane.
    The Page Settings window displays.
    Click to expand in new window
    Create Splash Template - Select Page Settings Options
    Color
    Use the built-in color palette to select the background color of the splash template. This background color can be viewed in the Preview mode.
    Upload Image
    Use this option to upload and insert a background image. Select Browse and navigate your local file system to locate and select the image. Select Upload. A thumbnail of the uploaded image is added to the Gallery section. You can upload multiple images, however, only one image can be used as the background image at a time.
    No Repeat/Repeat/Horizontal Repeat/Vertical Repeat
    This button changes the background image repeat status. If the image is small and does not cover the entire page, you can repeat the image as multiple tiles in the background. No Repeat prevents the image from displaying as tiles. Repeat makes the image repeat horizontally and vertically. Horizontal Repeat makes the image repeat horizontally. Vertical Repeat makes the image repeat vertically.
    Scrolling/Fixed
    This button changes the background image scrolling state. If the page is long and scrolls, you can set the image to scroll along with the page content by setting the image state to Scrolling. In the Fixed state, the background image remains still while the content scrolls.
    Alignment
    These buttons align the image horizontally (left, center and right) and vertically (top, middle and bottom).
    Reset Background
    This button removes background image and color.
  3. Select the preview icon to review your page design.
    The splash page displays in the preview mode.
    Click to expand in new window
    Create Splash Template - Device Type and Orientation Settings
    Use the device orientation icons at the bottom of the screen to preview the splash page as seen on different devices and orientation. The following viewing options are available for:
    • Large screen devices like laptops (960 px wide)
    • Tablets and other wide screen devices (768 px wide)
    • Mobile devices with landscape orientation (568 px wide)
    • Mobile devices with portrait orientation (320 px wide)
  4. Exit the preview mode. Make changes to the page design if needed.
  5. Select Save to save and exit.
  6. Select Cancel to exit without saving.