OptinMonster Logo

How to Add Age Verification to Websites in Under 10 Minutes

Last updated on

by

Age Verification Featured Image

Does your site contain adult products or content requiring an age verification popup? Many age verification services can be time-consuming and expensive for what they deliver.

That’s why, today, we’re going to show you how to use OptinMonster to create your own age verification popup in less than 10 minutes.

By the end of this tutorial, you’ll be able to verify your customers’ age whenever they reach your site.

But first, let’s talk about what we mean by an “age verification popup.”

What Is an Age Verification Popup?

An age verification popup is a popup campaign shown to visitors to make sure they are old enough to browse the content of your site. Businesses who sell tobacco, alcohol, cannabis, or other adult products use verification to ensure their site’s visitors can legally (and safely) view their content.

The goal of age verification is to make sure that vendors selling adult products aren’t advertising to minors.

And while some companies make entire age verification pages for their site, others prefer a simple age check popup.

You’ve probably run into these age verification messages before. They look like this:

Age verification popup example by bevmo

Many businesses add website age verification popups for both moral and legal reasons.

With an age verification popup, you can cover your bases to avoid fines or penalties if minors are caught making fraudulent purchases on your site.

And even though laws for checking your user’s age will vary depending on where you live, adding age verification to websites is a no brainer for anyone who works with adult products.

2 Ways to Create an Age Verification Popup

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

Method 1: Simple Age Verification (Yes/No)

Method 2: Age Verification by Submitting Birthdate

Let’s get started.

Method 1: Simple Age Verification Popup (Yes/No)

We’ll be using OptinMonster to create an age verification popup.

Without a doubt, OptinMonster is the best conversion toolkit on the market that lets you easily set up any onsite campaigns, including an age verification popup, lead generation form, and more.

It comes with powerful targeting options, so you can rest assured that your campaigns are shown to the right people on the right pages at the right time.

Step 1: Create a Yes/No Popup

First, you need to log into your OptinMonster account:

OptinMonster Login Page

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 the upper right-hand corner and click Create New Campaign:

Create a new campaign final picture

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

  • Popups
  • Fullscreen

Love ’em or hate ’em, you just can’t deny that popups WORK.

It’s why you see so many famous brands using popups for age verification, optin campaigns, and more.

Alternatively, you can also create a Fullscreen campaign, which is the best choice especially if you’re only restricting specific URL paths on your site.

For today’s tutorial, though, we’ll choose a Popup:

Choose popup campaign types

Now it’s time to choose your template. OptinMonster comes with 50 pre-made templates that work for both desktop, tablet, and mobile. Or, you can also choose to create your own template from scratch.

Today, we’re using the Basic template:

Create an Inline Campaign Basic Template

This is a straightforward, non-distracting popup template that’s perfect for verifying the age of your site’s visitors.

Next, you need to name your campaign and select which site you want to use it for:

Name and connect your website

Now you’ll see your template in the editor. With just a few minor adjustments, you’ll have your age verification popup up and running in no time.

Head over to the top of your editor menu and click Yes/No:

Yes_No optin view

Then click Activate View in your editor:

Active View for your Yes_No campaign

This will activate the Yes/No feature typically used for our 2-step optin forms. However, they’re also useful for verifying the age of your visitors.

Click on the text in the editor to pull up the editing tools in the left-hand side menu. Change the text to ask the visitor if they are over the age required to view the information on your site:

Change the text for our age verification popup

We’ll also delete the subtext for our age verification campaign. To do so, click on the subtext’s trashcan icon directly in your editor:

Delete the sub-text for age verification campaign

Now we need to edit our Yes/No options.

You already have your Yes and No buttons created. If you want, you can change the look and style of these buttons to match your brand. Simply click on the button to pull up the editing tools on the left-hand side menu:

Change the Yes No buttons

You can change the button:

  • Color
  • Text
  • Font
  • Shadow
  • Border

And more. With OptinMonster, it’s our mission to ensure that you can customize each popup to meet your specific needs.

Today, we’ll change our Yes and No button text to be more straightforward than they are in the template. We only need them to say “Yes” or “No” for our age verification popup.

Click on the button you want to edit and find the Button Text field. Then modify whatever you’d like your Yes button to say:

Change Yes Button Text for Age Verification Popup

Click on your No Button and find Button Text to change that as well:

Change No Button Text for Age Verification Popup Campaign

You should now have a simple Yes/No campaign in your editor:

Are you over 21 example campaign

Step 2: Make Age Verification Compulsory

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

Close X Button in the campaign

We don’t want that to appear in our age verification popup.

The only way this campaign should close is if the user clicks Yes because they are old enough to enter your site. For now, click on the close element in the top right-hand corner and look for Display a close button in the left-hand editing menu:

Display a close button

Switch the toggle to Off: 

Turn toggle off for Display a close button

Now it’s time to change your Yes and No buttons’ action. 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 Action:

Yes Button Action

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

Button click action - Close the campaign

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

Now it’s time to modify the No button’s action. Click the No button to pull up the editing tools. Scroll down to Action:

Button Click Action - No Button

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

Redirect to a URL for the No Button

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

Redirect URL for No button - age verification popup campaign

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.

Otherwise, it’s a common practice to have your visitors go back to Google.

We’re almost done.

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

Step 3: Show Age Verification Popup to Every User

In the left-hand menu, click Display Settings:

Display Settings in OptinMonster Menu

The first option is useful for optin campaigns. The default settings won’t show the same popup for 30 days to visitors who didn’t opt into your form:

OptinMonster Default Display Setting

But this isn’t an optin form, so we’ll want to change that.

In the drop-down menu, change this field from after X days to anytime the display rules are met:

