> For the complete documentation index, see [llms.txt](https://docs.leadconverter.su/llms.txt). Markdown versions of documentation pages are available by appending `.md` to page URLs; this page is available as [Markdown](https://docs.leadconverter.su/mini-lendingi-or-podpisnye-stranicy/knopki-messendzherov-na-sait-or-js-vidzhet.md).

# Кнопки мессенджеров на сайт | JS-Виджет

На нашей практике этот виджет чаще всего используется в двух случаях:

1 - ты хочешь встроить кнопки мессенджеров на свой сайт, но при этом тебе нужно использовать свой дизайн.

2 - ты хочешь чтобы кнопки были "частью страницы", а не встроенными через iframe, как в случае с большинством других виджетов. Например, чтобы повесить на кнопки дополнительные JavaScript события систем аналитики.

### Встраиваем виджет в свой сайт

Создаем подписную страницу. О том, как это сделать можно [прочитать здесь](/mini-lendingi-or-podpisnye-stranicy.md).

Сохраняем её. Далее переходим на вкладку "Результат" и разворачиваем пункт "JS-виджет".

![Кликни на скриншот для увеличения :)](/files/eWIIEBAGKH0QTkBJSfSS)

Копируем скрипт виджета. Он идет первым на вкладке JS-виджет. Он одинаковый для всех виджетов, можешь скопировать его из личного кабинета, или отсюда :point\_down:

```
<script async src="https://leadconverter.ru/widget.js"></script>
```

И вставляем его на свой сайт перед закрывающим тегом `</body>`

После этого копируем тег `div` из личного кабинета. Он индивидуален для каждого мини-лендинга, скопируй его из личного кабинета, как показано на скриншоте

![](/files/qwVfLIBAiXxpgvjdMs6L)

И вставляем его в наш сайт, в то место, где хотим отображать кнопки мессенджеров.

На этом подключение виджета завершено, можно смотреть результат на сайте. Кнопки будут отображены в стандартном дизайне :)

По умолчанию кнопки выглядят так:

![Своего фона у них нет :)](/files/LoH9p6AJL3JwzaXN0TxX)

{% hint style="info" %}
Будут отображены кнопки тех мессенджеров, которые выбраны в настройках мини-лендинга на первом этапе&#x20;
{% endhint %}

### Настраиваем свой дизайн кнопок

Для того, чтобы переопределить html-код кнопки, необходимо использовать тег `template` с атрибутом `data-button-inner-template`. Этот тег необходимо поместить внутрь виджета, к которому мы хотим его применить.&#x20;

Значение атрибута `data-button-inner-template` определяет, к какой конкретно кнопке будет применен этот шаблон. У него могут быть следующие значения:

<table><thead><tr><th width="150">Значение</th><th>Для какой кнопки будет применен шаблон</th></tr></thead><tbody><tr><td>VK</td><td>ВКонтакте</td></tr><tr><td>FB</td><td>Facebook</td></tr><tr><td>TG</td><td>Telegram</td></tr><tr><td>INST</td><td>Instagram</td></tr><tr><td>WHATS</td><td>WhatsApp</td></tr><tr><td>EMAIL</td><td>E-mail</td></tr><tr><td>default</td><td>для всех</td></tr></tbody></table>

Например, мы хотим переопределить шаблон для всех кнопок. Но кнопка Instagram у нас имеет особенную структуру кода.&#x20;

В таком случае мы можем использовать такую запись:

```
<div data-lgt-id="здесь_идентификатор_подписной_страницы">
  <template data-button-inner-template="default">
    <!-- здесь код кнопки по умолчанию -->
  </template>
  <template data-button-inner-template="INST">
    <!-- здесь код кнопки для Instagram -->
  </template>
</div>
```

Конечно, таким образом можно задать индивидуальный код для каждой кнопки :)

{% hint style="info" %}
После клика на кнопку, её родительскому элементу будет добавлен класс `lc-button_loading. Можно использовать его для того, чтобы пометить кнопку неактивной, или отрисовать на ней анимацию загрузки`:relaxed:
{% endhint %}

