# Кнопки мессенджеров на сайт | 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 %}


---

# Agent Instructions: Querying This Documentation

If you need additional information that is not directly available in this page, you can query the documentation dynamically by asking a question.

Perform an HTTP GET request on the current page URL with the `ask` query parameter:

```
GET https://docs.leadconverter.su/mini-lendingi-or-podpisnye-stranicy/knopki-messendzherov-na-sait-or-js-vidzhet.md?ask=<question>
```

The question should be specific, self-contained, and written in natural language.
The response will contain a direct answer to the question and relevant excerpts and sources from the documentation.

Use this mechanism when the answer is not explicitly present in the current page, you need clarification or additional context, or you want to retrieve related documentation sections.