Cisco Identity Services Engine User Guide, Release 1.2 - Sample Code for Sponsor and Guest Portal Customizations [Cisco Identity Services Engine]

Sample Code for Sponsor and Guest Portal Customizations

Sample Code for Custom Guest Notifications from Sponsor Portal

E-Mail Notification Template

SMS Text Message Notification Template

Print Notification Template

Sample HTML for Custom Pages for the Guest Portal

Fields Used on Custom HTML Pages

Detect Cookies at Login Sample HTML

Successful Guest Login Page Sample HTML

Error Page Sample HTML

Acceptable Use Policy (AUP) Page Sample HTML

Change Password Page Sample HTML

Self-Registration Page Sample HTML

Self-Registration Result Page Sample HTML

Device Registration Page Sample HTML

Sample style.css for Custom Guest Portal HTML Pages

Sample Code for Sponsor and Guest Portal Customizations

Cisco ISE enables you customize the guest notifications in the Sponsor portal and the look-and-feel of the Guest portal.

•Sample Code for Custom Guest Notifications from Sponsor Portal

•Sample HTML for Custom Pages for the Guest Portal

Sample Code for Custom Guest Notifications from Sponsor Portal

You can customize the templates used by sponsors to send guests their login credentials:

•E-Mail Notification Template

•SMS Text Message Notification Template

•Print Notification Template

E-Mail Notification Template

The following is an example of the login information for the body of an e-mail in an English language template:

Welcome to the Guest Portal, your username is $username$ and password is $password$

The $username$ and $password$ strings will be replaced with the username and password values from the Guest User account.

In the e-mail body, you can use special variables to provide the details for the created guest account. When using these variables, you must use all uppercase or all lowercase letters, and you cannot mix them. For example, the string for username can be either $USERNAME$ or $username%, but it cannot be $UserName$.

You can use these variables in the e-mail notification template:

•$USERNAME$ = The username created for the guest.

•$PASSWORD$ = The password created for the guest.

•$STARTTIME$ = The time from which the guest account will be valid.

•$ENDTIME$ = The time at which the guest account will expire.

•$FIRSTNAME$ = The first name of the guest.

•$LASTNAME$ = The last name of the guest.

•$EMAIL$ = The e-mail address of the guest.

•$TIMEZONE$ = The time zone of the user.

•$MOBILENUMBER$ = The mobile number of the guest.

•$OPTION1$ = Optional field for editing.

•$OPTION2$ = Optional field for editing.

•$OPTION3$ = Optional field for editing.

•$OPTION4$ = Optional field for editing.

•$OPTION5$ = Optional field for editing.

•$DURATION$ = Duration of time for which the account will be valid.

•$RESTRICTEDWINDOW$ = The time window during which the guest is not allowed to log in.

•$TIMEPROFILE$ = The name of the time profile assigned.

SMS Text Message Notification Template

In the text message, you can use special variables to provide the details for the created guest account. When using these variables, you must use all uppercase or all lowercase letters, and you cannot mix them. For example, the string for username can be either $USERNAME$ or $username%, but it cannot be $UserName$.

You can use these variables in the SMS text message notification template:

•$USERNAME$ = The username created for the guest.

•$PASSWORD$ = The password created for the guest.

•$STARTTIME$ = The time from which the guest account will be valid.

•$ENDTIME$ = The time at which the guest account will expire.

•$FIRSTNAME$ = The first name of the guest.

•$LASTNAME$ = The last name of the guest.

•$EMAIL$ = The e-mail address of the guest.

•$TIMEZONE$ = The time zone of the user.

•$MOBILENUMBER$ = The mobile number of the guest.

•$OPTION1$ = Optional field for editing.

•$OPTION2$ = Optional field for editing.

•$OPTION3$ = Optional field for editing.

•$OPTION4$ = Optional field for editing.

•$OPTION5$ = Optional field for editing.

•$DURATION$ = Duration of time for which the account will be valid.

•$RESTRICTEDWINDOW$ = The time window during which the guest is not allowed to log in.

•$TIMEPROFILE$ = The name of the time profile assigned.

To send the text message to the mobile phone number of the guest, use the variable $MOBILENUMBER$. The $MOBILENUMBER$ variable is replaced by the mobile phone number as entered by the sponsor.

Print Notification Template

In the printed copy, you can use special variables to provide the details for the created guest account. When using these variables, you must use all uppercase or all lowercase letters, and you cannot mix them. For example, the string for username can be either $USERNAME$ or $username%, but it cannot be $UserName$.

You can use these variables in the print notification template:

•$USERNAME$ = The username created for the guest.

•$PASSWORD$ = The password created for the guest.

•$STARTTIME$ = The time from which the guest account will be valid.

•$ENDTIME$ = The time at which the guest account will expire.

•$FIRSTNAME$ = The first name of the guest.

•$LASTNAME$ = The last name of the guest.

•$EMAIL$ = The e-mail address of the guest.

•$TIMEZONE$ = The time zone of the user.

•$MOBILENUMBER$ = The mobile number of the guest.

•$OPTION1$ = Optional field for editing.

•$OPTION2$ = Optional field for editing.

•$OPTION3$ = Optional field for editing.

•$OPTION4$ = Optional field for editing.

