All-in-one Checker

The AgeVerif All-in-one Checker is a client-side JavaScript script pasted on your WEBSITE that blurs all content and displays a fullscreen modal, forcing the VISITOR to prove they are an adult before accessing the WEBSITE.

Checker Start

To display the Checker, you can either:

Automatically start the Checker on page load or
Manually start the Checker by calling a JavaScript function.

Requirements

You MUST be registered on our Webmasters Platform as a WEBMASTER, available at https://webmasters.ageverif.com.

You SHOULD be familiar with HTML. To install the Checker you need to edit some code.

Normal Flow

A new VISITOR enters your WEBSITE.
All content is immediately blurred and a fullscreen modal is displayed.

The VISITOR goes through the verification process, guaranteeing they are an adult.
The Checker closes and your WEBSITE is now visible, unblurred.

Session Duration

The VISITOR is verified for the next 60 minutes. After this period, per French regulation, the VISITOR must verify their age or login again.

Data Privacy

No data is shared between WEBSITEs. The VISITOR must verify their age on each WEBSITE they access.

Automatic Integration

The easiest way to integrate the Checker is by pasting a one-line <script> on your WEBSITE's HTML code.

Don't worry about blurring the content

With this integration the Checker starts immediately when the VISITOR accesses your WEBSITE.

All content will be blurred until the VISITOR proves they are an adult.

Go to the Webmasters Platform and select the WEBSITE you want to integrate the Checker with.
Copy the script provided on the platform.

html

<script src="https://www.ageverif.com/checker.js?id=[WEBSITE_ID]"></script>

Replace [WEBSITE_ID] with the ID of your WEBSITE.

Paste it on your WEBSITE's HTML code, preferably right before the closing </head> tag.

html

<!DOCTYPE html>
<html lang="en">
  <head>
      ...
      <!-- Load AgeVerif Checker -->
      <script src="https://www.ageverif.com/checker.js?id=[WEBSITE_ID]"></script>
  </head>
  <body>...</body>
</html>

That's it! AgeVerif's All-in-one Checker is now integrated on your WEBSITE.

Advanced Integration

If you want more control over how and when the Checker is displayed, you can stop it from automatically starting and use the JavaScript API to manipulate it.

Go to the Webmasters Platform and select the WEBSITE you want to integrate the Checker with.
Copy the script provided on the platform and add the nostart parameter. Also load it asynchronously by adding the async and defer attributes.

html

<script src="https://www.ageverif.com/checker.js?id=[WEBSITE_ID]&nostart" async defer></script>

Replace [WEBSITE_ID] with the ID of your WEBSITE.

Paste it on your WEBSITE's HTML code, but this time right before the closing </body> tag.

html

<!DOCTYPE html>
<html lang="en">
  <head>...</head>
  <body>
    ...
    <!-- Load AgeVerif Checker -->
    <script src="https://www.ageverif.com/checker.js?id=[WEBSITE_ID]&nostart" async defer></script>
  </body>
</html>

Check the JavaScript API to start the Checker manually and to listen to events.

Don't forget to start the Checker!

When using the nostart parameter, you need to manually start the Checker by calling ageverif.start().

Script query parameters for checker.js

The checker.js script can be customized by adding query parameters to the URL.

html

<script src="https://www.ageverif.com/checker.js?id=123&nostart&language=en&onload=ageverifLoaded&onready=ageverifReady&onsuccess=ageverifSuccess&onerror=handleError" async defer></script>

Field	Type	Format	Description
id	int	E.g. `123`	Your WEBSITE ID
nostart	none (optional)		Prevents the Checker from starting automatically. Use `ageverif.start()` JavaScript function
language	string (optional)	E.g. `en`. Default: `auto`	Forces a given language. Available: `auto`,`en`,`fr`,`es`,`pt`,`it`,`de`. Auto is based on the browser's language
onload	string (optional)	E.g. `ageverifLoaded`	Calls the given function when the script is loaded. You can use `window.ageverif` now
onready	string (optional)	E.g. `ageverifReady`	Calls the given function when the Checker is visible to the VISITOR and ready to start the verification process
onsuccess	string (optional)	E.g. `ageverifSuccess`	Calls the given function when the VISITOR has been verified
onerror	string (optional)	E.g. `handleError`	Calls the given function when a fatal error occurs and the Checker is not able to initialize or proceed

