REES46

# Рост базы подписчиков

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

# Блок подписки на веб пуши

Это простой HTML-блок c минимальным Javascript, который отображается только в случае, если посетитель сайта еще не подписан на веб-пуши.

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

<div class="subscribe">
    <div class="subscribe__title">Включить уведомления в браузере</div>
    <div class="subscribe__accent">Лучшие предложения и скидки специально для вас!</div>
    <div class="subscribe__button"><button id="r46PushButton">Включить</button></div>
</div>

.subscribe {
    display: flex;
    margin: 30px 0;
    padding: 10px 0 15px;
    align-items: center;
    border: 1px solid rgba(0,0,0,.15);
    border-left: 0;
    border-right: 0;
    flex-wrap: wrap;
}
.subscribe__title {
    width: 100%;
    margin-bottom: 15px;
    font-size: 24px;        
}
.subscribe__accent {
    color: #3eaf7c;
    font-weight: 500;
}
.subscribe__button {
    margin-left: auto;        
}
.subscribe__button button {
    padding: 5px 15px;
    background-color: transparent;
    border: 1px solid #3eaf7c;
    border-radius: 15px;
    color: #3eaf7c;
    cursor: pointer;
    font-size: 14px;
    outline-color: transparent;
    transition: .3s;
}
.subscribe__button button:hover {
    background: #3eaf7c;
    color: white;
}
.subscribe__button button:active {
    background: #329066;
    border-style: solid;
}
@media (max-width: 840px) {
    .subscribe__button {
        width: 100%;
        margin-top: 15px;
    }
    .subscribe__button button {
        width: 100%;
        padding: 10px;
        border-radius: 30px;
    }
}

let button = document.querySelector('#r46PushButton');
button.addEventListener('click', function() {
    r46('subscription', 'web_push_subscribe', console.log('success'));  
});

# Блок подписки на триггер

Эта форма нужна для того, чтобы пользователь мог подписаться на триггеры "Товар снова в наличии" и "Цена на товар снижена"

Разместите его на странице товара, либо на странице списка товаров, если форма показывается в модальном окне.

<div class="form">
	<form id="r46FormTrigger">
		<input type="email" name="email" required="required" placeholder="Ваш E-mail*">
		<input type="submit" value="Подписаться">
		<input type="hidden" name="item" value="12345">
		<input type="hidden" name="price" value="100">
	</form>
</div>

.form {
    margin: 30px 0;
    padding: 10px 0 15px;
    border: 1px solid rgba(0,0,0,.15);
    border-left: 0;
    border-right: 0;
}
.form form {
    width: 320px;
}
.form form input {
    margin-bottom: 10px;
    padding: 5px 10px;
    border-radius: 15px;
    border: 1px solid #3eaf7c;
    text-align: center;
    transition: .3s;
    width: 100%;
}
.form form input::placeholder {
    transition: .3s;
}
.form form input:focus::placeholder {
    opacity: 0;
}
.form form input[type="submit"] {
    background-color: transparent;
    border: 1px solid #3eaf7c;
    color: #3eaf7c;
}
.form form input[type="submit"]:hover {
    background-color: #3eaf7c;
    color: white;
}

let form = document.querySelector('#r46FormTrigger');
form.addEventListener('submit', function(evt) {
	evt.preventDefault();
	let email = form.querySelector('input[name="email"]').value,
			item = form.querySelector('input[name="item"]').value,
			price = form.querySelector('input[name="price"]').value;
	
	r46('subscribe_trigger', 'product_available', {email: email, item: item});
});

# JavaScript сниппет для вызова подписки на web-push уведомления с проверкой подписки

r46('subscription', 'web_push_supported', function(e) {
    if( e ) {
        r46('subscription', 'web_push_subscribed', function(e) {
            const getCookie = name => Object.assign({}, ...document.cookie.split(';').filter(s => s).map(cookie => cookie.split('=')).map(([key, value]) => ({ [key.trim()]: (value+'').trim() })))[name];
            if( !e && localStorage.getItem('web_push_subscribe') != getCookie('rees46_session_code') ) {
                r46('subscription', 'web_push_subscribe');
                localStorage.setItem('web_push_subscribe', getCookie('rees46_session_code'));
            }
        });
    }
});

# JavaScript сниппет для вызова подписки на web-push уведомления без проверки подписки

r46('subscription', 'web_push_supported', function(e) {
  if( e ) {
    r46('subscription', 'web_push_subscribed', function(e) {
      if( !e ) {
        r46('subscription', 'web_push_subscribe', console.log('success'));
      }
    });
  }
});

← Мобильный пуш-карусель →