Age Verification Widget

The Age Verification widget offers a simple yet powerful solution for websites that need to comply with age restriction laws or protect minors from accessing inappropriate content.

A deep set of widget options provide great versatility in display and functionality, allowing this widget to work with a vast array of site types. Customization options include three verification methods, custom error messages, redirects, and even the ability to use cookies to ensure verification doesn't re-trigger on repeat visits to your site.

Preview: https://demo.wocode.com/age-verification

Setup

WIDGET PLACEMENT AND SIZING

Drop the widget into the site you wish to have the age verification popup display. If the entire site needs to be age-restricted, place the widget into the site's header or footer. This will allow the age verification widget to display across all pages of the site.

If you want to age-restrict only a single page or certain pages, place the widget only in the pages you wish to restrict. The widget can be placed anywhere on the page, and the widget placeholder will not be seen when the site is published.

WIDGET OPTIONS

  • Open the widget option panel.
  • Preview In Editor: This will enable or disable to age verification popup from being visible while in the editor. When this setting is enabled, the Age Verification will behave as it will on the live site – a popup with a full-screen overlay. We suggest enabling this setting when editing or styling the widget and then disabling this setting when you want to edit the site page itself.
  • Select Layout: There are two layouts to choose from, Standard and Side Image. The side image layout will display everything the standard layout displays, with the addition of an image on the left or right side of the popup. When the side image layout is selected, the image will only be visible on the desktop & tablet and will be automatically hidden on the mobile layout. This is done to ensure that vital text content is visible on smaller screens.
  • Verification Popup Content: This submenu provides fields for you to enter content for the popup title, description, footer text, and logo.
  • Verification Method: There are three options available for verification methods. By birthday date (i.e. MM/DD/YYYY), button confirmation, and age input.
  • Required Age To Enter Site: This sets the minimum age the user must be to enter the site.
  • Verification Method Configuration:
    • Enter Button Label: Sets the label that will be visible on the enter button.
    • Show Exit Button: Enables or disables the exit button within the popup.
    • Exit Button Label: The label that will be visible on the exit button within the popup.
    • Linked To Page: This sets the page where the Exit button takes the user when clicked.
    • Date Input Variant: Sets the date input layout that is required when the user verifies their age in the popup (i.e. Day / Month / Year, Month / Year, or just Year).
  • On Fail Verification: This sets the behavior for when a user fails to pass verification within the popup (i.e. the user's age is less than the value required to enter the site).
  • Verification Error Message: This is the message that will be visible when the user fails verification.
  • Input Validation Error Message: This is the message that will be shown when an invalid entry has been entered into the age verification field (i.e. a user enters an invalid day of the month such as 56)
  • Validation Failed Redirect Link: This is where you will set exactly where/what page the user will be taken after failing the validation and clicking the Enter Site button.
  • Redirect Delay(s): When the On Fail Verification behavior is set to redirect, this setting will apply a delay between the time the failed verification occurs and the time the redirect occurs.
  • Show Only Once: When enabled, the popup will only show once for users that successfully enter the site. The popup will not reappear for those users until/unless they clear their browser's cookies.

DESIGN OPTIONS

The Design tab of the widget contains extensive styling options. The majority of these settings are related to text styling and will look familiar to text styling found in other widgets. However, there are a few settings to note:

Widget Styling:

  • Page Overlay Color: Sets the page overlay color that appears behind the popup to hide the page content. This is useful for if you have an image added into the Overlay Background settings, but want to also have a transparent overlay color ontop of the image.


    You may also add an image in the Overlay Background settings. Please note that the image is above the overlay color, meaning that adjusting the Image Overlay Opacity (below) sets the opacity of the image, and not the overlay color.


    Note that these settings give you a versatile set of options for your overlay. You may use a color, a color with an image overlay on top, a color with transparency, or an image with transparency. Use the combination of the Page Overlay Color and the Overlay Background Settings to try various combinations.

  • Overlay Background: Here you can set an overlay color as well a background image that will cover the page and hide the page content.
  • Overlay Opacity: This sets the opacity of the image set in the Overlay Background Settings. A setting of 1 equals fully opaque and a setting of 0.1 equals 10% opaque. Also see the Page Overlay Color section for additional information.

Layout Styling:

  • Layout Dimensions: Sets the height and width of the popup.
  • Layout Background: Use this to set a background color or image to the background of the popup. Note that this applies to the interior background of the popup container and not the page background.

Content Background:

  • Background Color: Sets the background color of the popup.
  • Padding (top, bottom, left, right): Applies various padding inside the popup.

Logo Styling:

  • Margins (top, bottom, left, right): Applies various margins to the popup logo.
  • Logo Vertical Padding (px): Applies top and bottom padding to the logo.
  • Logo Horizontal Padding (px): Applies left and right padding to the logo.

Side Image Layout Styling:

  • Side Image Position: Sets whether the side image will appear on the left or right side of the popup.
  • Side Image Width (%): This will set how much space within the popup the side image will take up. For example, 50% will make the side image take up half of the popup, however, the image is only allowed to take up a maximum of 76% of the space within the popup. This means that setting this slider beyond 76% will have no additional effect on the image width beyond that point.

Input Box Styling:

  • Input Box Gap (px): This applies a gap between the input boxes in the popup. (i.e. a gap between the day, month, and year fields within the popup).

Button Styling:

  • Button Gap (px): This applies a gap between the Enter Site and Leave Site buttons in the popup.
  • Buttons Margin (top & bottom): These sliders apply a top and bottom margin that is shared by both buttons.

Error Styling:

  • Preview Error in Editor: When enabled, this will force the error message within the popup to be visible while in the builder. This will allow you to see and style the error message more easily.