Optionally Use Custom Captive Portal GUI Pages

<HEAD>
<TITLE>Optionally Use Custom Captive Portal GUI Pages</TITLE>

<LINK REL="STYLESHEET" HREF="MeruHelpStyles.css">
</HEAD>

<h1>Optionally Use Custom Captive Portal GUI Pages</h1>
<p>If you want to create custom login and success pages with your own logos and
credentials, complete the directions in this section. You do not need to do this
if you plan to use all of the default Captive Portal pages provided by Meru
Networks. If you do want to create custom HTML pages, you can create one or two
sets of Captive Portal custom login pages; these are referred to as Captive
Portal 1 and Captive Portal 2. Each set has 6 files, but you can only create
customized pages for the main login page and the authentication successful page.
The remaining four HTML pages are always the default pages. If you create both
CP1 and CP2 custom files, they must both use the same authentication, the same
Radius authentication or local authentication with up to 32 local users (the
users can be different for CP1 and CP2). All Custom Portal pages (HTML, CSS, JS,
and graphics) for the default pages provided, the Custom Portal 1 pages you
create, and the Custom Portal 2 pages you create are in the same folder. This
makes it imperative that you use unique names for all custom files. It also
means that you can share a file such as a CSS file used for both CP1 and CP2
custom pages. This is also how any pages that you do not customize default to
using the default HTML files.</p>
<h2>Create Custom Pages <span style="font-weight: 400"><font face="Verdana" size="3">
(requires Level 10 permission)</font></span></h2>
<p>The easiest way to create your own custom pages is to download the default CP
files and use the two customizable ones (Login page and Success page) as
templates, giving the two altered HTML pages new names. To do this, follow these
steps: </p>
<ol>
  <li>Get the template files. Click <b>Maintenance &gt; Captive Portal &gt;
    Customization &gt; Get Files</b>. A zip file called zip.tar.gz is downloaded
    to your computer. When the zip.tar.gz file is unzipped, you see the folder
    html.vpn that contains these six default files: Login page can be customized
    (default filename is loginformWebAuth.html) Successful login page can be
    customized (default filename is auth_web_ok.html) Your login failed - try
    again page (default filename is loginformWebAuthRetry.html) Web
    authentication succeeded; do you want to log off? (default filename is
    logoff User.html) You are now logged off page (default filename is
    loggedoff.html) Your logoff failed - try again page (default filename is
    logoffUserFailed.html) .<br>
  </li>
  <li>You can only create two custom files: a replacement for the Login page
    loginformWebAuth.html and a replacement for the Successful Login page
    auth_web_ok.html. Locate the two customizable HTML files on your computer
    and use them as templates to create your own custom HTML files. Use a
    program such as Notepad to make your changes and then save the files with
    unique names. CSS, JavaScript, and HTML are supported. You can upload
    graphics in the formats .html .gif, .jpg, .png, .bmp, .css, .js. up to a 20K
    size limit per graphic. <br>
    <br>
    To replace the first Meru logo graphic, look for the line that reads: src=&quot;Images.vpn/img_merulogo.gif&quot;
    width=133 border=0&gt; Change the text &quot;Images.vpn/img_merulogo.gif&quot;
    to &quot;Images.vpn.custom/your_image.gif&quot; (Note that you are
    specifying a new directory for the .gif file, which is Images.vpn.custom).
    To replace the second graphic (the mountain), look for the line that reads:
    src=&quot;Images.vpn/img_aboutmeru.jpg&quot; width=326 border=0&gt; Change
    the text &quot;Images.vpn/img_aboutmeru.jpg&quot; to &quot;Images.vpn.custom/your_image2.gif&quot;
    (Note that you are specifying a new directory for the .gif file, which is
    Images.vpn.custom). Possible edits include changing logos, text, and
    formatting. The only lines that cannot be altered are the login
    communication process between the controller and the RADIUS server in the
    file loginformWebAuth.html. <br>
  </li>
  <li>Import all new Captive Portal files (HTML, CSS, JS, and graphics) to the
    controller one by one. Click <b>Maintenance &gt; Captive Portal &gt; Import
    File &gt;</b> enter the location/file in the text box <b>&gt; Import File</b>.
    Be sure that the files have unique names; they will all be placed in the
    same directory. <br>
  </li>
  <li>If you want to make any changes in the four remaining files
    loginformWebAuthRetry.html, logoff User.html, loggedoff.html, or
    logoffUserFailed.html, alter the default files that you download in Step 1
    and import them as you did in Step 3. All three sets of Portal pages
    (default, CP1, and CP2) will then use the default files that you altered.
    because these four files have only one version.</li>
</ol>
<p>The custom HTML, CSS, JS, and graphic files are now on the controller.</p>
<h2>Implement New Custom Pages <span style="font-weight: 400"><font face="Verdana" size="3">
(requires Level 10 permission)</font></span></h2>
<p>Using the GUI Implement custom Captive Portal pages with Web UI of System
Director 3.7 and later by first directing Captive Portal to use custom HTML
files; those HTML files will then reference the CSS, JS and graphic files you
imported. Second, indicate which subset of users should see the new login and
success pages by providing a subnet and a mask; when a user logs in from this
subnet, they will see the corresponding custom pages. For example, students in a
library might see the Custom Captive Portal 1 login page while visitors to the
football stadium see the Custom Captive Portal 2 login page. </p>
<h3>Configure Custom Captive Portal Pages</h3>
<p>Direct Captive Portal to use custom HTML files by following these steps: </p>
<ol>
  <li>Direct Captive Portal to use custom HTML files. Click <b>Maintenance &gt;
    Customization &gt; </b>select a controller<b> &gt; Change Mode.</b></li>
  <li>Scroll down and select <b>Customized</b>.</li>
</ol>
<h3>Configure Subnets to Use Custom Captive Portal Pages</h3>
<p>Indicate which subset of users should see the custom pages by following these
steps: <br>
</p>
<ol>
  <li>Make sure that security logging is set to on by clicking <b>Configuration
    &gt; Security &gt; Profile</b> and then selecting a security profile from
    the list. The security logging setting is near the bottom of the Security
    Profile Table. This setting must be set to <b>on</b> for Captive Portal
    configuration to work.</li>
  <li>Provide the names of the new HTML Login Page and Success Page for CP1 by
    clicking <b>Maintenance &gt; Captive Portal &gt; Custom CP</b>. The Custom
    Captive Portal page is displayed.&nbsp; Since the files are on the
    controller now, you do not have to indicate a location, just the file names.
    <br>
  </li>
  <li>Click <b>Save Page Info</b>. <br>
  </li>
  <li>Provide at least one subnet location by clicking <b>Add</b>, providing a
    Subnet IP and a Network Mask, then clicking <b>OK</b>. Users logging in from
    this subnet will see these custom pages. <br>
  </li>
  <li>Create a corresponding Security Profile for this portal by clicking <b>Configuration
    &gt; Security &gt; Profile &gt; Add</b>. Be sure that the setting for
    Captive Portal is set to <b>webauth</b> in this profile, then save it. <br>
  </li>
  <li>Click <b>Configuration &gt; Security &gt; Captive Portal</b>. In this
    window, identify the Radius server, whether or not to adjust the session,
    and idle timeouts. Sesson timeout and idle timeout are indicated in minutes.
    <br>
  </li>
  <li>Click <b>OK</b>. </li>
</ol>
<p>The custom HTML files are now configured. You can configure multiple sets of
files.</p>
</BODY>
</HTML>