Сourses

Courses

Security and Compliance

GDPR Compliance

Integration

Website integration

How to Set Up Age Gate Widget for Your Website

Publish age gate widgets on sites or specific pages with content requires age verification.

Age Gate

Widget creation

1. Go to Site -> Widgets -> Age gate and click the New age gate button.

New age gate

2. Name the form and click the Next button.

New age gate

3. To create a widget based on your website style, select colors of the following website elements:

  • Main button
  • Main title
  • Background

Select colors

4. Select form style:

  • Smooth
  • Minimalist
  • Classic
  • Decorative
  • Modern

Form style

5. Click on the Next button.

6. Select the most appropriate widget appearance. You’ll be able to edit it as needed.

Widget appearance

Widget settings

Let’s consider the main features of 3 settings panels in the drag and drop editor: left, top and right.

Left settings panel

Drag basic form elements from the left panel and drop them into your widget template.

Drag and drop elements

Top settings panel

At the top are the following buttons to work with form elements:

  • Copy
  • Duplicate
  • Cut
  • Paste
  • Paste to replace

Buttons to work with form elements

By clicking on the pointing up arrow you go to the parent form element:

Go to the parent element

By clicking on the element with a text, text editing tools appear on the top:

Text editing tools

Right settings panel

Layout, Content, and General settings for mobile and desktop devices are placed on the right panel.

Layout, Content, and General settings

Layout tab

  • Text style settings — by default, the widget will use the font set on the website as the main one; to use a different font for the website, enter its name.
  • Breakpoint — specify the screen width, starting from which the display of the form switches to the mobile version; by default, this is less than 576 pixels.

Content tab

Set form appearance here: width and height, distance between elements, paddings, margins, background, etc.

Content tab

General tab

Select action on click:

  • Open URL
  • Close widget
  • Open widget page

After saving settings you’ll be redirected to Form parameters tab.

Form parameters

Edit the widget appearance and widget calling rules in this tab.

Age gate parameters

Widget calling

To edit widget calling rules, press the Edit button on the corresponding panel.

Select:

  • Display frequency;

Display frequency

  • When to display age gate;

When to display

  • To whom to display age gate;

To whom

On which pages to display age gate;

Condition cards for pages

Similar to dynamic segments builder, here you can choose pages to display the age gate.

  • You can manage the widget display using the API: by clicking on a page element or via JavaScript. If you want to use a custom launcher for your form, insert a CSS selector of the call element. To show form on some extra condition, copy the JS function below.

Conditions for displaying the widget

Posting age gate on the website

Having saved all the settings, check how visitors will see the age gate on the site. To do this, click the Test widget button.

Test widget

Enter the link to your website and click Open.

Enter the page URL

If all steps are successful, the age gate will be displayed on your website according to the specified conditions.

Displaying the form on the website

After testing the widget, publish it by clicking on the Published button, then click Save.

Publish the widget

To stop displaying the widget, click on the Unpublished button, then save changes.

To set up widget start and end dates, use the Schedule button.

The Schedule button

Analyzing form performance

Go to Site → Widgets → Particular age gate → Analytics to see the statistics on your form:

  • Views;
  • Clicks;
  • Conversion.

The following Activity dynamics visualize the same indicators on the chart. If needed, you can filter report data by date.

Analytics

Any Questions?
We’re always happy to help!
Request a Callback
Fill in the form, and our specialists will call you back as soon as possible.
Request a Callback
Chat Support
We’re waiting for your questions!
Send a Chat Message
Email
Contact the eSputnik support team
Send an Email