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

Иногда тебе нужна полная кастомизация подписной страницы. Этот виджет решает твою задачу :)

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

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

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

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

Создаем подписную страницу. О том, как это сделать можно прочитать здесь.

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

Кликни на скриншот для увеличения :)

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

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

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

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

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

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

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

Своего фона у них нет :)

Будут отображены кнопки тех мессенджеров, которые выбраны в настройках мини-лендинга на первом этапе

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

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

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

Значение	Для какой кнопки будет применен шаблон
VK	ВКонтакте
FB	Facebook
TG	Telegram
INST	Instagram
WHATS	WhatsApp
EMAIL	E-mail
default	для всех

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

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

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

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

После клика на кнопку, её родительскому элементу будет добавлен класс lc-button_loading. Можно использовать его для того, чтобы пометить кнопку неактивной, или отрисовать на ней анимацию загрузки☺️

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

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

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

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

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

Код мессенджера	Имя мессенджера
VK	ВКонтакте
FB	Facebook
TG	Telegram
INST	Instagram
VIBER	Viber
EMAIL	E-mail
WHATS	WhatsApp

Если вы хотите переопределить их, допишите к тегу виджета аттрибут 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>

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

Круто, у нас получилось :)

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

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

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

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

<!-- Переопределяем названия мессенджеров в аттрибуте 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>

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

Дело сделано, заказчик доволен 😄

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

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

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

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

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

Код шаблона:

<!-- Блок кнопок -->
<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>

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

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

Код шаблона:

<!-- Блок кнопок -->
<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>
<!-- /Блок кнопок -->

Если у тебя что-то не получается, или остались вопросы - просто напиши нам.

Выбери удобный для тебя способ связи с нами тут 😊👇

💟Как задать вопрос в поддержку?