How to Add Age Verification to Websites in Under 10 Minutes

Last updated on

by

how to create an age verification popup

Does your site sell adult products or publish content that requires age verification? Wondering how to add an age verification popup to your website?

There are plenty of plugins and websites that can help you add an age verification popup to your site. But most of them are expensive and take too long to set up.

In this post, I’m going to show you how you can use OptinMonster to create your own age checker popup.

You won’t need to hire a developer or pay for an expensive app for it. It just takes 10 minutes, and even beginners can do it on their own.

Once you add the age verification popup to your site, you’ll be able to verify your customers’ age every time they land on your site.

But first, let’s talk about what I mean by an ‘age verification popup’ and why you should add age verification to your website.

What Is an Age Verification Popup?

An age verification popup is a design overlay that appears on your website for visitors to interact with. The popup makes it mandatory for them to choose their age from the menu or confirm their date of birth. This is to make sure they are old enough to consume the content on your site.

Businesses that sell tobacco, alcohol, cannabis, or other adult products use this verification method to ensure their site’s visitors are old enough to view their content. The goal is to ensure that online stores that deal in adult products aren’t advertising them to minors, as per the law.

You’ve probably seen an age-gate widget before. It looks like this:

how to add an age verification popup

Showing an age verification popup on your site can help you avoid fines or penalties if minors are caught buying from your site.

It doesn’t matter if your business operates in a region that doesn’t have strict laws for checking your user’s age. Adding an age verification popup is morally the right thing to do even in such circumstances.

Many eCommerce sites and social media sites have age restrictions to keep minors from creating an account on their own.

How to Add Age Verification Popup to Websites

In this step-by-step tutorial, I’ll show you 2 different ways to create an age verification popup.

Let’s get started.

Method 1: Yes/No Age Verification Popup

I’ll use OptinMonster to create a website age verification popup.

OptinMonster is the best lead generation software that lets you create online campaigns, such as a registration formwebsite notification barcountdown timer, and age verification popup.

OptinMonster also integrates with all major website and eCommerce platforms such as WordPressWooCommerce, and Shopify to offer wide-ranging solutions for all kinds of online stores.

It comes with powerful targeting options so you can show your campaigns to the right people at the right time and on the right pages.

You can also use the targeting rules to display different popups in different locations that have separate laws for underage customers.

For instance, the legal drinking age varies by country. The US requires customers to be at least 21 years old to smoke or drink. In Canada, the legal age is 19. And in Germany, the age limit is just 16.

If you have a beer brand that sells to these countries, you can use OptinMonster to trigger region-specific age verification popups to oblige by the local law.

Let’s go over the steps to creating a simple yes/no age verification popup.

Step 1: Create a Yes/No Campaign

Log into your OptinMonster account.

how to add an age verification popup to your website

Don't Have an Account Yet? Sign up for OptinMonster to get started today or check out this extensive review to see if OptinMonster is right for you!

In your dashboard, go to the upper right-hand corner and click Create New Campaign:

website lightbox popup

Choose your campaign type. There are 2 types of campaigns that work for age verification:

  • Popups
  • Fullscreen

I recommend going with a popup campaign since popups don’t take up the entire screen space.

You can also create a fullscreen campaign, which gets people’s full attention without any distractions.

For this tutorial, I’ll choose a popup campaign:

how to add age verification on website

Now it’s time to choose a popup template. OptinMonster comes with 100+ ready-to-use templates that work perfectly across desktop, tablet, and mobile devices.

Or, you can also select the Canvas template to create your own campaign from scratch. I’ll show you how to do that a bit later.

For now, I’ll use the Free Shipping template.

To find it, just type ‘free shipping’ in the search box and click on Use Template.

add age verification to website

Next, give your campaign a name and select which site you want to use it for. Click on Start Building once you’re ready.

how to verify age on website

Now you’ll see your template in the editor. As the template name suggests, the copy and design are tailored to a free shipping offer rather than an age verification popup.

free age verification popup

But with just a few minor adjustments, you’ll have your age verification popup ready in no time.

Simply click on specific areas in the designer to pull up the editing tools in the left-hand side menu. For this tutorial, I’m going to make the following changes to the design:

1. Delete the background image.

tips to add age verification widget

2. Change the text to ask the visitor if they are 21 or over.

how can I add age verification message on my website

3. Change the background color to black.

how to add age verification on mobile site

4. Change the button texts to yes and no. Click on the button on the designer to get the customization options in the left-hand menu.

how to verify age online

5. Change the button colors.

how to age verify on website

6. And finally, adjust the button width.

age verification widget wordpress

After I make the changes, the popup will look like this:

how to add age verification online tutorial

Next, I’ll show you how to make the popup mandatory for all visitors on your site.