•$OPTION5$ = Optional field for editing.

•$DURATION$ = Duration of time for which the account will be valid.

•$RESTRICTEDWINDOW$ = The time window during which the guest is not allowed to log in.

•$TIMEPROFILE$ = The name of the time profile assigned.

Sample HTML for Custom Pages for the Guest Portal

You can use these examples to create HTML pages for the guest portal pages. When you create custom portals by uploading your own HTML pages, the details policy, language templates, and portal themes do not apply. So, if these features are important to you, you will need to write the HTML code to deliver similar functionality, or use the standard portal pages instead.

When you upload custom html files, these changes apply only to the guest portal. The other portals use the settings defined in the portal theme (see "Customizing the Web Portal Images and Color Scheme" section). To better synchronize the look-and-feel amongst the portals, upload your custom logos and banners to the portal theme too.

These HTML examples reference a directory structure for a portal named demo2:

•Fields Used on Custom HTML Pages

•Login Page Sample HTML

•Detect Cookies at Login Sample HTML

•Successful Guest Login Page Sample HTML

•Error Page Sample HTML

•Acceptable Use Policy (AUP) Page Sample HTML

•Change Password Page Sample HTML

•Self-Registration Page Sample HTML

•Self-Registration Result Page Sample HTML

•Device Registration Page Sample HTML

•Sample style.css for Custom Guest Portal HTML Pages

Fields Used on Custom HTML Pages

You must define some of these fields in the Cisco ISE Admin UI, including:

•Guest password policy: Choose Administration > Web Portal Management > Settings > Guest > Password Policy.

•Guest username policy: Choose Administration > Web Portal Management > Settings > Guest > Username Policy.

Table D-1 Custom HTML Pages Fields
Field	ID Name	Restrictions
Login Page
Username	guestUser.name	1000 alphanumeric, and special characters. Specified in Cisco ISE Admin.
Password	guestUser.password	1000 characters, alphanumeric. Specified in Cisco ISE Admin.
Self Registration Page
First name	guestUser.firstName	100 alphanumeric, and special characters
Last name	guestUser.lastName	100 alphanumeric, and special characters
Email address	guestUser.emailAddress	100 alphanumeric, and special characters
Phone number	guestUser.phoneNumber	1000 alphanumeric, and special characters
Company	guestUser.company	1000 alphanumeric, and special characters
Optional data 1-5	guestUser.optionaData 1 guestUser.optionaData 2 guestUser.optionaData 3 guestUser.optionaData 4 guestUser.optionaData 5	4000 alphanumeric, and special characters
TimeZone	guestUser.timezone	drop-down box
Change Password Page
Username	username	1000 alphanumeric, and special characters. Specified in Cisco ISE Admin.
Old password	currentpassword	1000 alphanumeric, and special characters. Specified in Cisco ISE Admin.
New password	newpassword	1000 alphanumeric, and special characters. Defined in Cisco ISE Admin.
Confirm password	confirmpassword	1000 alphanumeric, and special characters. Specified in Cisco ISE Admin.
AUP Page
Accept terms and conditions	guestUser.acceptUsePolicy	check box
Device Registration Page
Device ID	registeredMac	6-pair alphanumeric character set

Login Page Sample HTML

<head>

<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />

<title>Guest Portal Login</title>

<link href="portals/demo2/style.css" rel="stylesheet" type="text/css" />

<script language='javascript'>

</script>

</head>

<body class="pagebg">

<table width="100%" border="0" align="center" cellpadding="0" cellspacing="0">

  <tr>

    <td height="107">&nbsp;</td>

  </tr>

  <tr>

    <td height="172" align="center" valign="middle"><table width="90%" border="0" 
align="center" cellpadding="0" cellspacing="0">

        <tr>

          <td width="45%" height="172" align="left" valign="middle"><table width="75%" 
border="0" align="left" cellpadding="0" cellspacing="0">

              <tr>

                <td width="27%"><img src="portals/demo2/logo.png" alt="" width="218" 
height="63" /></td>

                <td width="73%"><table width="85%" border="0" align="right" 
cellpadding="0" cellspacing="0">

                  <tr>

                    <td height="35" align="left" class="headding">ISE 1.1</td>

                  </tr>

                  <tr>

                    <td align="left" class="label">Guest Access</td>

                  </tr>

                  <tr>

                    <td align="left">&nbsp;</td>

                  </tr>

                  <tr>

                    <td align="left" class="headding1">Version:1.1</td>

                  </tr>

                </table></td>

              </tr>

            </table></td>

          <td width="45%" align="right" valign="middle"><table width="50%" border="0" 
cellspacing="0" cellpadding="0">

		  <form id="cuesLoginForm" method="POST"    
action="/guestportal/LoginCheck.action">

              <tr>

                <td width="32%" height="30" align="left" valign="middle" 
class="label">Username :</td>

                <td width="68%" align="left"><input alt="Username:" name="guestUser.name" 
id="username" type="text" size="20" value=""/></td>

              </tr>

              <tr>

                <td height="30" align="left" valign="middle" class="label">Password :</td>

                <td align="left"><input alt="Password:" name="guestUser.password" 
