🍎 Скрипт всплывающего окна с кодом и стилями

Задача: провести опрос посетителей на сайте.

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

Реализация: часть скрипта нашел в Интернете, остальное доработал под свои нужды.

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

*Для уменьшения раздражения пользователей это окно показывается пользователю 1 раз в месяц, если он уже заходил на сайт и закрыл или прошел опрос, то окно не показывается.

📌 Установку кода делал через https://tagmanager.google.com/: создал тег > пользовательский html > вставил код полностью > выбрал триггер активации все страницы > назвал тег > сохранил тег > опубликовал

<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.1.0/jquery.min.js"></script>
<script>
function setCookie(key, value, expiry) {
var expires = new Date();
expires.setTime(expires.getTime() + (expiry * 24 * 60 * 60 * 1000));
document.cookie = key + '=' + value + ';expires=' + expires.toUTCString();
}
function getCookie(key) {
var keyValue = document.cookie.match('(^|;) ?' + key + '=([^;]*)(;|$)');
return keyValue ? keyValue[2] : null;
}
$(document).mouseleave(function(){if(getCookie('popup') == null){ $('#cls_ctnr').show(); setCookie('popup','1','1'); }});

if( /Android|webOS|iPhone|iPad|iPod|BlackBerry|IEMobile|Opera Mini/i.test(navigator.userAgent) && getCookie('popup') == null ) {
setTimeout(function () {
$('#cls_ctnr').show();
setCookie('popup','1','1');
}, 30000)
}
</script>
<div id="cls_ctnr">
<div id="cls_pop">
<span class="cls_close" onclick="document.getElementById('cls_ctnr').style.display='none'; return false;">X</span>
<div>Помогите улучшить сайт</div>
<p>Проводим небольшой опрос, участвуете?</p>
<a target="_blank" href="ссылка страницу с формой">Да</a>
<a href="#" onclick="$('.cls_close').click(); return false" class="cls_no">Нет</a>
</div>
</div>
<style>
div#cls_pop > a {
background: #f00;
top: 21px;
position: relative;
padding: 10px 20px;
color: #fff;
margin:0 5px;
text-decoration:none;
}
div#cls_pop .cls_no{
background:#777;
}
#cls_ctnr{
display:none;
position: fixed;
left: 0;
top: 0;
width: 100%;
height: 100%;
background-color: rgba(0,0,0,0.7);
text-align: center;
z-index:9999;
}
#cls_ctnr::after {
display: inline-block;
vertical-align: middle;
width: 0;
height: 100%;
content: '';
}
#cls_pop{
padding:40px 10px 10px;
min-height:200px;
max-width:450px;
display: inline-block;
vertical-align: middle;
position:relative;
text-align: center;
background:#fff;
color:#fff;
}
#cls_pop > p {
font-size: 20px;
color: #666;
margin: 16px;
}
#cls_pop div {
margin: 0;
text-align: center;
font-size: 24px;
color: #333;
}
.cls_close{
display:block;
position:absolute;
background:#292C33;
top:0;
left:50%;
margin-left:-25px;
line-height:25px;
font-weight:bold;
width:50px;
height:25px;
text-align:center;
color:#fff;
cursor:pointer;
-webkit-border-bottom-left-radius: 50px;
-webkit-border-bottom-right-radius: 50px;
-moz-border-radius-bottomleft: 50px;
-moz-border-radius-bottomright: 50px;
border-bottom-left-radius: 50px;
border-bottom-right-radius: 50px;}
.cls_close:hover{
background:#fc0;
color:#000;}
</style>

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

P.S. Код можно изменить, поставить напрямую на сайт и прикрутить на него форму обратного звонка или что-то другое)))

Есть у Вас интересные скрипты? Поделитесь в комментариях?

https://t.me/neskromnyy_marketolog