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

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

Внимание! С помощью кнопки для сайта можно только подписаться, нельзя отписаться.

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

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

<!-- 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>

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

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

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

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

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