### Доступные переменные

Для удобства работы шаблонизатор поддерживает несколько переменных, которые вы можете использовать. Ниже представлен их список:

| Переменная                | Описание                                                                                                                                                                                                                                        |
| ------------------------- | ----------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- |
| {{messenger\_name}}       | <p>Выводит имя мессенджера. </p><p>Имена могут быть переопределены с помощью атрибута data-messenger-names</p>                                                                                                                                  |
| {{messenger\_icon\_path}} | <p>Путь к иконке мессенджера на нашем сервере. </p><p>Иконки имеют формат SVG и белый цвет. </p><p>Так же необходимо задать ширину изображения.</p><p>Пример:</p><p><code>\<img style="width: 20px" src="{{messenger\_icon\_path}}"></code></p> |
| {{messenger\_code}}       | Код мессенджера (VK, FB...)                                                                                                                                                                                                                     |

### Имена мессенджеров

В каждую кнопку с помощью переменной {{messenger\_name}} можно подставить имя мессенджера. По умолчанию будут выведены следующие имена:

<table><thead><tr><th width="150">Код мессенджера</th><th>Имя мессенджера</th></tr></thead><tbody><tr><td>VK</td><td>ВКонтакте</td></tr><tr><td>FB</td><td>Facebook</td></tr><tr><td>TG</td><td>Telegram</td></tr><tr><td>INST</td><td>Instagram</td></tr><tr><td>VIBER</td><td>Viber</td></tr><tr><td>EMAIL</td><td>E-mail</td></tr><tr><td>WHATS</td><td>WhatsApp</td></tr></tbody></table>

Если вы хотите переопределить их, допишите к тегу виджета аттрибут `data-messenger-names.` В его значение передайте JSON-объект в формате {"код\_мессенджера":"Имя мессенджера"}

Пример:

```
<div 
    data-lgt-id="идентификатор_минилендинга" 
    data-messenger-names="{'TG': 'Телега', 'FB': 'ФБ'}"
></div>
```

### Рассмотрим пример

Предположим, что в нашем дизайне каждая кнопка имеет такой стиль:

```
<style>
  .my-button {
    padding: .6em 1em;
    border: 2px solid #444;
    background: #333;
    display: inline-flex;
  }
  .my-button__caption {
    color: #fff;
    margin-left: .5em;
  }
</style>
```

Чтобы применить его к виджету используем такую конструкцию

```
<div data-lgt-id="здесь_идентификатор_подписной_страницы">
  <!-- Переопределяем шаблон всех кнопок -->
  <template data-button-inner-template="default">
    <!-- этим кодом будет заменена каждая кнопка виджета -->
    <div class="my-button">
      <!-- используем переменную с иконкой мессенджера -->
      <img style="width: 20px" src="{{messenger_icon_path}}" alt="">
    </div>
  </template>
```

Взглянем на результат:

![Круто, у нас получилось :)](/files/srJlByuvJvb6Ghx88cMO)

Отлично! Заказчик доволен :)

### Тук-тук. Кто там? Правки!

![](/files/Cp1syWqrAsXyC0GBv2RE)

Теперь наш заказчик хочет, чтобы у каждого мессенджера выводилось название. А у инстаграма не выводилось. Согласен, требование довольно странное, но... Ещё все названия всех мессенджеров должны быть на русском.&#x20;

Приступим к внесению изменений :)

```
<!-- Переопределяем названия мессенджеров в аттрибуте data-messenger-names -->
<div 
  data-lgt-id="здесь_идентификатор_подписной_страницы" 
  data-messenger-names="{'TG': 'Телеграм', 'FB': 'Фэйсбук', 'VIBER':'Вайбер'}"
>
  <!-- Переопределяем шаблон для всех кнопок -->
  <template data-button-inner-template="default">
    <!-- этим кодом будет заменена каждая кнопка виджета -->
    <div class="my-button">
      <!-- используем переменную с иконкой мессенджера -->
      <img style="width: 20px" src="{{messenger_icon_path}}" alt="">
      <!-- выводим название мессенджера -->
      <span class="my-button__caption">{{messenger_name}}</span>
    </div>
  </template>
  <!-- Переопределяем шаблон кнопки инстаграма -->
  <template data-button-inner-template="INST">
    <!-- этим кодом будет заменена кнопка инстаграма-->
    <div class="my-button">
      <!-- используем переменную с иконкой мессенджера -->
      <img style="width: 20px" src="{{messenger_icon_path}}" alt="">
      <!-- а здесь, согласно требованию тех. задания -->
      <!-- мы не выводим название мессенджера -->
    </div>
  </template>
</div>
```