id="password" type="password" size="20" value=""/></td>

              </tr>

              <tr>

                <td height="12" align="left" valign="middle"></td>

                <td height="12" align="left"></td>

              </tr>

              <tr>

                <td align="left" valign="middle">&nbsp;</td>

                <td align="left"><input type="submit" name="button" id="button" value="Log 
In" />

                </td>

              </tr>

			   <input type="hidden" name="drpPassword" id="drpPassword"  />

               <input type="hidden" name="drpUsername" id="drpUsername"  />

			  </form>

<!--			  <form id="doSelfService" action="/guestportal/SelfService.action">-->

<!--				<input type="hidden" id="buttonClicked" name="buttonClicked" 
value=""></input>-->

<!--				<input type="hidden" id="switch_url" name="switch_url" value=""></input>-->

<!--				<input type="hidden" id="redirect" name="redirect" value=""></input>-->

<!--				<input type="hidden" id="err_flag" name="err_flag" value=""></input>-->

<!--			   </form>-->

				<!-- form for self service  -->

				<struts2:form id="selfServiceForm" action="SelfService.action">

				<input type="hidden" id="buttonClicked" name="buttonClicked" 
value="${buttonClicked}"></input>

				<input type="hidden" id="switch_url" name="switch_url" 
value="${switch_url}"></input>

				<input type="hidden" id="redirect" name="redirect" 
value="${redirect}"></input>

				<input type="hidden" id="err_flag" name="err_flag" 
value="${err_flag}"></input>

				</struts2:form>

               <struts2:form id="changePasswordForm"  
action="ChangePassLoginMultiPortal.action">

                 <input type="hidden" id="username" name="guestUser.name" 
value="${username}"></input>

                 <input type="hidden" id="password" name="guestUser.password" 
value="${password}"></input>

               </struts2:form>

			   <tr>

                <td align="left" valign="middle">&nbsp;</td>

                <td align="left">&nbsp;&nbsp;&nbsp;

                </td>

              </tr>

			   <tr>

                <td align="left" valign="middle">&nbsp;</td>

                 <td align="left"><a href="javascript:doChangePassword();" class="link" 
>Change Password</a>&nbsp;&nbsp;

				 <a href="javascript:doSelf();"  class="link">SelfService</a>&nbsp;&nbsp;

				 <a href="javascript:submitMyForm();"  class="link">Device Registration</a>

				 </td>

              </tr>

            </table></td>

        </tr>

      </table></td>

  </tr>

</table>

<div id="footer">

  <div  style="padding:0 0 0 10px;">2009-2011, Sample App, Inc. All rights reserved.</div>

</div>

</body>

</html>

<script>

function doSelf()

	document.forms[0].action = "SelfService.action";

	document.getElementById("buttonClicked").value = 
document.getElementById("buttonClicked").value;

    document.getElementById("redirect").value = document.getElementById("redirect").value;

    document.getElementById("switch_url").value = 
document.getElementById("switch_url").value;

    document.forms[0].submit();

function doChangePassword()

    //var changePasswordForm = document.getElementById("changePasswordForm");

    //changePasswordForm.submit();

    document.forms[0].action = "ChangePassLoginMultiPortal.action";

    document.getElementById("username").value = document.getElementById("username").value;

    document.getElementById("password").value = document.getElementById("password").value;

    document.forms[0].submit();

