Popup для подтверждения возраста: Как добавить на свой сайт

Важность соблюдения возрастных ограничений на веб-сайтах, содержащих конфиденциальную информацию или определенную продукцию, не может быть переоценена. Будь то интернет-магазин алкогольной продукции, табачных изделий или контента для взрослых, или же стремление защитить несовершеннолетних от доступа к нежелательному контенту, необходимо установить всплывающее окно для подтверждения возраста на вашем сайте.

Такой инструмент может стать залогом сохранения вашей репутации и успешности бизнеса. В этой статье мы рассмотрим, как работают попапы подтверждения возраста на сайтах, обозначим различные виды всплывающих окон для этой цели и дадим рекомендации по их установке — как со знанием программированием, так и без.

Что такое подтверждение возраста?

Подтверждение возраста на сайте — это специальный виджет, представленный в форме всплывающего окна при загрузке страницы, который определяет возраст посетителя. Этот инструмент поможет сделать ваш контент доступным для лиц, достигших совершеннолетия.

Начать бесплатно

Сайты, где обычно используют такие ограничения, включают в себя интернет-магазины с табачной продукцией и алкоголем, платформы для стриминга, онлайн-кинотеатры, социальные сети, азартные игры и игровые онлайн-сервисы.

Попробуйте бесплатно

Первая причина применения попапа для подтверждения возраста на сайте — защита детей от доступа к контенту и товарам для взрослых. Вторая причина заключается в том, что, имея дело с продукцией, где возраст имеет значение, вы должны соблюдать законы и правила, установленные правовыми учреждениями в вашем регионе. Запрашивая подтверждение возраста у пользователей перед предоставлением доступа к такому контенту, вы делаете интернет пространство безопаснее.

Как добавить подтверждение возраста на сайт?

В основном, существует два способа для этого. Один подразумевает напрямую работу с кодом, тогда как другой предлагает использовать готовые шаблоны, предоставляемые различными сервисами, без необходимости программирования.

Метод №1. Работа с кодом

Заглянув в интернет, вы быстро обнаружите множество доступных бесплатных HTML-шаблонов, разработанных с целью помочь владельцам сайтов обеспечить безопасность для несовершеннолетних пользователей и самих себя. Если у вас есть базовые навыки работы с кодом и вы ищите бесплатное решение для подтверждения возраста, этот метод может сработать. Бесплатные шаблоны кода для добавления подтверждения возраста доступны в онлайн-сообществах для тестировщиков и на форумах для программистов.

1. Бесплатный HTML-код для подтверждения возраста

<div id="age-verify">
<div class="window">
  <span class="title">Are you over 18?</span>
  <span>To visit our website, you must be of legal drinking age.</span>
  <button class="yes" onclick="overAge()">Yes</button>
  <button class="no" onclick="underAge()">No</button>
  <div class="underBox">
    <span class="title">Sorry!</span>
    <span>You need to be at least 18 to visit our website.</span>
    <button class="back" onclick="goBack()">Go Back</button>
  </div>
<span>
</div>
</div>

2. Бесплатный CSS для подтверждения возраста

