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

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

21 января 2022 12 дней назад ~ 9 мин читать 11534 просмотры
оценить
Claspo Blog Popup для подтверждения возраста: Как добавить на свой сайт

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

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

Содержание

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

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

Готовые к использованию попап шаблоны для подтверждения возраста от 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? Давайте исправим!
Связанные шаблоны

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

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

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 мин читать

Вверх

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