Create an Age Verification Modal for Your Website

by Jason Unger, Founder

Insights / Website Development / Create an Age Verification Modal for Your Website

When we launched the Silver Branch Brewing Company website, we discussed the need to have users verify their age before entering the site.

Obviously, purchasing alcohol is restricted by age.

Also obviously, if someone wants to access the website who isn’t legally allowed to purchase alcohol, there’s not a ton we can do to stop them.

There are many ways websites work to verify the age of the site visitor, but aside from having access to their Driver’s License or other government ID … well, let’s just say that anyone can lie about their age online.

But that doesn’t mean you shouldn’t try to verify a user’s age.

Does Age Verification Work Online?

There may be some actual benefit to attempting to verify a user’s age before they access your website.

Usability research has found that putting up a barrier to access can help limit interaction. The Nielsen Normal Group, our go-to usability gurus, has studied the impact of “login walls” — where a user is forced to login or register in order to see site content.

Login walls require a significant interaction cost: users must remember their credentials (if they have an account) or take the time to create a new account. Therefore, sites should use them only if users will benefit significantly from the presence of these walls. Applications that are highly personal (such as email or banking apps) are justified in raising login walls for potential intruders. Login walls are however a nuisance on sites that people visit only rarely.

Put simply: it’s annoying.

We all want to find the information we need, and anything that makes that more difficult to do makes the entire process cumbersome and annoying.

Most of them time, that hurts your website. But when you’re hoping to discourage the wrong users from visiting the site, it can actually work in your favor.

Again – anyone can lie online about their age. There’s definitely no foolproof technological way to verify someone’s age, so if someone really wants to access your site, then they’ll find a way.

For a business that caters to a specific age demographic, putting up this barrier can help. And, if nothing else, it’s a cover-your-ass decision that makes your lawyers happy.

Developing an Age Verification Modal and Date-Based Cookie

For Silver Branch, we decided to have a simple modal graphic that asked the user if they’re over the age of 21. (Read their whole Client Story when you have a moment; there’s a lot of good stuff in there.)

Here’s the graphic:

When you visit the Silver Branch website for the first time, the screen gets dark, you can’t scroll, and the modal appears. You have to interact with the modal before you can do anything on the site.

Clicking “Yes” takes into the website; clicking “No” takes you to pictures of cat GIFs.

When you click “Yes”, we set a browser cookie that lasts for 24 hours that says you’ve interacted with the Age Checker and don’t need to see it again, and then hide the modal and return the site background to its normal brightness.

Displaying the age verification modal requires a few things:

• HTML and CSS to darken the screen and display the modal graphic in the correct location
• Javascript to check for a browser cookie and set one upon age verification
• jQuery to show and hide the modal as necessary

Let’s look at the code and I’ll show you how it all works.

The HTML, Javascript and jQuery to Build the Modal

Your project will likely require customizations, so use this code as a starting point to build your own age verification modal.

Let’s start with the HTML.

At the bottom of our footer.php file, we insert the HTML that contains the modal. (We put it in footer.php rather than in a homepage-specific template because we want it to fire no matter which page someone enters the site through.)

<div id="sb-age-bg" class="silverbranch-age-bg">
     <div class="silverbranch-age-checker">
          <div class="yes-button"><a class="close-age-popup"><img src="<?php bloginfo( 'stylesheet_directory' ); ?>/img/yes-btn.png" /></a></div>
          <div class="no-button"><a href="https://giphy.com/explore/cat"><img src="<?php bloginfo( 'stylesheet_directory' ); ?>/img/no-btn.png" /></a></div>
     </div>
</div>

Our modal uses a background image with two individual images sitting on top of it; one for the Yes button and one for the No button. The modal is contained in a div (with ID “sb-age-bg” and class “silverbranch-age-bg”) the height and width of the entire screen.

Here’s the CSS that displays the modal image, Yes and No buttons, and the background.

.silverbranch-age-bg {
     background: rgba(0,0,0,.7);
     position: fixed;
     top: 0;
     right: 0;
     bottom: 0;
     left: 0;
     z-index: 10000;
     display: none;
}

.silverbranch-age-checker {
     background-image:url('img/pwb-age-popup.jpg');
     background-repeat:no-repeat;
     width: 400px;
     height:475px;
     position: fixed;
     z-index: 100000;
     top: 50%;
     left: 50%;
     transform: translate(-50%, -50%) !important;
     -webkit-box-shadow: 0 3px 6px rgba( 0, 0, 0, 0.3 );
     box-shadow: 0 3px 6px rgba( 0, 0, 0, 0.3 ); position: absolute;
}

.yes-button {
     position: relative;
     top: 350px;
     left: 70px;
}

.no-button {
     position: relative;
     top: 310px;
     left: 225px;
}

.close-age-popup {
     cursor:pointer
}

OK, so we’ve created the modal and added it to our website. The last step is to show it if the user doesn’t have the browser cookie, add the cookie, and then hide the verification and brighten the background.

Again in the footer of your site (or, our preferred way, by hooking into the wp_footer action), you’ll need:

• a function to check for cookies
• a function to create cookies
• a way to show/hide the modal

Two Javascript functions can help you “read’ and “create” cookies.

function createCookie(name, value, days) {
     var expires = "";
     if (days) {
          var date = new Date();
          date.setTime(date.getTime() + (1 * 24 * 60 * 60 * 1000));
          console.log(date);
          expires = "; expires=" + date.toUTCString();
     }
     document.cookie = name + "=" + value + expires + "; path=/"; // affects all site pages
}

function readCookie(name) {
     var nameEQ = name + "=";
     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, c.length);
          if (c.indexOf(nameEQ) == 0) return c.substring(nameEQ.length, c.length);
          }
     return null;
}

Finally, we need to determine if the user already has the cookie (and if not, show them the modal) and hide the modal when the “Yes” button is clicked. jQuery does the job here.

if (readCookie('silverbranch_age_check') === 'true') {
} else {
     $('#sb-age-bg').show();
}
$('.close-age-popup').click(function() {
     createCookie('silverbranch_age_check', 'true', 1);
     $('.silverbranch-age-bg').hide();
});

And that’s it.

There are other ways to set and read cookies, like with PHP rather than Javascript. We use Javascript here because it’ll work in all web hosting environments, especially if there’s server caching beyond our control.

Have a WordPress or web development question you need help with? Reach out and we’ll do our best to respond.