function submitMyForm(){

    document.forms[0].action = "DevRegPortalLogin.action";

    document.getElementById("drpUsername").value = 
document.getElementById("username").value;

    document.getElementById("drpPassword").value = 
document.getElementById("password").value;

    document.forms[0].submit();

</script>

Detect Cookies at Login Sample HTML

If users have cookies disabled in their web browser, Cisco ISE redirects them to the default guest portal when logging in, which bypasses your customized portal. You can prevent this redirect by adding code to detect whether cookies are disabled. If they are disabled, an error message displays instructing users to enable cookies and and the login button is disabled.

<script>

    var UI_METHODS = UI_METHODS || {};

    UI_METHODS.manageCookies = {

        createCookie : function ( name, value, days ) {

	    var expires = "";

	    if (days) {

	        var date = new Date();

	        date.setTime( date.getTime() + (days * 24 * 60 * 60 * 1000) );

	        expires = "; expires=" + date.toGMTString();

            document.cookie = name + "=" + value + expires + "; path=/";

	    return true;

},

        readCookie : function ( name ) {

	    var nameEQ = name + "=";

	    var ca = document.cookie.split(';');

	    for (var i=0;i < ca.length;i++) {

		var c = ca[i];

		while (c.charAt(0)==' ') c = c.substring(1, c.length);

		if (c.indexOf(nameEQ) == 0) return c.substring(nameEQ.length, c.length);

	    return null;

},

	eraseCookie : function ( name ) {

	    UI_METHODS.manageCookies.createCookie(name, '', -1);

	    return true;

};

    var are_cookies_enabled = function ( ) {

        // Cannot rely on this: Some browsers (like IE) will return "true" here even if 
all cookies are blocked!

        // var cookieEnabled = (navigator.cookieEnabled) ? true : false;

        var areCookiesEnabled = false,

        cookieName = "testcookie";

        UI_METHODS.manageCookies.createCookie( cookieName, 1, 365 );

        areCookiesEnabled = ( UI_METHODS.manageCookies.readCookie( cookieName ) != null ) 
?

	                      UI_METHODS.manageCookies.eraseCookie( cookieName ) :

	                     areCookiesEnabled;

        return ( areCookiesEnabled );

};

</script>

<script type="text/javascript">

        document.getElementById('loginsubmit').disabled=false;

 if ( !are_cookies_enabled() ) {

        document.getElementById('cookieMsg')['style']['display'] = 'block';

        document.getElementById('loginsubmit').disabled=true;

</script>

Successful Guest Login Page Sample HTML

<head>

<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />

<title>Guest Portal Login</title>

<link href="portals/CustomPortal/style.css" rel="stylesheet" type="text/css" />

</head>

<body bgcolor="#ccebfe">

<table width="100%" border="0" align="center" cellpadding="0" cellspacing="0">

  <tr>

    <td height="75" bgcolor="#022d4d"><table width="98%" border="0" align="center" 
cellpadding="0" cellspacing="0">

      <tr>

        <td width="15%" align="left" valign="middle"><img 
src="portals/CustomPortal/logo.png" alt="" width="90" height="90" /></td>

        <td width="72%" class="headding">ISE 1.0 Guest Portal	</td>

        <td width="13%" align="right" valign="middle" > </td>

      </tr>

    </table></td>

  </tr>

  <tr>

    <td valign="top" bgcolor="#ccebfe"><table width="98%" border="0" align="center" 
cellpadding="0" cellspacing="0" class="content">

      <tr>

        <td>&nbsp;</td>

      </tr>

      <tr>

	<!--INSERT HEADER HERE --><td align="left" class="headding2"> CoA Successful 
</td><!--END HEADER HERE -->

      </tr>

      <tr>

        <td align="left">&nbsp;</td>

      </tr>

      <tr>

        <td align="left"><table width="50%" border="0" align="left" cellpadding="0" 
cellspacing="0" class="content">

		<tr>

                <td height="12" align="left" valign="middle"></td>

                <td height="12" align="left"></td>

              </tr>

              <form id="loginform" action="/guestportal/Login.action" method="post">

	      <tr>

                <td align="left" valign="middle">&nbsp;</td>

                <td align="left"><input type="submit" name="button2" id="button2" 
onclick="javascript:doOk()" value="OK" />                </td>

              </tr>

	      </form>

          </table></td>

      </tr>

      <tr>

        <td align="left">&nbsp;</td>

      </tr>

      <tr>

        <td align="left">&nbsp;</td>

      </tr>

    </table></td>

  </tr>

</table>

<div id="footer">

  <div  style="padding:0 0 0 10px;">2008-2009, Sample App, Inc. All rights reserved.</div>

</div>

</body>

</html>

<script>

function doOk()

    document.forms[0].action = "Login.action";

    document.forms[0].submit();

</script>

Error Page Sample HTML

<head>

<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />

<title>Guest Portal Error Detected</title>

<link href="portals/demo2/style.css" rel="stylesheet" type="text/css" />

<script language='javascript'>

</script>

</head>

<body class="pagebg">

<table width="100%" border="0" align="center" cellpadding="0" cellspacing="0">

  <tr>

    <td height="107">&nbsp;</td>

  </tr>

  <tr>

    <td height="172" align="center" valign="middle"><table width="90%" border="0" 
align="center" cellpadding="0" cellspacing="0">

        <tr>

          <td width="45%" height="172" align="left" valign="middle"><table width="75%" 
border="0" align="left" cellpadding="0" cellspacing="0">

              <tr>

                <td width="27%"><img src="portals/demo2/logo.png" alt="" width="218" 
height="63" /></td>

                <td width="73%"><table width="85%" border="0" align="right" 
cellpadding="0" cellspacing="0">

                  <tr>

                    <td height="35" align="left" class="heading">Error Detected in Guest 
Portal</td>

                  </tr>

                  <tr>

		    <!--INSERT ERROR HERE -->

                    <td height="35" align="left" class="heading">Second</td>

		    <!--END ERROR HERE -->

                  </tr>

                </table></td>

              </tr>

            </table></td>

          <td width="45%" align="right" valign="middle"><table width="50%" border="0" 
cellspacing="0" cellpadding="0">

			   <tr>

                <td align="left" valign="middle">&nbsp;</td>

                <td align="left">&nbsp;&nbsp;&nbsp;

                </td>

              </tr>

            </table></td>

        </tr>

      </table></td>

  </tr>

</table>

<div id="footer">

  <div  style="padding:0 0 0 10px;">2009-2011, Sample App, Inc. All rights reserved.</div>

</div>

</body>

</html>

<script>

function doSelf()

    document.forms[0].action = "Login.action";

    document.forms[0].submit();

</script>

Acceptable Use Policy (AUP) Page Sample HTML

<head>

<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />

<title>Guest Portal Login</title>

<link href="portals/demo2/style.css" rel="stylesheet" type="text/css" />

</head>

<body bgcolor="#ccebfe">

<table width="100%" border="0" align="center" cellpadding="0" cellspacing="0">

  <tr>

    <td height="75" bgcolor="#022d4d"><table width="98%" border="0" align="center" 
cellpadding="0" cellspacing="0">

      <tr>

        <td width="15%" align="left" valign="middle"><img src="portals/demo2/logo.png" 
alt="" width="157" height="44" /></td>

        <td width="72%" class="headding">ISE 1.1 Guest Portal	</td>

        <td width="13%" align="right" valign="middle" > </td>

      </tr>

    </table></td>

  </tr>

  <tr>

    <td bgcolor="#ccebfe"><table width="98%" border="0" align="center" cellpadding="0" 
cellspacing="0" class="content">

      <tr>

        <td>&nbsp;</td>

      </tr>

      <tr>

        <td align="left" class="headding2">Acceptable Use Policy</td>

      </tr>

      <tr>

        <td align="left" >Please accept the policy:<br /><br />

1. You are responsible for </br>(1) maintaining the confidentiality of the password and 
</br>(2) all activities that occur under your username and password.

</br></br>

2. Cisco systems offers the Service for activities such as the active use of e-mail, 
instant messaging, browsing the World Wide Web and accessing corporate intranets. High 
volume data transfers, especially sustained high volume data transfers, are not permitted. 
Hosting a web server or any other server by use of our Service is prohibited. Trying to 
access someone elseâ€™s account, sending unsolicited bulk e-mail, collection of other 
peopleâ€™s personal data without their knowledge and interference with other network users 
are all prohibited.

</br></br>

3. Cisco systems reserves the right to suspend the Service if (1) Cisco systems reasonably 
believes that your use of the Service is unreasonably excessive or (2) you are using the 
Service for criminal or illegal activities.

</br></br>

4. You do not have the right to resell this Service to a third party.

</br></br>

5. Cisco systems reserves the right to revise, amend or modify these Terms & Conditions, 
our other policies and agreements, and aspects of the Service itself. Notice of any 
revision, amendment, or modification will be posted on Cisco systemâ€™s website and will 
be effective as to existing users 30 days after posting same.

</br></br></td>

      </tr>

	  <form action="/guestportal/AcceptPolicy.action" method="post">

      <tr>

        <td align="left"><input  type="checkbox" name="guestUser.acceptUsePolicy" 
id="guestUser.acceptUsePolicy" value="false" onclick="javascript:enableButtons()" />Accept 
terms and conditions</td>

      </tr>

      <tr>

        <td align="left">&nbsp;</td>

      </tr>

      <tr>

        <td align="left"><input  type="Submit" id="acceptButton"  value="Accept" />

				<input  type="button"  id="declineButton" value="Decline" 
onclick="javascript:doDeclineTerms()"/></td>

      </tr>

      <tr>

        <td align="left">&nbsp;</td>

      </tr>

	  </form>

    </table></td>

  </tr>

</table>

<form id="declineTerms" onsubmit="return true;" action="/guestportal/DeclinePolicy.action" 
method="post"><table class="wwFormTable">

<input type="hidden" id="buttonClicked" name="buttonClicked" value=""></input>

<input type="hidden" id="switch_url" name="switch_url" value=""></input>

<input type="hidden" id="redirect" name="redirect" value=""></input>

<input type="hidden" id="err_flag" name="err_flag" value=""></input>

</table></form>

<div id="footer">

  <div  style="padding:0 0 0 10px;">2009-2011, Sample App, Inc. All rights reserved.</div>

</div>

</body>

</html>

<script>

enableButtons();

function enableButtons(){

  accepttermsCheckbox = document.getElementById('guestUser.acceptUsePolicy').checked;

  if (!accepttermsCheckbox) {

	document.getElementById('acceptButton').disabled = true;

	document.getElementById('guestUser.acceptUsePolicy').value = false;

  else {

	document.getElementById('acceptButton').disabled = false;

	document.getElementById('guestUser.acceptUsePolicy').value = true;

</script>

<script>

function doDeclineTerms()

    var declineTermsForm = document.getElementById("declineTerms");

    declineTermsForm.submit();

</script>

Change Password Page Sample HTML

<head>

<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />

<title>Guest Portal Login</title>

<link href="portals/demo2/style.css" rel="stylesheet" type="text/css" />

</head>

<body class="pagebg">

<table width="100%" border="0" align="center" cellpadding="0" cellspacing="0">

  <tr>

    <td height="107">&nbsp;</td>

  </tr>

  <tr>

    <td height="172" align="center" valign="middle"><table width="90%" border="0" 
align="center" cellpadding="0" cellspacing="0">

        <tr>

          <td width="45%" height="172" align="left" valign="middle"><table width="75%" 
border="0" align="left" cellpadding="0" cellspacing="0">

              <tr>

                <td width="27%"><img src="portals/demo2/logo.png" alt="" width="218" 
height="63" /></td>

                <td width="73%"><table width="85%" border="0" align="right" 
cellpadding="0" cellspacing="0">

                  <tr>

                    <td height="35" align="left" class="headding">ISE 1.1</td>

                  </tr>

                  <tr>

                    <td align="left" class="label">Guest Access</td>

                  </tr>

                  <tr>

                    <td align="left">&nbsp;</td>

                  </tr>

                  <tr>

                    <td align="left" class="headding1">Version:1.1</td>

                  </tr>

                </table></td>

              </tr>

            </table></td>

          <td width="45%" align="right" valign="middle"><table width="65%" border="0" 
cellspacing="0" cellpadding="0">

              <form action="/guestportal/ChangePassword.action" method="post">

              <tr>

                <td height="30" align="left" valign="middle" class="label">Enter current 
password :</td>

                <td align="left"><input alt="Password:" name="currentpassword" 
id="currentpassword" type="password" size="20" value=""/></td>

              </tr>

               <tr>

                <td height="30" align="left" valign="middle" class="label">Enter new 
password :</td>

                <td align="left"><input alt="Password:" name="newpassword" 
id="newpassword" type="password" size="20" value=""/></td>

              </tr>

               <tr>

                <td height="30" align="left" valign="middle" class="label">Re-enter new 
password :</td>

                <td align="left"><input alt="Password:" name="confirmpassword" 
id="confirmpassword" type="password" size="20" value=""/></td>

              </tr>

              <tr>

                <td height="12" align="left" valign="middle"></td>

                <td height="12" align="left"></td>

              </tr>

              <tr>

                <td align="left" valign="middle">&nbsp;</td>

                <td align="left"><input type="submit" name="button" id="button" value="Log 
In" />

                </td>

              </tr>

			  </form>

            </table></td>

        </tr>

      </table></td>

  </tr>

</table>

<div id="footer">

  <div  style="padding:0 0 0 10px;">2009-2011, Sample App, Inc. All rights reserved.</div>

</div>

</body>

</html>

Self-Registration Page Sample HTML

<head>

<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />

<title>Guest Portal Login</title>

<link href="portals/demo2/style.css" rel="stylesheet" type="text/css" />

</head>

<body bgcolor="#ccebfe">

<table width="100%" border="0" align="center" cellpadding="0" cellspacing="0">

  <tr>

    <td height="75" bgcolor="#022d4d"><table width="98%" border="0" align="center" 
cellpadding="0" cellspacing="0">

      <tr>

        <td width="15%" align="left" valign="middle"><img src="portals/demo2/logo.png" 
alt="" width="157" height="44" /></td>

        <td width="72%" class="headding">ISE 1.1 Guest Portal	</td>

        <td width="13%" align="right" valign="middle" > </td>

      </tr>

    </table></td>

  </tr>

  <tr>

    <td valign="top" bgcolor="#ccebfe"><table width="98%" border="0" align="center" 
cellpadding="0" cellspacing="0" class="content">

      <tr>

        <td>&nbsp;</td>

      </tr>

      <tr>

        <td align="left" class="headding2">Self Registration</td>

      </tr>

      <tr>

        <td align="left">&nbsp;</td>

      </tr>

      <tr>

        <td align="left"><table width="50%" border="0" align="left" cellpadding="0" 
cellspacing="0" class="content">

		<form id="selfServiceForm" action="/guestportal/SelfServiceSubmit.action" 
method="post">

              <tr>

                <td width="30%" height="30" align="left" valign="middle" 
class="content">First Name :</td>

                <td width="70%" align="left"><input alt="Username:" 
name="guestUser.firstName" id="firstName" type="text" size="20" /></td>

              </tr>

               <tr>

                <td width="30%" height="30" align="left" valign="middle" 
class="content">Last Name :</td>

                <td width="70%" align="left"><input alt="Username:" 
name="guestUser.lastName" id="lastName" type="text" size="20" /></td>

              </tr>

               <tr>

                <td width="30%" height="30" align="left" valign="middle" 
class="content">Email Address :</td>

                <td width="70%" align="left"><input alt="Username:" 
name="guestUser.emailAddress" id="emailId" type="text" size="20" /></td>

              </tr>

               <tr>

                <td width="30%" height="30" align="left" valign="middle" 
class="content">Phone Number :</td>

                <td width="70%" align="left"><input alt="Username:" 
name="guestUser.phoneNumber" id="phoneno" type="text" size="20" /></td>

              </tr>

               <tr>

                <td width="30%" height="30" align="left" valign="middle" 
class="content">Company :</td>

                <td width="70%" align="left"><input alt="Username:" 
name="guestUser.company" id="company" type="text" size="20" /></td>

              </tr>

               <tr>

                <td width="30%" height="30" align="left" valign="middle" 
class="content">Optional Data 1 :</td>

                <td width="70%" align="left"><input alt="Username:" 
name="guestUser.optionalData1" id="data1" type="text" size="20" /></td>

              </tr>

               <tr>

                <td width="30%" height="30" align="left" valign="middle" 
class="content">Optional Data 2 :</td>

                <td width="70%" align="left"><input alt="Username:" 
name="guestUser.optionalData2" id="data2" type="text" size="20" /></td>

              </tr>

               <tr>

                <td width="30%" height="30" align="left" valign="middle" 
class="content">Optional Data 3 :</td>

                <td width="70%" align="left"><input alt="Username:" 
name="guestUser.optionalData3" id="data3" type="text" size="20" /></td>

              </tr>

               <tr>

                <td width="30%" height="30" align="left" valign="middle" 
class="content">Optional Data 4 :</td>

                <td width="70%" align="left"><input alt="Username:" 
name="guestUser.optionalData4" id="data4" type="text" size="20" /></td>

              </tr>

               <tr>

                <td width="30%" height="30" align="left" valign="middle" 
class="content">Optional Data 5 :</td>

                <td width="70%" align="left"><input alt="Username:" 
name="guestUser.optionalData5" id="data5" type="text" size="20" /></td>

              </tr>

		<tr>

		<td width="30%" height="30" align="left" valign="middle" class="content">TimeZone 
:</td>

		<td width="70%" align="left"><select name="guestUser.timezone">

		<option value="UTC">UTC</option>

		<option value="America\New_York">America\New_York</option>

		<option value="Europe\London">Europe\London</option>

		</select></td>

		</tr>

              <tr>

                <td height="12" align="left" valign="middle"></td>

                <td height="12" align="left"></td>

              </tr>

              <tr>

                <td align="left" valign="middle">&nbsp;</td>

                <td align="left"><input type="submit" name="button" id="button" 
onclick="javascript:doOnSubmit()" value="Submit" />

                <input type="submit" name="button2" id="button2" 
onclick="javascript:doCancel()" value="Cancel" />                </td>

              </tr>

			  </form>

          </table></td>

      </tr>

      <tr>

        <td align="left">&nbsp;</td>

      </tr>

      <tr>

        <td align="left">&nbsp;</td>

      </tr>

    </table></td>

  </tr>

</table>

<div id="footer">

  <div  style="padding:0 0 0 10px;">2009-2011, Sample App, Inc. All rights reserved.</div>

</div>

</body>

</html>

<script>

function doOnSubmit()

	var selfServiceForm = document.getElementById("selfServiceForm");

    selfServiceForm.submit();

function doCancel()

	document.forms[0].action = "Login.action";

    document.forms[0].submit();

</script>

Self-Registration Result Page Sample HTML

<head>

<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />

<title>Guest Portal Login</title>

<link href="portals/demo2/style.css" rel="stylesheet" type="text/css" />

</head>

<body bgcolor="#ccebfe">

<table width="100%" border="0" align="center" cellpadding="0" cellspacing="0">

  <tr>

    <td height="75" bgcolor="#022d4d"><table width="98%" border="0" align="center" 
cellpadding="0" cellspacing="0">

      <tr>

        <td width="15%" align="left" valign="middle"><img src="portals/demo2/logo.png" 
alt="" width="157" height="44" /></td>

        <td width="72%" class="headding">ISE 1.1 Guest Portal	</td>

        <td width="13%" align="right" valign="middle" > </td>

      </tr>

    </table></td>

  </tr>

  <tr>

    <td valign="top" bgcolor="#ccebfe"><table width="98%" border="0" align="center" 
cellpadding="0" cellspacing="0" class="content">

      <tr>

        <td>&nbsp;</td>

      </tr>

      <tr>

	<!--INSERT HEADER HERE --><td align="left" class="headding2"> Self Registration 
created user: fsdf</td><!--END HEADER HERE -->

      </tr>

      <tr>

        <td align="left">&nbsp;</td>

      </tr>

      <tr>

        <td align="left"><table width="50%" border="0" align="left" cellpadding="0" 
cellspacing="0" class="content">

	      <!--INSERT RESULTS HERE --><tr><td width="30%" align="left" class="content"> 
User name: fsdf</td></tr><tr><td width="30%" align="left" class="content"> Password: 
9F_</td></tr><tr><td width="30%" align="left" class="content"> First Name: 
fdsf</td></tr><tr><td width="30%" align="left" class="content"> Last Name: 
sdf</td></tr><tr><td width="30%" align="left" class="content"> Email Address: 
</td></tr><tr><td width="30%" align="left" class="content"> Phone Number: 
</td></tr><tr><td width="30%" align="left" class="content"> Company: </td></tr><tr><td 
width="30%" align="left" class="content"> Optional Data 1: </td></tr><tr><td width="30%" 
align="left" class="content"> Optional Data 2: </td></tr><tr><td width="30%" align="left" 
class="content"> Optional Data 3: </td></tr><tr><td width="30%" align="left" 
class="content"> Optional Data 4: </td></tr><tr><td width="30%" align="left" 
class="content"> Optional Data 5: </td></tr><!--END RESULTS HERE -->

              <tr>

                <td height="12" align="left" valign="middle"></td>

                <td height="12" align="left"></td>

              </tr>

              <form id="loginform" action="/guestportal/Login.action" method="post">

	      <tr>

                <td align="left" valign="middle">&nbsp;</td>

                <td align="left"><input type="submit" name="button2" id="button2" 
onclick="javascript:doOk()" value="OK" />                </td>

              </tr>

	      </form>

          </table></td>

      </tr>

      <tr>

        <td align="left">&nbsp;</td>

      </tr>

      <tr>

        <td align="left">&nbsp;</td>

      </tr>

    </table></td>

  </tr>

</table>

<div id="footer">

  <div  style="padding:0 0 0 10px;">2009-2011, Sample App, Inc. All rights reserved.</div>

</div>

</body>

</html>

<script>

function doOk()

    document.forms[0].action = "Login.action";

    document.forms[0].submit();

</script>

Device Registration Page Sample HTML

<head>

<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />

<title>Guest Portal Login</title>

<link href="portals/demo2/style.css" rel="stylesheet" type="text/css" />

<script language='javascript'>

</script>

</head>

<body bgcolor="#ccebfe">

<form id="deviceRegistrationPortal"  action="/guestportal/RegisterDevice.action" 
method="post">

    <input type="hidden" name="drpUsername" id="drpUsername" value="" />

    <input type="hidden" name="devRegLimit" id="devRegLimit" value="" />

    <input type="hidden" name="regDevices" id="regDevices" value="" />

<table width="100%" border="0" align="center" cellpadding="0" cellspacing="0">

  <tr>

    <td height="75" bgcolor="#022d4d"><table width="98%" border="0" align="center" 
cellpadding="0" cellspacing="0">

      <tr>

        <td width="15%" align="left" valign="middle"><img src="portals/demo2/logo.png" 
alt="" width="157" height="44" /></td>

        <td width="72%" class="headding">ISE 1.1 Device Registration Portal</td>

        <td width="13%" align="right" valign="middle" > </td>

      </tr>

    </table></td>

  </tr>

  <tr>

    <td align="left" valign="top" bgcolor="#ccebfe"><table width="98%" border="0" 
align="center" cellpadding="0" cellspacing="0" class="content">

      <tr>

        <td>&nbsp;</td>

      </tr>

      <tr>

        <td align="left"><table width="100%" border="0" cellpadding="0" cellspacing="0" 
bgcolor="#abcee4" style="padding:10px; border:#6b93ac solid 1px;">

          <tr>

            <td style="padding:10px 0 0 10px;">Please register your device :<br />

Please note that you can not register more than 5 devices</td>

          </tr>

          <tr>

            <td height="15"></td>

          </tr>

          <tr>

            <td style="padding:0 0 0 10px;"><table width="100%" border="0" cellspacing="0" 
cellpadding="0">

  <tr>

    <td width="7%">MAC Address : </td>

    <td width="93%"><input id="registeredMac"  name="registeredMac" type="text" /></td>

  </tr>

</table></td>

          </tr>

           <tr>

            <td height="15"></td>

          </tr>

          <tr>

            <td style="padding:0 0 0 10px;"><input  type="Submit"    value="Register" 
/></td>

          </tr>

          <tr>

            <td height="15"></td>

          </tr>

        </table></td>

      </tr>

      <tr>

        <td align="left">&nbsp;</td>

      </tr>

      <tr>

        <td align="left">

	</td>

      </tr>

      <tr>

        <td align="left">&nbsp;</td>

      </tr>

    </table></td>

  </tr>

</table>

<div id="footer">

  <div  style="padding:0 0 0 10px;">2009-2011, Sample App, Inc. All rights reserved.</div>

</div>

</form>

</body>

</html>

Sample style.css for Custom Guest Portal HTML Pages

@charset "utf-8";

/* CSS Document */

body {

	margin-left: 0px;

	margin-top: 0px;

	margin-right: 0px;

	margin-bottom: 0px;

.pagebg {

	background:url("../demo2/pageBg.jpg") repeat-x;

.label {

	font-family:Arial, Helvetica, sans-serif;

	color:#FFFFFF;

	font-size:12px;

#footer {

	height:23px;

	font-family:Arial, Helvetica, sans-serif;

	color:#022d4d;

	position:absolute;

	width:100%;

	margin:0px auto;

	text-align:left;

	bottom:-0px;

	font-size:12px;

.headding {

font-family:Arial, Helvetica, sans-serif;

color:#ffffff;

font-size:20px;

.headding1 {

font-family:Arial, Helvetica, sans-serif;

font-size:12px;

font-weight:bold;

color:#ffffff;

.headding2 {

font-family:Arial, Helvetica, sans-serif;

color:#022d4d;

font-size:17px;

font-weight:bold;

.headding3 {

font-family:Arial, Helvetica, sans-serif;

color:#022d4d;

font-size:12px;

font-weight:bold;

.content {

font-family:Arial, Helvetica, sans-serif;

font-size:11px;

color:#022d4d;

.link {font-family:Arial, Helvetica, sans-serif; font-size:11px; color:#ffffff; 
text-decoration:none;}

a.link:link {font-family:Arial, Helvetica, sans-serif; font-size:11px; color:#ffffff; 
text-decoration:none;}

a.link:hover {font-family:Arial, Helvetica, sans-serif; font-size:11px; color:#ffffff; 
text-decoration:underline; }

Table Of Contents

Sample Code for Sponsor and Guest Portal Customizations

Sample Code for Custom Guest Notifications from Sponsor Portal

E-Mail Notification Template

SMS Text Message Notification Template

Print Notification Template

Sample HTML for Custom Pages for the Guest Portal

Fields Used on Custom HTML Pages

Login Page Sample HTML

Detect Cookies at Login Sample HTML

Successful Guest Login Page Sample HTML

Error Page Sample HTML

Acceptable Use Policy (AUP) Page Sample HTML

Change Password Page Sample HTML

Self-Registration Page Sample HTML

Self-Registration Result Page Sample HTML

Device Registration Page Sample HTML

Sample style.css for Custom Guest Portal HTML Pages