Functions must be defined in the global scope

Functions passed to the checker.js script as query parameters must be defined in the global scope window before the script is loaded.

JavaScript API

Control the Checker through the JavaScript API, available on the global ageverif object or window.ageverif.

interface AgeVerif {
  requiresVerification: boolean;
  verified: boolean;

  start(forceVerification?: boolean): Promise<void>;
  clear(): void;
  destroy(): void;
  on(event: string, listener: Function): () => void;
  off(event: string, listener: Function): void;
}

Properties

requiresVerification

requiresVerification: boolean

Whether the VISITOR must pass the verification process on the current region to access the WEBSITE:

Value	Description
`true`	VISITOR is on a region where age verification is required. (Still `true` even if the VISITOR is already verified)
`false`	VISITOR is on a region where age verification is not required

How do I set the regions?

Countries/regions are set by the WEBMASTER on the administration panel.

verified

verified: boolean

Verification status of the current VISITOR:

Value	Description
`true`	VISITOR has been successfully verified and the session is still valid
`true`	No verification is required (`requiresVerification = false`)
`false`	VISITOR has not been verified and must pass the verification process

Methods

start()

async start ( forceVerification = false ): Promise<void>

Starts the Checker.

Parameters

Field	Type	Format	Description
forceVerification	boolean (optional)	E.g. `true`. Default: `false`	Force verification to start even if the VISITOR is currently verified

Returns

A promise that resolves when the VISITOR has been successfully verified.

What if the VISITOR is already verified?

If the VISITOR is verified when calling start(), the Checker will not open and the promise will resolve immediately.

The 'success' event will be triggered, but the 'ready' event will not.

clear()

clear (): void

Clears/Resets the VISITOR verification status.

destroy()

destroy (): void

Destroys the Checker and removes it from the DOM.

on()

on ( event: string, listener: Function ): () => void

Registers a Listener for a given event.

Check the Events section for all available events.

Parameters

Field	Type	Format	Description
event	string	E.g. `success`	Event name to listen for
listener	Function	E.g. `() => ...`	Function to be called when the event is triggered

Returns

A function that removes the listener from the event listeners

off()

off ( event: string, listener: Function ): void

Removes a Listener for a given event

Parameters

Field	Type	Format	Description
event	string	E.g. `success`	Event name to remove the listener from
listener	Function	E.g. `() => ...`	Function to be removed from the event listeners

Events

Overview:

type EventName = 'load' | 'ready' | 'success' | 'error';

You can bind a listener to most events in 3 different ways:

Using the ageverif.on() method
js
```
ageverif.on('success', () => ...);
```
Using the window.addEventListener() method, with the event name prefixed by "ageverif:"
js
```
window.addEventListener('ageverif:success', () => ...);
```

Defining a function in the global scope window and passing it as a query parameter to the script (Check Script query parameters)

html

<script>window.ageverifSuccess = () => ...;</script>
<script src="https://www.ageverif.com/checker.js?id=[WEBSITE_ID]&onsuccess=ageverifSuccess" async defer></script>

'load'

Triggered when the Checker script is loaded and the ageverif object becomes available.

The first parameter is an object containing:

verified (boolean) - Current VISITOR verification status

window.addEventListener('ageverif:load', (event) => ...); // Verified status = event.detail.verified
window.ageverifLoaded = ({ verified }) => ...; // Add script query parameter ?onload=ageverifLoaded

Some bindings are not available

ageverif.on('load', ...) binding does not exist for this event as the ageverif object is will not be available at that time.

'ready'

Triggered when the Checker is visible to the VISITOR and ready to start the verification process.

ageverif.on('ready', () => ...);
window.addEventListener('ageverif:ready', () => ...);
window.ageverifReady = () => ...; // Add script query parameter ?onready=ageverifReady

'success'

