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

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

{% hint style="warning" %}
**Внимание!** На данный момент кнопка не работает с платными подписками.
{% endhint %}

![Кнопка для подписки на сайте](https://content.gitbook.com/content/ZN10WvcXgl30afEjLBp4/blobs/mhZbxzzbUUag0stCR75I/image.png)

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

```markup
<!-- 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 | Функция, которая вызывается после аварийного завершения запроса.                                                                                                                      |

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

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

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

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

где \
YM\_ID — номер счетчика в Яндекс.Метрике, \
subscribe — идентификатор цели.&#x20;

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

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

```markup
<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> 
```

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

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

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

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

{% embed url="<https://yandex.ru/support/metrica/>" %}

{% embed url="<https://support.google.com/analytics#topic=3544906>" %}