HTML5 IFrame widgets are a great way to add interactive elements to your Zmags publications. In this article, we will showcase a very simple example that demonstrates how they can be used to custom-tailor your publication content to each individual reader.
Note: To reset the example after "logging in", simply close and reopen it.
As you can see in the example above, the information entered into the mockup login form is used to create a personalized nameplate on the publication. The same techniques can be used for far more extensive customization; some examples include:
- Auto-fill forms and surveys with known account information.
- Swap out products in a catalog to present age and demographic-appropriate items.
- Present special offers and suggested items based on user's past purchase history.
While our example uses a basic mockup to load data into a browser cookie, an online store with a proper user login and account database could just as easily use stored account data in the same way.
Login Page Code
The page used on our login page is as follows:
<!DOCTYPE html>
<html>
<head>
<title>User Signup</title>
<script src="//ajax.googleapis.com/ajax/libs/jquery/1.4.3/jquery.min.js"></script>
<script type='text/javascript'>
function check_form(){
var elements = ['name','bday','color'];
var form_ok = true;
for(var i=0; i<elements.length; i++){
document.getElementsByName(elements[i])[0].style.cssText = 'width:194px;';
if(document.getElementsByName(elements[i])[0].value == ''){
document.getElementsByName(elements[i])[0].style.cssText = document.getElementsByName(elements[i])[0].style.cssText + 'border:solid red 1px; background:#FAE3E3;';
form_ok = false;
}
}
return form_ok;
}
$(document).ready(function(){
$("#login_form").submit(function(){
dataString = $(this).serialize();
document.cookie = "form_cookie="+dataString+"; path=/";
});
});
</script>
</head>
<body style="background:Gainsboro;">
<div style="position:absolute; width:400px; top:50px; left:50%; margin-left:-200px; background:white; border:solid #999999 1px; padding:5px; border-radius:5px; -moz-border-radius:5px;">
<form id="login_form" method="post" onSubmit="return check_form()" action="http://viewer.zmags.com/publication/fd92f7eb">
<div style="text-align:center; background:LightSteelBlue;">Welcome to <b>Example Company Dot Com</b>!<br>Please fill in the following information to sign up.</div><br>
<div style="position:relative; left:94px;">Name: <input type="text" name="name" style="width:194px;"></div>
<div style="position:relative; left:77px;">Birthday: <input type="text" name="bday" style="width:194px;"></div>
<div style="position:relative; left:39px;">Favorite Color: <input type="text" name="color" style="width:194px;"></div>
<div style="position:relative; left:46px;">Profile Image:
<input type="radio" name="prof" id="red" value="red" checked><label for="red"><img src="./images/cookie_test_2/portrait_red.png" style="position:relative; top:10px; height:40px; width:40px;"></label>
<input type="radio" name="prof" id="blu" value="blu"><label for="blu"><img src="./images/cookie_test_2/portrait_blu.png" style="position:relative; top:10px; height:40px; width:40px;"></label>
<input type="radio" name="prof" id="grn" value="grn"><label for="grn"><img src="./images/cookie_test_2/portrait_grn.png" style="position:relative; top:10px; height:40px; width:40px;"></label></div><br>
<button type="submit" name="Submit" style="position:relative; left:341px; background:LightSteelBlue; border:solid black 1px; padding:5px; border-radius:5px; -moz-border-radius:5px;">Submit</button>
</form>
</div>
</body>
</html>
Essentially, this just checks that all fields are filled in and saves it as a cookie. Afterwards, it forwards the reader to the publication URL.
HTML5 Widget Code
This is the code used to construct the personalized nameplate for the publication:
<!DOCTYPE html>
<html>
<head>
<script type="text/javascript">
function init(){
// Get cookie from browser data.
var cookie_data = split_data("form_cookie", document.cookie,";");
// Apply chosen color to background, if it's a valid CSS color name.
// CSS color names: http://www.w3schools.com/cssref/css_colornames.asp
var color = split_data("color", cookie_data, "&");
document.getElementById('color').style.background = color;
// Apply given username to text field.
var name = split_data("name", cookie_data, "&").replace(/\+/g," ");
document.getElementById('name').innerHTML = name;
// Apply given birthdate to text field.
var bday = split_data("bday", cookie_data, "&").replace(/\+/g," ").replace(/%2C/g,",").replace(/%2F/g,"/");
document.getElementById('bday').innerHTML = bday;
// Apply selected profile image.
var prof = split_data("prof", cookie_data, "&");
var prof_img = document.getElementById('prof');
if(prof == "red"){ prof_img.src = "./images/cookie_test_2/portrait_red.png"; }
else if(prof == "blu"){ prof_img.src = "./images/cookie_test_2/portrait_blu.png"; }
else if(prof == "grn"){ prof_img.src = "./images/cookie_test_2/portrait_grn.png"; }
}
function split_data(label, input, delim){
var nameEQ = label + "=";
var ca = input.split(delim);
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 -1;
}
</script>
</head>
<body onload="init();">
<div id="color" style="position:absolute; top:0px; left:0px; height:100%; width:100%; opacity:0.4; z-index:-1;"></div>
<img id="prof" src="" style="position:absolute; bottom:2%; height:95%; max-height:60px; width:auto;">
<div id="text" style="position:absolute; bottom:8px; left:76px;">
Name: <b><span id="name"></span></b><br>
DOB: <b><span id="bday"></span></b><br>
</div>
</body>
</html>