Pop-up проверки возраста: Для чего он нужен и как его добавить на свой сайт
Контент

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

21 января 2022 2 дня назад ~ 9 мин читать 21490 просмотры
оценить
Claspo Blog Pop-up для подтверждения возраста: Как добавить на свой сайт

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

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

Содержание

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

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

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

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

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

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

Добавьте подтверждение возраста на сайт бесплатно с помощью Claspo

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

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

popup_прверка возраста_шаблон 1Начать бесплатно

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

popup_прверка возраста_шаблон 2Попробуйте бесплатно

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

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

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

Метод №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

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

claspo_проверка_возраста

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

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

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

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

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

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

проверка_возраста_шаг_1

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

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

проверка_возраста_шаг_2

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

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

проверка_возраста_шаг_3

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

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

проверка_возраста_шаг_4

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

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

поверка_возраста_шаг 5

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

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

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

поверка_возраста_шаг_6_пример_1

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

поверка_возраста_шаг_6_пример_2

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

прверка_возраста_шаг_6_пример_3

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

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

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

проверка_возраста_шаг_7

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

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

проверка_возраста_шаг_8

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

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

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

создание_виджета_с_нуля_шаг_1

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

создание_виджета_с_нуля_шаг_2

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

создание_виджета_с_нуля_шаг_3

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

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

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

popup_проверка_возраста_шаблон_3
Попробовать

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

popup_проверка_возраста_шаблон_4Попробовать

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

popup_проверка_возраста_шаблон_5
Попробовать

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

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

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

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

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

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

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

Создайте свой бесплатный поп-ап для проверки возраста с помощью Claspo

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

Всё еще не пользуетесь Claspo? Давайте исправим!
Связанные шаблоны

Вас также может заинтересовать
Как создать эффективный поп-ап
Как создать эффективный поп-ап

Цель любого бизнеса в интернете — конвертировать посетителей в лидов или покупателей. Поп-апы — эффективный инструмент, который поможет добиться этой цели. Наверняка вы слышали, что всплывающие окна — небольшие поп-апы, появляющиеся в середине или любой другой части экрана, когда клиенты совершают покупки или ищут что-нибудь в интернете. Некоторые говорят, что поп-апы раздражают, но они действительно работают!  Посетители ненавидят поп-апы с бесполезной информацией. Если pop-up сообщение помогает посетителю решить какую-то проблему или дает ответ на его вопрос, то оно никогда не...

18 января 2022 7 мин читать
Поп-апы с таймером обратного отсчета: 5 эффективных примеров
Поп-апы с таймером обратного отсчета: 5 эффективных примеров

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

15 января 2022 9 мин читать
5 советов по созданию более эффективных попапов
5 советов по созданию более эффективных попапов

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

11 января 2022 8 мин читать
Как построить личный бренд с помощью попапов?
Как построить личный бренд с помощью попапов?

Как построить свой личный бренд с помощью поп-апов? Что вы думаете о поп-апах? Считаете их раздражающими, как многие пользователи по всему миру? Но все же хотите ли вы их использовать? Нам всегда было интересно, почему владельцам бизнеса не нравятся всплывающие окна, когда те появляются на других сайтах, но они все равно размещают такие же на своих.  Есть решение! Вы можете создать информативный и неназойливый поп-ап для вашего личного бренда или бизнеса. Перед этим нужно только поставить себя на место пользователей...

31 января 2022 13 мин читать
Как сократить количество брошенных корзин и завоевать сердца клиентов: 12 эффективных способов
Как сократить количество брошенных корзин и завоевать сердца клиентов: 12 эффективных способов

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

12 февраля 2022 22 мин читать
Как рассчитать коэффициент брошенных корзин и использовать его в своих интересах
Как рассчитать коэффициент брошенных корзин и использовать его в своих интересах

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

15 февраля 2022 23 мин читать

Вверх