Ну и конечно же посмотрим, что получилось в результате:

![Дело сделано, заказчик доволен ](/files/qJWe9Qb8rXXnmxGwgOcg)

### Типовые шаблоны

По нашим наблюдениям некоторые шаблоны вы используете чаще остальных. Частый запрос - добавить название мессенджера к стандартному виду кнопок.&#x20;

Ниже будут приведен код таких шаблонов, и результат, как в итоге он будет выглядеть. Просто скопируй тот, что тебе нужен :)

#### Вывод названия мессенджера справа от иконки

Выглядит так:

![](/files/IAFtR6Kvbw1VCXOtx5L3)

Код шаблона:

```
<!-- Блок кнопок -->
<div class="button">
  <style>
    .text-center {
      text-align: center;
    }
    .my-button {
      display: inline-flex;
      align-items: center;
    }
    .my-button__caption {
      color: white;
      margin-left: .5em;
    }
  </style>
    <div
            data-lgt-id="ВАШ_ИД_МИНИЛЕНДИНГА"
            data-messenger-names="{'TG': 'Телеграм', 'VIBER':'Вайбер'}"
    >
        <!-- Переопределяем шаблон для всех кнопок -->
        <template data-button-inner-template="default">
            <!-- этим кодом будет заменена каждая кнопка виджета -->
          <div style="min-width:60px" class='lc-button__default-inner lc-button__default-inner_{{messenger_code}} '>
            <div class="text-center my-button" style="margin-bottom: .3em">
              <img class="lc-button__img" src="{{messenger_icon_path}}" width='40px'>
              <span class="my-button__caption text-center">{{messenger_name}}</span>
            </div>
          </div>
        </template>
    </div>
</div>
<!-- /Блок кнопок -->

<script async src="https://leadconverter.ru/widget.js"></script>


```

#### Вывод названия мессенджера под иконкой

Выглядит так:

![](/files/ls4OnKOQgSPQ5fb8BTec)

Код шаблона:

```
<!-- Блок кнопок -->
<div class="button">
    <!-- Переопределяем названия мессенджеров в аттрибуте data-messenger-names -->
  <style>
    .my-button__caption {
      color: white;
    }
    .text-center {
      text-align: center;
    }
  </style>
    <div
            data-lgt-id="ВАШ_ИД_МИНИЛЕНДИНГА"
            data-messenger-names="{'TG': 'Телеграм', 'VIBER':'Вайбер'}"
    >
        <!-- Переопределяем шаблон для всех кнопок -->
        <template data-button-inner-template="default">
            <!-- этим кодом будет заменена каждая кнопка виджета -->
          <div style="min-width:70px" class='lc-button__default-inner lc-button__default-inner_{{messenger_code}} '>
            <div class="text-center" style="margin-bottom: .3em">
              <img class="lc-button__img" src="{{messenger_icon_path}}" width='40px'>
            </div>
            <div class="text-center">
              <span class="my-button__caption text-center">{{messenger_name}}</span>
            </div>
          </div>
        </template>
    </div>
</div>
<!-- /Блок кнопок -->
```

{% hint style="warning" %}
Если у тебя что-то не получается, или остались вопросы - просто напиши нам.

Выбери удобный для тебя способ связи с нами тут :blush::point\_down:&#x20;
{% endhint %}

{% content-ref url="/pages/-MasAPNcg291uNezFqb4" %}
[Как задать вопрос в поддержку?](/kak-zadat-vopros-v-podderzhku.md)
{% endcontent-ref %}