Step 2: Make Age Verification Mandatory

Notice there’s still an X close button in the top right-hand corner of the campaign:

how to embed age verification popup

To make it mandatory for each website visitor to interact with the age verification popup, you’ll need to get rid of the close button. The only way this campaign should close is if the user clicks yes because they are old enough to enter your site.

Click on the X icon in the top right-hand corner and look for Display a close button? option in the left-hand editing menu. Toggle the option to disable the close button:

tips to embed age verification widget online

Now it’s time to change your yes and no buttons’ actions. Let’s start with the yes button.

Click on the Yes button to pull up the editing options on the left-hand side menu. Scroll down to Button Click Action. Change the settings from Go to a view to Close the campaign:

how to add age verification online website

This way, when your site’s visitors answer ‘yes’ to whether or not they meet your age requirements, the popup will close and let the visitors access your site.

Next, let’s modify the No button’s action. Click the button to pull up the editing tools. Scroll down to Button Click Action.

In the dropdown menu for Button Click Action, change the settings from Close the campaign to Redirect to a URL:

age verification plugin

Enter the URL that you want your visitor to be redirected to in the field below:

age verification wordpress plugin

You can choose any URL that you’d like. If you have other content or another site that isn’t age-restricted, you can send visitors there.

It’s also a common practice to send your visitors back to Google or other search engines, if that’s where they found your website.

Sula Vineyards redirects underage visitors to Google search, while the Vape Shop Boston redirects visitors under 21 to DuckDuckGo.

Pro-tip: If you don’t want the traffic to drop out of your site, you can also create your own landing page.

I recommend creating a landing page stating the law about why underage visitors can’t proceed further with the website. You can use your landing page to educate them about the relevant laws.

This will help you improve your search engine optimization (SEO) while still following the legal norms.

Back to the age verification popup, as we’re almost done setting it up.

Next, we need to configure our display settings to make sure your campaign is shown to the right people and on the right pages.

Step 3: Show Age Verification Popup to Every User

You want your popup to display every time someone visits your website. However, you don’t want it to pop up for every new page they visit during their session.

Go to the Display Rules tab from the top menu and click on Done? Go To Actions.

add age verification to your website

You’ll see the following options under the After your campaign is displayed… section:

add age verification to adult websites

For our use case, the last option in the menu is the best: Remember a visitor who has seen this campaign…

Change the default setting for X days to only during the current session. This will enable the age verification message to show to each visitor every time they visit your website:

WordPress plugin age verification

Now, there’s just one more important step left.

Step 4: Display the Popup Immediately

At the top of your editor menu, click Display Rules and click on Edit:

how to verify age online website

Showing a popup immediately after visitors land on your website is usually not a great user experience (UX) best practice. That’s why, in OptinMonster, the default settings will show the campaign to your visitors after the first 5 seconds of being on your page.

website age verification gate checker

But for age verification, it’s recommended you do the opposite.

Leave the first condition as time on page untouched, but change the field next to it from is at least to is immediate:

free age verification popup for websites

This means that your popup will appear as soon as a visitor enters your site.

The next step is optional, depending on your preference.

Right now, the default configurations show your popup campaign on any page. You can change this if only certain pages of your site are age-restricted.

To do so, leave the current URL path optin as is but change the field is any page to exactly matches.

Then enter the URL of the age-restricted page on your site:

free age verification widget

Note: Some businesses may think they should only show an age verification popup on their site’s homepage as they welcome new visitors. However, I warn against this.

Remember, your visitors may find your content in other ways and may not land on your homepage first.

To add more pages, click the Add a New Rule link and set up the display rule you just created with another URL:

add age verification to your website

If you have entire sections of your website that need to be restricted, you can change the condition is any page to contains.

Then enter part of the URL slug that you want to include age verification.

If you have an online store that sells brand merchandise, you might have a website structure where each of your product pages includes the URL path www.mysite.com/product. To apply the condition to all your product pages, add the term ‘/product’ in the field next to contains:

how to add age verification dialog box

Then any URL that contains the term ‘product’ will display your age verification popup.

And now you’re done! Well, almost. Don’t forget to click Save and Publish.

add age verification to your site

Next time a visitor comes to your website, they’ll see this age verification message on your site as soon as the page loads:

add age verification popup

Method 2: Create an Age Verification Checker by Birthdate

You may have noticed that on some websites, the age verification popup asks users to enter their full date of birth:

how to add DOB popup

Some states or regions may require that you do this. If you are wondering how to add this age verification popup to your website, I have just the right technique for you.

Creating this age verification popup in OptinMonster requires you to embed a bit of custom code.

If you’re not familiar with HTML, CSS, or JavaScript, don’t worry. All you need to know is how to copy and paste.