Triggered when the VISITOR has been verified and the Checker is closed.

Also triggers when the VISITOR is already verified, after calling ageverif.start().

ageverif.on('success', () => ...);
window.addEventListener('ageverif:success', () => ...);
window.ageverifSuccess = () => ...; // Add script query parameter ?onsuccess=ageverifSuccess

'error'

Triggered when a fatal error occurs and the Checker is not able to initialize or proceed.

The first parameter contains the error object.

ageverif.on('error', (error) => ...);
window.addEventListener('ageverif:error', (event) => ...); // Error = event.detail.error
window.handleError = (error) => ...; // Add script query parameter ?onerror=handleError

Examples

One-line Automatic Integration

This method starts the Checker immediately when the VISITOR accesses your WEBSITE.

All content is automatically blurred until the VISITOR proves they are an adult.

html

<!DOCTYPE html>
<html lang="en">
  <head>
    ...
    <!-- Load AgeVerif Checker -->
    <script src="https://www.ageverif.com/checker.js?id=[WEBSITE_ID]"></script>
  </head>
  <body>...</body>
</html>

Start the Checker manually by clicking a button

In this example the Checker is not started automatically. Instead, a button is displayed on the WEBSITE that starts the Checker when clicked.

All content is manually blurred by the WEBSITE and unblurred when the VISITOR is verified.

html

<!DOCTYPE html>
<html lang="en">
  <head>
    ...
    <style>
      .blur {
        filter: blur(10px);
      }
    </style>
  </head>
  <body>
      <!-- Explicit image blurred by the WEBSITE -->
      <img class="blur" src="explicit_image.jpg" />

      <!-- Button to start the Checker -->
      <!-- Disabled by default, enabled when the Checker is loaded -->
      <button onclick="window.ageverif.start()" disabled>Verify your age with AgeVerif</button>

      <!-- Register functions -->
      <script>
        // Unblurs all blurred elements
        window.ageverifSuccess = function () {
          document.querySelectorAll('.blur').forEach((el) => el.classList.remove('blur'));
        };

        // Called when the Checker is loaded
        window.ageverifLoaded = function ({ verified }) {
          if (verified) {
            // Unblur the content if the VISITOR is already verified
            ageverifSuccess();
          } else {
            // Enable the button if the VISITOR is not verified
            document.querySelector('button').removeAttribute('disabled');
          }
        }
      </script>

      <!-- Load AgeVerif Checker -->
      <script src="https://www.ageverif.com/checker.js?id=[WEBSITE_ID]&nostart&onload=ageverifLoaded&onsuccess=ageverifSuccess" async defer></script>
  </body>
</html>

Integrations

JavaScript API (ageverif)

Examples

All-in-one Checker

Requirements

Normal Flow

Automatic Integration

Advanced Integration

Script query parameters for checker.js

JavaScript API

Properties

requiresVerification

verified

Methods

start()

Parameters

Returns

clear()

destroy()

on()

Parameters

Returns

off()

Parameters

Events

'load'

'ready'

'success'

'error'

Examples

One-line Automatic Integration

Start the Checker manually by clicking a button

All-in-one Checker ​

Requirements ​

Normal Flow ​

Automatic Integration ​

Advanced Integration ​

Script query parameters for checker.js ​

JavaScript API ​

Properties ​

requiresVerification ​

verified ​

Methods ​

start() ​

Parameters ​

Returns ​

clear() ​

destroy() ​

on() ​

Parameters ​

Returns ​

off() ​

Parameters ​

Events ​

'load' ​

'ready' ​

'success' ​

'error' ​

Examples ​

One-line Automatic Integration ​

Start the Checker manually by clicking a button ​

All-in-one Checker

Requirements

Normal Flow

Automatic Integration

Advanced Integration

Script query parameters for checker.js

JavaScript API

Properties

requiresVerification

verified

Methods

start()

Parameters

Returns

clear()

destroy()

on()

Parameters

Returns

off()

Parameters

Events

'load'

'ready'

'success'

'error'

Examples

One-line Automatic Integration

Start the Checker manually by clicking a button