So you're working on a top secret web site or landing page that you don't want the outside world to view yet. Then follow these steps to place a "Private Mode" option on your web site. We recommend you place this within your page layout, but it can be placed on individual landing pages too.
Go to Engage --> Content --> Page Layouts
Identify the page layout you want to apply this to.
In the CSS section, place this code:
#authOnly {
width: 100%;
height: 100%;
top: 0px;
left: 0px;
position: fixed;
opacity: 0.95;
background-color: rgba(0,0,0,0.95);
z-index: 999999;
display: none;
}
.centerBlock {
width: 270px;
height: 150px;
position: absolute;
left: 50%;
top: 50%;
margin:-75px 0 0 -135px;
}4. In the Header Section, at the top, place this code:
<div id="authOnly">
<div class="centerBlock">
<h4>This Site is in Private Mode</h4>
<p>To continue, please enter your passcode.</p>
<form class="form-inline">
<input type="text" class="form-control" id="passcode" placeholder="Enter Passcode">
<button type="button" class="btn btn-primary" id="btnVerify">Verify</button>
</form>
</div>
</div>
5. In the Footer Section, at the bottom, place this code:
<script>
$(document).ready(function() {
if (getCookie("privateAuth") != "true") {
$("#authOnly").show();
} else {
$("#authOnly").hide();
}
});
$("#btnVerify").on("click", function() {
if ($("#passcode").val() == "passcode here") {
setCookie("privateAuth", "true");
$("#authOnly").hide();
}
});
function setCookie(cname, value) {
document.cookie = cname + "=" + value;
}
function getCookie(cname) {
var name = cname + "=";
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);
if (c.indexOf(name) === 0) return c.substring(name.length, c.length);
}
return "";
}
</script>
You can change the passcode where it says passcode here.
6. Click update layout.
You may find that there is a conflict with the css classes and/or javascript classes that are provided. Feel free to rename these, but make sure you update all references.
Keep in mind that this should not be used to protect sensitive information that you do not want the public to see. This is meant ONLY to block normal web browsers who may have found your page via search engines or other means. An advanced web programmer may have the ability to bypass this overlay.