Just like last time, log into your OptinMonster account and create a popup campaign. But this time, choose the Canvas template to start from a blank slate:

add date of birth verification website online

Then name your campaign and assign it to a website. Your editor should look like this when you arrive:

how to add DOB checker on website

Delete the close button like we did it in the previous tutorial. Click the close icon and toggle the option off to disable it:

add date or birth popup to website

Next, go to the left-hand side menu and click and type ‘HTML’ or scroll down the options to find the HTML block:

add custom age verification to website

Drag and drop this block to your design editor. You’ll see the new block appear on the designer.

how to add interactive age verification to website

Click on the HTML block in the editor. This will make a code editor appear in the left-hand menu for you to insert a custom HTML script:

how to add age verification popup HTML code

Delete the code that’s there by default and paste the following HTML code:

HTML 

At this point, your campaign will look a little unfinished. No worries, that’s normal.

CSS

add age verification online

We’ll add the Cascading Style Sheets (CSS) to fix this. CSS codes control how HTML elements will be displayed.

You can find the CSS option right below the HTML option in the left-hand menu:

how to use HTML to create age verification popup

Copy and paste the code below into that box:

You’ll see that your birthday input fields look way better after you add the CSS script:

how to use HTML to create age verification popup

Next, click the dark area outside the design editor to prompt the Settings menu on the left panel. Click on Custom JavaScript at the bottom of the menu to expand the code editor:

HTML tutorial to create age verification popup

Copy and paste the following JavaScript code:

You can change the “21” there to “18” (or any other age) depending on your site’s product, content, and local laws. Doing so will change the popup to allow people who are 18 and older to enter, rather than 21 and older, as it is now.

Now you just need to clean up the design to fit your brand. Delete any excess element blocks from your campaign by using the trashcan icon directly in your editor:

how to use Javascript to create age verification popup

Once you’ve cleaned the design, your campaign will still look plain:

how to add age verification

To fix that, change the background color. Click on the background of your campaign to pull up the options to change the background color.

add age verifier

For our tutorial, I’ll enter “000000” to create a black background. That will make the design look like this:

add age verification to online site

This will also bring out the text Please confirm your date of birth that was not visible earlier because it’s in white.

And voila, you now have an advanced age verification system that allows you to insert your visitor’s date of birth.

Once you publish the popup on your site, visitors who enter an age as 21 or younger will see this message: Sorry! You are not allowed to enter.

Oh, and again, don’t forget to hit Save and Publish.

add age verification online

To make sure the popup appears right away after someone lands on your site, customize your display rules and triggers in the same way we did during the first half of this tutorial.

Other than that, you’re all set.

You can now rest assured that your site’s visitors are all of the appropriate age to view your content.

Ready to Put These Methods Into Practice?

That’s it! You now know exactly how to add age verification to a website without complex coding.

If you have similar other use cases, such as gating a premium piece of content behind a subscription wall, you’ll love the following resources:

Want to add an age verification popup to your website? Sign up for OptinMonster today, risk-free with our 14-day money-back guarantee, and start growing your business today.


Disclosure: Our content is reader-supported. This means if you click on some of our links, then we may earn a commission. We only recommend products that we believe will add value to our readers.



Add a Comment

We're glad you have chosen to leave a comment. Please keep in mind that all comments are moderated according to our privacy policy, and all links are nofollow. Do NOT use keywords in the name field. Let's have a personal and meaningful conversation.

Popular Posts

Connect with us:

Start Getting More
Leads & Sales Today
with OptinMonster!

Popups work, and you can get started for a few bucks a month. What are you waiting for?

Create and launch smart capture forms
today in minutes. What are you waiting for?

In only 7 months, we added more than 95,654 names to our email list using OptinMonster’s Exit Intent™ technology. We strongly recommend it!

Michael Stelzner - Best Lead Generation Tool

Michael Stelzner

Founder Social Media Examiner

I hate popups, so I was hesitant to try one on my site. But the results from OptinMonster exit-intent popup speak for themselves. I doubled my subscription rate immediately without annoying my users. I haven’t had a single complaint. My only regret is that I didn’t start using OptinMonster sooner. I can only imagine how many subscribers I could have added to my email list! If you have a blog, then I highly recommend you start using OptinMonster. I’ve researched them all, and it’s the best in market.

Michael Hyatt - WordPress Lead Generation

Michael Hyatt

New York Times Bestselling Author Platform: Get Noticed in a Noisy World

Exit-intent popups have doubled my email opt-in rate. When done right, you can see an instant 12% lift on driving sales. I highly recommend that you use OptinMonster for growing your email list and sales.

Neil Patel - WordPress Popup Plugin

Neil Patel

Founder QuickSprout