Adblock
detector

Как создать GDPR уведомление при помощи FlatPM — инструкция

access_time2022-02-18 mode_comment0

Привет! Для начала нам нужно сверстать сам блок GDPR уведомления:

<div class="repermissioning-form">
  <p class="repermissioning-form-title">Мы используем cookie-файлы для лучшей работы сайта для вас</p>

  <p>Пользуясь сайтом, вы даёте своё согласие на использование cookie</p>

  <button class="fpm_5_cross repermissioning-form-button">Хорошо я согласен</button>
</div>
<style>
body .repermissioning-form{max-width:100vw!important;width:480px;padding:20px;border-radius:4px;border:2px solid #d8dde1}
body .repermissioning-form p{margin:15px 0}
body .repermissioning-form-title{margin-bottom:20px;font-weight:700;font-size:1rem}
body .repermissioning-form-button{border:none;border-radius:4px;display:block;padding:14px 0 12px;width:100%;cursor:pointer;color:#fff;background-color:#3FC380;border-bottom:3px solid #00B16A;transition:all .2s ease;position:static;height:auto}
body .repermissioning-form-button:after,body .repermissioning-form-button:before{display:none}
body .repermissioning-form-button:focus{outline:none}
body .repermissioning-form-button:hover{background-color:#37b173}
</style>
<script>jQuery(function($){$('body').on('click','.repermissioning-form-button',function(){$(this).closest('.fpm_5_out').removeClass('show')})})</script>

Что может быть проще? :)

Как видно, тут сразу в HTML у нас идут стили. Это удобно можно добавить в сам плагин:

Как создать GDPR уведомление при помощи FlatPM - инструкция

Осталось дело за малым — настроить при каких условиях будет происходить вывод:

Как создать GDPR уведомление при помощи FlatPM - инструкция
Как создать GDPR уведомление при помощи FlatPM - инструкция
Как создать GDPR уведомление при помощи FlatPM - инструкция

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

Сам результат:

Как создать GDPR уведомление при помощи FlatPM - инструкция

Этот вариант не всем может подойти, давайте используем вывод сбоку (снизу, справа), чтобы не мешало нашим читателям.

Как создать GDPR уведомление при помощи FlatPM - инструкция

Результат:

Как создать GDPR уведомление при помощи FlatPM - инструкция

Всё оказалось достаточно просто!

Можете изменить текст на тот, который считаете нужным. Удачи! :)