any time the display rules are met display setting

Then you’ll want to change the next field box for people who did verify their age so it will still appear on their next visit to the site.

For that, change the field “If this campaign has been converted, show it again” to on their next visit to the site:

on their next visit to the site display rule

And that’s it! Your age-verification campaign will show to each visitor every time they come to your site.

Step 4: Display the Popup Immediately

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

Choose Display Rules in your OM campaign

Typically, we don’t advise users to show their popups to users immediately. Our default settings will show the campaign to your visitors after the first 5 seconds of being on your page.

But in many cases, we recommend showing campaigns as users are leaving your site with our Exit-Intent Technology®.

Today, though, you need to do the exact opposite.

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

Time on Page is Immediate in Display Rules

This means that your popup will appear as soon as anyone reaches your site.

The next step will be optional, depending on your needs. Right now, the default configurations will show your popup campaign on any page. However, you can change this if only certain pages of your site are age-restricted.

To do so, you can leave the option current URL path as is but change the field is any page to exactly matches:

Change Current URL path to Exactly matches for age verification popup campaign

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

Enter URL for display rules

NoteSome users may think they should only show an age verification popup on their site’s homepage as they welcome new visitors. However, we recommend 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 AND button and recreate the display rule you just created with another URL:

Add another URL to the display rules

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

Change current URL path to contains to restrict sections of your site

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

So if all of your blog posts start with the URL path www.mysite.com/blog, you would add the term blog in the field next to contains:

Enter URL slug for URL path contains

Then any URL that contains the term blog will display your age verification popup.

And now you’re done! Well, almost.

Don’t forget to click Save and Publish.😉

You’ve now used OptinMonster as a free age verification service to make sure your site’s product and content is getting to the appropriate audience. This will display any time a visitor comes to your site and will show immediately.

Method 2: Age Verification by Submitting Birthdate

You may have noticed that on some websites, the age verification popup asks users to input their birthday:

Jack Daniels Age Verification Page

Some states or regions may require that you do this. The question has always been, “How?”

Today we’re going to quickly share a bit of custom code that you can use to create this type of age verification popup with OptinMonster.

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

Like you did earlier, log into your OptinMonster account and create a popup campaign. But this time, choose the Canvas template to start from scratch:

Choose the canvas template for OM campaign

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

Age Verification Blank Canvas Advanced

The first thing you need to do is delete the close button for this template like we did earlier in this tutorial. Click the close button element and locate the toggle switch:

Display a close button

Switch the toggle to Off:

Turn toggle off for Display a close button

Now go to the top your editor menu and click + Add Blocks:

Click Add Blocks to Add custom HTML

In the left-hand menu, you’ll see various block element options. Scroll down until you locate HTML:

Find HTML Block

Drag and drop this block into your editor screen. You’ll now see a place to insert custom HTML in the left-hand menu:

HTML Editing

Delete the code that is currently there and replace it with the following HTML code:

HTML 

At this point, your campaign will look a little weird. No worries, that’s normal. Because next, we need to add the CSS.

CSS

Click on the Home icon to return to your editing tools:

Go back to the home editor menu

Then click on Display Settings:

Click Display settings-min

And scroll down until you see a CSS code box:

Custom CSS field

Copy and paste the code below into that box:

You’ll see that your birthday input fields have been styled:

CSS added changes your campaign style-min

Click the back button at the top of your left-hand menu next to Custom CSS:

Back button next CSS

And click on Custom JavaScript:

Custom JavaScript in editor menu

JavaScript

Copy and paste the following JavaScript code:

And put it in the code box in your editor:

Custom JavaScript code input

The one section of this piece of code you need to know is this:

You can change the “18” there to “21” (or any age) depending on your site’s product, content, and local laws. Doing so will change the popup to allow people who are 21 and old to enter, rather than 18 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:

Trashcan Icon

Once you’ve cleared all the excess blocks, your campaign will still look plain:

Age Verification Plain Template

To fix that, change the background color. Click on the background of your campaign to pull up the editing tools. Locate background color:

Change background color

We suggest using the color code “000000” to create a black background:

Final Age Verification Campaign-min

This will also bring out the text Please confirm your date of birth that is in white (which is why we couldn’t see it before).

And voila, you now have an advanced age verification popup that allows you to insert your visitor’s date of birth. If they aren’t old enough to visit your site, they’ll get the message Sorry! You are not allowed to enter:

Age Verification Error Message

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

You’ll want to customize your display rules and triggers in the same way we did during the first half of this tutorial. Otherwise, you’re all set.

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

In Conclusion

That’s it! You’ve just learned how to add age verification to your website with ease.

Do you have any cool tips or tricks for verifying your site users’ age? If so, let us know via the comments section below. You might also want to check out how to use gated content to skyrocket conversions.

Or, since you’re now familiar with 2-step optin campaigns, you may be interested in reading this article, How to Add Multi-Step Popups to Boost Conversions.

And for more expert advice on increasing traffic, boosting conversions, and making more sales, head over to our YouTube channel. We’ve got loads of tutorials for all of your digital marketing needs.

Tired of theory and ready to take action? That’s what we love to hear.

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.

CTA background
CTA thumbnail

Over 70% of visitors who abandon your website will never return! Learn how to unlock the highest conversion revenue from each of your website visitors!

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.

1
1
1

Enter all the Optin Gallery Pages here

Enter each choice on a new line. For more control, you may specify both a value and label like this: red : Red

Enter each choice on a new line. For more control, you may specify both a value and label like this: red : Red

1

2 responses to “How to Add Age Verification to Websites in Under 10 Minutes”

  1. Randall Holbrook Avatar
    1. Nathan Thompson
Blog Sidebar Campaign Form

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?