Add a QR code login to your hotspot vouchers alongside the next template. Free for commercial use!
Open the "User Manager" interface inwards your browser.
Navigate to the "Settings" page
Select the "Templates" tab
Select "Vouchers"
Add the next code inwards the appropriate boxes:
Header
Make certain that yous update the path to the jquery libraries, yous tin job mine at :
jquery.min.js: https://drive.google.com/file/d/0B-Vs3naHEfHGMWZoaENuSWd6cFE
jquery.qrcode.min.js: https://drive.google.com/file/d/0B-Vs3naHEfHGQ2tBQWU5V1ZtSm8
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title>Vouchers</title>
<script src="http://path-to-your-host/jquery.min.js" type="text/javascript"></script>
<script src="http://path-to-your-host/jquery.qrcode.min.js" type="text/javascript"></script>
<style>
@page {
size: A4;
margin: 0;
}
@media impress {
html, trunk {
width: 210mm;
height: 297mm;
margin-left: auto;
margin-right: auto;
}
}
@media enshroud {
html, trunk {
width: 800px;
}
}
body
{
padding: 5mm;
margin:0;
margin-left: auto;
margin-right: auto;
font-size: 20px;
font-family: Arial, 'Arial Unicode MS', Helvetica, Sans-Serif;
line-height: 85%;
}
#main-wrap {
background-color: #fff;
max-height: 317px;
text-align: center;
border: solid;
border-width: 1px;
display: inline-block;
}
#main-wrap > div {
max-height: 307px;
}
#main-wrap {
overflow: hidden;
width: 45%;
padding-top: 20px;
padding-bottom: 20px;
}
#leftside {
display: inline-block;
width: 50%;
font-size: 22px;
line-height: 22px;
height: 220px;
}
#rightside {
display: inline-block;
width: 45%;
height: 220px;
font-size: 18px
}
img.logo {
width: 100%;
margin-left: auto;
margin-right: auto;
}
.qrcode {
height: 150px;
width: 150px;
}
</style>
</head>
<body>
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title>Vouchers</title>
<script src="http://path-to-your-host/jquery.min.js" type="text/javascript"></script>
<script src="http://path-to-your-host/jquery.qrcode.min.js" type="text/javascript"></script>
<style>
@page {
size: A4;
margin: 0;
}
@media impress {
html, trunk {
width: 210mm;
height: 297mm;
margin-left: auto;
margin-right: auto;
}
}
@media enshroud {
html, trunk {
width: 800px;
}
}
body
{
padding: 5mm;
margin:0;
margin-left: auto;
margin-right: auto;
font-size: 20px;
font-family: Arial, 'Arial Unicode MS', Helvetica, Sans-Serif;
line-height: 85%;
}
#main-wrap {
background-color: #fff;
max-height: 317px;
text-align: center;
border: solid;
border-width: 1px;
display: inline-block;
}
#main-wrap > div {
max-height: 307px;
}
#main-wrap {
overflow: hidden;
width: 45%;
padding-top: 20px;
padding-bottom: 20px;
}
#leftside {
display: inline-block;
width: 50%;
font-size: 22px;
line-height: 22px;
height: 220px;
}
#rightside {
display: inline-block;
width: 45%;
height: 220px;
font-size: 18px
}
img.logo {
width: 100%;
margin-left: auto;
margin-right: auto;
}
.qrcode {
height: 150px;
width: 150px;
}
</style>
</head>
<body>
Row
Make certain yous update the IP to reverberate your Hotspot IP, together with signal it to a valid logo image.
Logo dimensions inwards my event are 437px broad past times 71px high.
<div id="main-wrap">
<img class="logo" src="logo.png">
<div id="leftside"><br>
<strong>%u_actualProfileName%</strong><br><br>
<strong>Username:</strong> <br>%u_username%<br><br>
<strong>Password:</strong> <br>%u_password%<br><br>
</div>
<div id="rightside"><br>SCAN TO LOG IN<br>
<div class="qrcode" id="%u_username%"></div>
<script> jQuery(function(){jQuery('#%u_username%').qrcode(
{
"render": 'div',
"size": 150,
"minVersion": 5,
"maxVersion": 5,
"ecLevel": 'L',
"mode": 0,
"text": "http://hotspot-ip/login?username=%u_username%&password=%u_password%",
"quiet": 0,
}
); }) </script>
<span style= "font-size: 12px">Or browse to: <br>http://hotspot-dns-name<br></span>
</div>
<div class="bottom">
Ask your host for to a greater extent than information
</div>
</div>
<img class="logo" src="logo.png">
<div id="leftside"><br>
<strong>%u_actualProfileName%</strong><br><br>
<strong>Username:</strong> <br>%u_username%<br><br>
<strong>Password:</strong> <br>%u_password%<br><br>
</div>
<div id="rightside"><br>SCAN TO LOG IN<br>
<div class="qrcode" id="%u_username%"></div>
<script> jQuery(function(){jQuery('#%u_username%').qrcode(
{
"render": 'div',
"size": 150,
"minVersion": 5,
"maxVersion": 5,
"ecLevel": 'L',
"mode": 0,
"text": "http://hotspot-ip/login?username=%u_username%&password=%u_password%",
"quiet": 0,
}
); }) </script>
<span style= "font-size: 12px">Or browse to: <br>http://hotspot-dns-name<br></span>
</div>
<div class="bottom">
Ask your host for to a greater extent than information
</div>
</div>
Footer
</body>
</html>
</html>
Break
<p class="noprint" style="font-size: 10px"> ................ page pause ................ </p> <p class="pagebreak"> </p>
Let me know if yous convey whatsoever suggestions inwards the comments!