$font-stack: 'Source Sans Pro', sans-serif;
$transition: 500ms;
$window-width: 400px;
$window-height: 250px;
$button-color: #ED6A5A;
#age-verify {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background-color: rgba(#000, 0.6);
  transition: $transition;
  .window {
    position: absolute;
    top: 50%;
    left: 50%;
    width: $window-width;
    height: $window-height;
    overflow: hidden;
    padding: 40px;
    margin-left: -($window-width/2);
    margin-top: -($window-height/2);
    background-color: #fff;
    border:6px solid $button-color;
    box-sizing: border-box;
    box-shadow: 0 20px 60px rgba(#000,0.2);
    transition: $transition;
    span {
      display: block;
      text-align: center;
      margin-bottom: 10px;
      font-family: $font-stack;
      &.title {
        color: $button-color;
        font-size: 24px;
      }
    }
    button {
      border: 0;
      margin: 0;
      padding: 0;
      width:48%;
      height:60px;
      color:#FFF;
      font-size: 18px;
      background-color: $button-color;
      margin-top:20px;
      font-family: $font-stack;
      transform:scale(1);
      transition: .2s;
      &.back {
        display:block;
        float:none;
        margin:auto;
        background-color: #fff;
        color:$button-color !important;
        margin-top:20px;
      }
      &.yes {
        float:left;
      }
      &.no {
        float:right;
      }
      &:hover {
        transform:scale(1.1);
        box-shadow: 0 20px 60px rgba(#000,0.2);
        background-color: lighten($button-color,10%);
      }
    }
    .underBox {
      position:absolute;
      width: $window-width;
      height: $window-height;
      padding: 40px;
      top:100%;
      left:0;
      right:0;
      background-color: $button-color;
      transition: $transition;
      box-sizing:border-box;
      * {
        color:#FFF !important;
      }
    }
  }
  &.hidden {
    opacity:0;
    visibility: hidden;
    .window {
      transform:scale(0.5);
    }
  }
  &.under {
    .window .underBox {
      top:0%;
    }
  }
}

3. Бесплатный JavaScript для подтверждения возраста

overAge = function () {
  $('#age-verify').addClass('hidden');
}
underAge = function () {
  $('#age-verify').addClass('under');
}
goBack = function () {
    window.history.back();
}

Если вы не знакомы с программированием, не собираетесь привлекать разработчиков к процессу создания попапов или не хотите выполнять дополнительную работу, существует множество готовых решений, которые предоставляют попап сервисы.

Метод №2. Добавление подтверждения возраста на сайт с помощью попап сервисов

Если вы ищете готовое решение для добавления подтверждения возраста на свой веб-сайт, вы можете выбрать один из нескольких попап сервисов.

Вы можете добавить всплывающее окно на свой сайт, используя разные сервисы. Давайте разберемся, как это сделать с помощью редактора Claspo. У вас есть возможность выбрать готовый шаблон из библиотеки или создать новый виджет с нуля.

Рассмотрим первый способ. Итак, как добавить проверку возраста на сайт?

Шаг 1. Вход на платформу

Сначала войдите на сайт с использованием вашей электронной почты. Затем нажмите кнопку «Новый виджет». Переходим к выбору шаблонов. Используйте фильтры для удобства выбора.

Первый фильтр — это цель использования, их всего несколько:

• сбор информации о пользователях;
• продвижение специальных акций;
• сбор email-адресов;
• информирование пользователей.

Выбрав один из этих пунктов, система предложит вам шаблоны, соответствующие вашим критериям.

Шаг 2. Выберите макет

Второй фильтр — макет. На данный момент доступно 6 типов.

Шаг 3. Выберите нишу

Следующий фильтр — сфера. Здесь вы можете выбрать нишу вашего проекта. Это может быть Бизнес, Благотворительность, Электроника, Развлечения и многие другие.

Шаг 4. Выберите тему

Следующий фильтр — это тема: День отца, Всемирный день окружающей среды, Весна и Лето.

Шаг 5. Редактируйте виджет

Чтобы перейти к редактированию виджета, выберите его. Вы можете посмотреть, как виджет отображается в мобильной и настольной версиях, и выбрать лаунчер, открывающий эту форму.

Шаг 6. Выберите шаблон и вернитесь в редактор

В редакторе доступно несколько блоков:

• текстовый блок, который можно перетащить и разместить в нужном месте, а также удалить;
• блок, внутри которого можно разместить сразу несколько элементов и выровнять их по вертикали и горизонтали;
• картинка, которую можно загрузить из встроенной библиотеки или компьютера;
• плавающее изображение;
• кнопка, которую можно настроить.

Измените ширину и высоту виджета.

Вы также можете выбрать расположение других элементов, установить стиль контента и распространить его на все варианты в настольной и мобильных версиях. Есть возможность размещать внутренние элементы по горизонтали или по вертикали и выбирать расстояние между элементами.

Шаг 7. Выберите способ срабатывания виджета

Вы можете нажать на предварительный просмотр, чтобы увидеть, как виджет будет отображаться на сайте. Также, есть возможность выбрать статусы виджетов, язык, отображение на разных устройствах и размер окна. Это может быть фиксированный размер или размер устройства.

Затем сохраните виджет и перейдите к запуску виджета. Выберите «Частота отображения» и «Когда отображать виджет». Далее вы можете подключить размещение виджета с помощью API. Чтобы выбрать другой вариант, обратитесь в службу поддержки Claspo. Вы также можете выбрать Интеграции.

Шаг 8. Проверьте результат

После сохранения вы увидите свой виджет в библиотеке. Для его отображения вам необходимо разместить виджет на своем сайте. Вам не обязательно размещать на сайте код со скриптом, поскольку это увеличивает скорость его загрузки. Все коды будут расположены на серверах Claspo.

Как создать виджет с нуля?

Шаг 1. Вход на платформу

Точно так же, как и ранее, вы регистрируетесь, но теперь выбираете из готовых предложенных решений.

Шаг 2. Напишите заголовок и обычный текст

Шаг 3. Добавьте блоки, доступные в редакторе

Наконец, выберите способ срабатывание виджета и проверьте результат.

Готовые к использованию попап шаблоны для подтверждения возраста от Claspo

Благодаря множеству готовых шаблонов Claspo, легко выбрать шаблон для проверки возраста на сайте, который соответствует вашим целям и вкусам.

Попробовать

Бесплатный попап конструктор Claspo использует простую схему перетаскивания для создания информативных и ценных форм и сообщений.

Попробовать

Если вы не знакомы с программированием, не собираетесь привлекать разработчиков к процессу создания всплывающих окон или не хотите выполнять дополнительную работу, существует множество попап сервисов, которые предоставят вам готовые шаблоны для установки подтверждения возраста на ваш сайт.

Попробовать

Когда требуется установить подтверждение возраста на сайт?

Проверка возраста необходима для веб-сайтов, предлагающих товары, такие как алкоголь и сигареты, видеоконтент только для взрослых, онлайн-игры и другое. Распространение этих товаров и соответствующий контент регулируются законами, установленными государственными учреждениями.

Итак, вот два основных случая, в которых вам обычно необходимо установить подтверждение возраста на своем веб-сайте:

1. Вы распространяете контент или товары, не предназначенные для несовершеннолетних.
2. Законодательство вашей страны требует подтверждения возраста.

Например, в США продажа табачных изделий (в том числе кальянов и электронных сигарет) потребителям до 21 года запрещена Управлением по контролю за продуктами и лекарствами (FDA). Чтобы узнать, как соблюдать эти правила, ритейлеры, работающие в этой нише, могут проверить подробную информацию на официальном сайте FDA.

Более того, возможно, потребуется пересмотреть простой попап для проверки возраста, чтобы он соответствовал нормам вашей ниши. В большинстве штатов США при покупке алкогольных напитков у потребителя требуют предъявить действительное удостоверение личности государственного образца, подтверждающее его возраст.

Мир онлайн-развлечений ничем не отличается. В США потребление онлайн-контента пользователями в возрасте до 13 лет ограничено Правилом Закона о защите конфиденциальности детей в Интернете (COPPA). Аналогичные ограничения наложены в Общем регламенте ЕС по защите данных (GDPR). Оба нормативно-правовые акты ограничивают сбор личной информации несовершеннолетних без согласия их родителей.

Виды попапов для подтверждения возраста на сайте

Существует несколько попапов для проверки возраста, и они варьируются начиная с обычной проверки даты рождения до более продвинутых методов, таких как распознавание лиц на основе искусственного интеллекта.

Обычное всплывающее окно подтверждения возраста обычно выглядит следующим образом.

Пример обычного попапа для проверки возраста

Пример креативного попапа для проверки возраста

В зависимости от времени и места проверка возраста на сайте может отображаться:

• на лендинговой странице;
• на странице оплаты.

Исходя из требований вашей сферы и местных нормативно-правовых норм вы можете запросить только дату рождения пользователя или личные данные, такие как адрес, или же потребовать загрузить фото удостоверения личности, как показано в примере ниже.

Пример попапа с фото ID для подтверждения возраста

Более сложные способы ограничить доступ несовершеннолетних к вашему веб-сайту включают проверку кредитной карты.

Независимо от того, какой метод проверки возраста вы выберете, убедитесь, что в вашей Политике конфиденциальности четко указана цель такого сбора данных.

Примеры попапов для подтверждения возраста

В этой статье мы рассматриваем именно попапы для проверки возраста. Поэтому, мы собрали примеры попапов для подтверждения возраста, используемые на так называемых сайтах только для взрослых.

Пример попапа для подтверждения возраста

Если вы решите установить кнопки для взрослых и несовершеннолетних, вы сможете перекрасить их в свои цвета. Текст уведомления можно изменить, как и размер шрифта.

Пример попапа для подтверждения возраста

Пример попапа для подтверждения возраста

Вы можете проверить возраст посетителя, запросив только год рождения. Виджет автоматически рассчитает возраст посетителя. Содержимое сайта будет скрыто за фоновым изображением во время проверки, пока пользователь не подтвердит, что он достиг совершеннолетия.

Пример попапа для подтверждения возраста

Пример попапа для подтверждения возраста

Нет необходимости спрашивать у пользователей их точный возраст. Можно просто добавить две кнопки: да или нет.

Пример попапа для подтверждения возраста

Пример попапа для подтверждения возраста

Как видите, разные типы всплывающих окон для проверки возраста обычно передают одну и ту же идею. Как правило, основные различия сводятся к полноте текста (упоминание или отсутствие Условий использования и Политики конфиденциальности, предоставления дополнительной информации для родителей и т. д.), стиля макета всплывающего окна и элементов его пользовательского интерфейса (кнопок и флажков).

Как использовать проверку возраста, чтобы избежать проблем?

Проверка возраста обязательная, если вы работаете в сфере, которая требует этого и стремитесь создать свой веб-сайт в соответствие с законами и правилами, изданными юридическими учреждениями. Проверка возраста ваших посетителей может происходить, когда они начинают просмотр или собираются оформить заказ. Нарушение этих правил может повлечь за собой штраф или даже тюремное заключение.

Попапы для проверки возраста широко используются для ограничения доступа несовершеннолетних пользователей к вашему веб-сайту. Такие всплывающие окна обычно передают одну и ту же идею: предупреждают клиентов о возрастных ограничениях, введенных на вашем сайте. В зависимости от ваших предпочтений и официальных требований местных властей вы можете предоставить всплывающее окно для проверки возраста с дополнительной информацией для родителей или предоставить ссылку на ваши Условия использования.

Добавляя проверку возраста на веб-сайт, вы можете столкнуться с решениями, требующими программирования, а также с готовыми шаблонами. Чтобы сделать правильный выбор, проанализируйте свои цели и то, как каждое из доступных решений поможет вам их достичь.