Кнопка для сайта

В разделе группы «Настройки» → «Кнопка для сайта» можно получить код кнопки для оформления подписки. Подписчики смогут оформить подписку прямо на Вашем сайте.

Код кнопки выглядит следующим образом:

<script>!window.jQuery && document.write('<script src="//code.jquery.com/jquery-3.2.1.min.js"><\/script>');</script><script src="//senler.ru/web/js/senler.js?2"></script><script type="text/javascript">try {Senler.ButtonSubscribe("senlerBtnID");} catch (e) {}</script><div id="senlerBtnID>" data-vk_group_id="111" data-subscription_id="" data-text="" data-alt_text=""></div>

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

Уведомления и их использование

Кнопка поддерживает 4 уведомления:

Senler.ButtonSubscribe("senlerBtnID", { 
    completeCallback: function (el) { 
        console.log('Запрос пришел успешно'); 
    }, 
    cancelCallback: function (el) { 
        console.log('Пользователь отписался'); 
    }, 
    successCallback: function (el) { 
        console.log('Пользователь подписался'); 
    }, 
    errorCallback: function (el, jqXHR, textStatus, errorThrown) { 
        console.log('Ошибка при запросе'); 
    } 
});

Функции можно использовать для достижения целей различных метрик (Яндекс Метрика, Google Analytics и другие), например:

Senler.ButtonSubscribe("senlerBtnID", { 
    successCallback: function (el) { 
        // console.log('Пользователь подписался'); 
        ga('send', 'event', 'Button', 'click', 'subscribe'); 
        ym(YM_ID, 'reachGoal', 'subscribe'); 
    }
});

где YM_ID — номер счетчика в Яндекс.Метрике, subscribe — идентификатор цели.

Собственный стиль кнопки

Определить собственный стиль кнопки подписки можно следующим образом на странице сайта:

<style> 
.senler.senler-btn { 
    background-color: green; /* цвет фона */ 
    font-size: 21px; /* размер шрифта */ 
    color: #fff; /* цвет шрифта */ 
    padding: 20px 10px; /* отступы */ 
} 
.senler.senler-btn.senler-btn-alt { 
    background-color: yellow; 
    color: gray; 
} 
</style> 

Полезные материалы

​