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

В разделе Настройки → Кнопка для сайта можно получить код кнопки для сайта. С помощью этой кнопки пользователи смогут оформить подписку на Вашем сайте.

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

<!-- Senler.ru button code -->
<script src="//senler.loc/dist/web/js/senler.js?5"></script>
<script>
try {
    Senler.ButtonSubscribe("senlerBtn-1603129644");
} catch (e) {
    console.log(e);
}
</script>
<div id="senlerBtn-1603129644" data-vk_group_id="102312116" 
data-subscription_id="" data-text="" data-alt_text=""></div>

Функция Senler.ButtonSubscribe принимает следующие параметры:

Название	Тип	Описание
senlerBtnID	string	Идентификатор элемента, в котором создается кнопка. Должен быть уникальным в рамках одной страницы.
params	object	Дополнительные параметры (необязательно).

Дополнительные параметры имеют следующую структуру:

Название	Тип	Описание
completeCallback	function	Функция, которая будет вызвана после завершения ajax-запроса (вызывается позднее функций-обработчиков успешного (successCallback) или аварийного (errorCallback) завершения запроса).
successCallback	function	Функция, которая вызывается после оформления подписки.
errorCallback	function	Функция, которая вызывается после аварийного завершения запроса.

Пример кнопки

Senler.ButtonSubscribe("senlerBtnID", { 
    completeCallback: 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: #fff;
    color: #000;
}
</style> 

Мобильные устройства

На мобильных устройствах механика кнопки для подписки отличается от версии для ПК. При нажатии на кнопку открывается приложение сообщества в мобильном приложение ВКонтакте. Так сделано по следующим причинам:

• в некоторых случаях пользователи не авторизованы ВКонтакте в мобильном браузере;
• в большинстве случаев у пользователей установлено мобильное приложение ВКонтакте.

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