Web Developers
Let's face it, getting the general population to create good secure passwords is a real problem. Pa$$word1 will pass most of our checks.
It may be easy to remember, but it's not very secure.
Making the process easier on your users means more customers, especially if you are taking steps to making them more secure.
As you see below, add the FCPB logo next to your password and password update form boxes. The customer clicks the logo and gets a FCPB popup pre-filled with your websites URL.
Example:
Here is some simple example code you could put on your site to make it work:
HTML
The div element needs to be on the top layer of your site, typically you just put it directly after the <body> tag. This is where the popup action happens.
The image element goes next to your password, and password update fields for people to click on.
<!-- Put this after your <body> tag: -->
<div id="FCPBmodal"><div id="FCPBmodalContent"></div></div>
<!-- Drop this image tag next to your password boxes -->
<img id="FCPBimage" src="fcpb.png"/>
CSS
Put the following style block inside your <head> tags:
<style>
#FCPBmodal{display:none;position:fixed;z-index:1;left:0;top:0;width:100%;height:100%;background-color:rgb(0,0,0);background-color:rgba(0,0,0,0.4);padding-top: 10px;cursor:pointer;}
#FCPBmodalContent{position:relative;margin:auto;border:1px solid #000;width:300px;height:460px;
-webkit-box-shadow: 0px 0px 17px 0px rgba(0,0,0,0.75);-moz-box-shadow: 0px 0px 17px 0px rgba(0,0,0,0.75);box-shadow: 0px 0px 17px 0px rgba(0,0,0,0.75);
}
#FCPBiframe{width:300px;height:460px;border:none;margin:0;padding:0;}
#FCPBimage{width:25px;height:25px;cursor:pointer;vertical-align:text-bottom;}
#FCPBclose{position:absolute;top:0px;right:0px;background-color:#FA130B;width:25px;height:25px;border-radius:0px 0px 0px 10px;border:1px solid #000;text-align:center;}
</style>
Javascript
Put the following script block inside your <head> tags:
(optional) Set the FCPBurl to your site url
<script>
document.onreadystatechange = function(){
if(document.readyState === "complete"){
document.getElementById("FCPBimage").onclick = function() {
// (Optional) Ex: My.Site.Com or Site.Com
var FCPBurl = "";
// If you did not set FCPBurl
// it is automatically current url.
FCPBurl = (FCPBurl!="")?FCPBurl:window.location.hostname.toLowerCase();
document.getElementById("FCPBmodalContent").innerHTML = "<div id=\"FCPBclose\">✖</div><iframe id=\"FCPBiframe\" src=\"https://passbank.frostcandy.com/passbankorg.php?url="+FCPBurl+"\"></iframe>";
document.getElementById("FCPBmodal").style.display = "block";
}
window.onclick = function(event) {if(event.target.id == "FCPBmodal" || event.target.id == "FCPBclose") {document.getElementById("FCPBmodal").style.display = "none";}}
}
}
</script>
FCPB Image
Download and use this standardized logo so customers recognize and understand what it is for when they see it.
After you upload the image to your server you need to make sure the image in your HTML section has the correct path to the image on your webserver.