Introduction
Have you ever been asked to implement a “speedbump” on a client website and been like WHAAA??? LOL! The first time I heard this phrase, I had no clue what the heck is our client was talking about and worse yet, I was too ashamed to just come out and ask them at first! :) After doing some searching around, thanks to our friend Google, I got some ideas as to what they might have been asking, so I mustered up the courage to just fall on my sword and let them know we were clueless to the full meaning of their "speedbump" request. Perhaps you have found yourself in the same boat and landed on this blog post.
Definition
Most of us are familiar with speedbumps on the streets, but what exactly is a “speedbump” in the context of a website? In simple terms, a “speedbump” refers to a forced user confirmation upon clicking a hyperlink that goes to an external website. If the user clicks "OK" (or equivalent), they are forwarded to the external website. If they click "CANCEL", they will remain on the same page and not be forwarded.
Use Case
For example, a "speedbump" on a bank's website would include specific legalese and would ask for user acknowledgement prior to allowing the user to leave their website via the clicked hyperlink. This helps to make it clear to the user that they are about to leave the website and any information on the external website is not provided by the bank. Other use cases may include promotional messaging on e-commerce sites, like:
"Hey, did you forget something? You still have some items in your shopping cart. Checkout now to receive a courtesy 5% off your purchase!"
"Speedbumps" are often implemented on external hyperlinks as well as email links. The latter usually requires slightly different handling. We'll get into that below when we cover the custom scripting.
Implementation
Now that we know what a “speedbump” is, let’s talk through implementation details for a DNN (DotNetNuke) website. There are many ways to implement this type of feature, but I’ll cover one of the more flexible approaches. This will involve two areas:
- HTML
- Script
- Custom CSS Class
HTML
We need to place a small amount of HTML, that will be accessible on every page of the site, for the modal window that will be displayed when a user clicks a hyperlink to an external website or email. This can be placed in the theme/skin directly or you can use an open-source module like Content Injection Module by Will Strohl.
<!-- External Link Disclaimer -->
<div class="popup extLink">
<p>You are about to leave the official website for <INSERT COMPANY NAME>. Click Continue to proceed or click the "x" above to close this and remain on our website.</p>
<p class="text-center"><a href="#" class="ok button-primary" target="_blank">Continue</a></p>
</div>
<!-- Email Disclaimer -->
<div class="popup emailLink">
<p>Notice: Because there is a risk that information transmitted via Internet email could fall into the wrong hands, <INSERT COMPANY NAME> suggests that confidential information, such as account numbers or social security numbers, not be transmitted via email. Instead, please contact <INSERT COMPANY NAME> directly.</p>
<p class="text-center"><a href="#" class="ok button-primary">I Understand</a></p>
</div>
Script
Now we need to implement a short jQuery script that will be accessible on every page of the site. This script will look for any page instance of the custom CSS class speedbump on an anchor tag and act accordingly. This script will control the display of the HTML in the previous section. Again, this can be placed in the theme/skin directly or you can use an open-source module like Content Injection Module by Will Strohl.
/* START Speedbump Modal Handler */
// Make Email Address Links Show Disclaimer First
jQuery(document).ready(function ($) {
$(".popup").dialog({
autoOpen: false,
show: {duration: 250, effect: "fade"},
hide: {duration: 125, effect: "fade"},
modal: true,
resizable: false,
draggable: false,
width: "96%",
position: {
my: "center",
at: "center",
of: window,
within: window
},
closeOnEscape: true
});
$(".ui-dialog-titlebar-close").addClass(" fa fa-times");
function showDisclaimer(href, linkType){
$(".popup." + linkType).dialog("open");
$("a.ok").attr("href", href);
$("a.ok, .ui-widget-overlay").click(function(e){
$(".popup").dialog("close");
});
}
var thisUrl, linkType;
$('a[href*="mailto:"], a[class*="speedbump"]').click(function(e){
e.preventDefault();
thisUrl = this.href.substr(this.href);
if(this.href.indexOf("mailto")>-1){
linkType = "emailLink";
} else {
linkType = "extLink";
}
showDisclaimer(thisUrl, linkType);
});
});
/* END Speedbump Modal Handler */
Custom CSS Class
Now, within your site content you can apply the custom CSS class speedbump to any hyperlink. Following is an example:
<a href="http://www.google.com" class="speedbump" target="_blank">Search Google.com</a>
The link click will be handled by the HTML and Script above. A modal popup will be displayed to facilitate the blocking or forwarding of the user to the external site or email.
Wrap-Up
Now you know what a "speedbump" is within the context of a website and how to implement it. So, hopefully you will not suffer the same embarrassment as me! :)