How to Add an Age Verification Widget to Your Website

With Jotform’s Age Verification Widget, you can restrict access to your website or specific content by asking visitors to confirm that they meet your minimum age requirement. Simply choose your verification method, customize the widget’s appearance, and embed it on your website in just a few steps.

An age verification widget is especially useful for websites that offer age-restricted products or content, such as alcoholic beverages, vaping products, gaming, or other adult-oriented services. It helps create a smoother experience for eligible visitors while adding an extra layer of compliance before they access your website.

Creating Your Age Verification Widget and Getting the Embed Code for it

Before you can add the Age Verification Widget to your website, you’ll first need to configure your age verification settings, customize the widget’s appearance, and copy its embed code. Here’s a quick how-to:

1. On the top-left side of your Workspace page, click on Create.

2. Then, in the menu that opens up, select Website Widget.

3. Next, in the Search bar in the upper-left corner of the Choose Website Widget menu, enter Age Verification.
4. Then, at the bottom of the search results, click on Use Widget.

5. Now, in the Widget Properties menu that opens on the right side of Website Widgets, under the General tab, set up these properties:
   • Minimum Age — Set the minimum age visitors must meet to access your website or its content.
   • Verification Method — Choose how visitors verify their age, such as by confirming their age or entering their date of birth.
   • Remember Approved Visitors — Keep approved visitors from seeing the age verification popup again on future visits.
     • Remember For — Choose how long approved visitors remain verified before they need to confirm their age again.
   • Underage Action — Choose what happens when a visitor does not meet the minimum age requirement, such as showing a message or redirecting them to another webpage.
   • Underage Message — Customize the message displayed to visitors who do not meet the minimum age requirement.

6. Then, scroll down and adjust these settings:
   • Verification Window Image — Upload an image to display in the age verification popup for a more personalized appearance.
   • Message — Enter the main message displayed in the age verification popup.
   • Caption — Add a short caption beneath the main message to provide additional context.
   • Additional Info — Include extra information, instructions, or legal notices for your visitors.

7. Next, under the Styles tab, customize these properties:
   • Popup Colors
   • Overlay — Show or hide the page overlay behind the verification popup.
     • Overlay Color — Choose the color of the overlay displayed behind the popup.
   • Primary Button Colors
     • Button Color — Choose the background color of the primary action button.
     • Text Color — Set the text color of the primary action button.
   • Secondary Button Colors

8. Then, scroll down and adjust these settings:
   • Logo — Upload or display a logo in the verification popup to match your branding.
   • Background Blur — Blur the webpage behind the popup to help keep visitors focused on the verification window.
   • Corner Radius — Adjust how rounded the corners of the popup appear.
   • Jotform Branding — Show or hide Jotform branding on the widget.
   • Font — Choose the font used throughout the verification popup.
   • Custom CSS — Apply your own CSS code for advanced styling beyond the built-in settings.

9. Now, under the Layout tab, configure these properties:
   • Text Align — Choose how the text is aligned within the verification popup.
   • Popup Width — Adjust the width of the verification popup to fit your preferred layout.
10. Once you’ve finished configuring the widget, in the pink navigation bar at the top of the page, click on Publish.

11. Then, in the Embed section, click on Copy Code, and, if you already know how, paste that into the Embed section on your platform, and you’re good to go.
12. To view embedding instructions for your widget, click on Platforms in the menu on the left side of the page.

13. Next, in the Platforms section on the right, select the platform you want to view embedding instructions for. Or, use the Search bar at the top of the section to find it easily.

14. Then, follow the steps in the How to Embed Your Widget section to add it to your website.

That’s it! Your Age Verification widget will appear on your website based on how you set it up. The example below shows how it’ll look when embedded on a website.