Кнопки мессенджеров на сайт | 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
TG
Telegram
INST
WHATS
default
для всех
Например, мы хотим переопределить шаблон для всех кнопок. Но кнопка Instagram у нас имеет особенную структуру кода.
В таком случае мы можем использовать такую запись:
<div data-lgt-id="здесь_идентификатор_подписной_страницы">
<template data-button-inner-template="default">
<!-- здесь код кнопки по умолчанию -->
</template>
<template data-button-inner-template="INST">
<!-- здесь код кнопки для Instagram -->
</template>
</div>
Конечно, таким образом можно задать индивидуальный код для каждой кнопки :)
Доступные переменные
Для удобства работы шаблонизатор поддерживает несколько переменных, которые вы можете использовать. Ниже представлен их список:
{{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
TG
Telegram
INST
VIBER
Viber
WHATS
Если вы хотите переопределить их, допишите к тегу виджета аттрибут 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>
<!-- /Блок кнопок -->
Если у тебя что-то не получается, или остались вопросы - просто напиши нам.
Выбери удобный для тебя способ связи с нами тут 😊👇
Last updated
Was this helpful?