LeadConverter
Search…
Кнопки мессенджеров на сайт | JS-Виджет
Иногда тебе нужна полная кастомизация подписной страницы. Этот виджет решает твою задачу :)
На нашей практике этот виджет чаще всего используется в двух случаях:
1 - ты хочешь встроить кнопки мессенджеров на свой сайт, но при этом тебе нужно использовать свой дизайн.
2 - ты хочешь чтобы кнопки были "частью страницы", а не встроенными через iframe, как в случае с большинством других виджетов. Например, чтобы повесить на кнопки дополнительные JavaScript события систем аналитики.

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

Создаем подписную страницу. О том, как это сделать можно прочитать здесь.
Сохраняем её. Далее переходим на вкладку "Результат" и разворачиваем пункт "JS-виджет".
Кликни на скриншот для увеличения :)
Копируем скрипт виджета. Он идет первым на вкладке JS-виджет. Он одинаковый для всех виджетов, можешь скопировать его из личного кабинета, или отсюда
👇
1
<script async src="https://leadconverter.ru/widget.js"></script>
Copied!
И вставляем его на свой сайт перед закрывающим тегом </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 у нас имеет особенную структуру кода.
В таком случае мы можем использовать такую запись:
1
<div data-lgt-id="здесь_идентификатор_подписной_страницы">
2
<template data-button-inner-template="default">
3
<!-- здесь код кнопки по умолчанию -->
4
</template>
5
<template data-button-inner-template="INST">
6
<!-- здесь код кнопки для Instagram -->
7
</template>
8
</div>
Copied!
Конечно, таким образом можно задать индивидуальный код для каждой кнопки :)
После клика на кнопку, её родительскому элементу будет добавлен класс 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-объект в формате {"код_мессенджера":"Имя мессенджера"}
Пример:
1
<div
2
data-lgt-id="идентификатор_минилендинга"
3
data-messenger-names="{'TG': 'Телега', 'FB': 'ФБ'}"
4
></div>
Copied!

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

Предположим, что в нашем дизайне каждая кнопка имеет такой стиль:
1
<style>
2
.my-button {
3
padding: .6em 1em;
4
border: 2px solid #444;
5
background: #333;
6
display: inline-flex;
7
}
8
.my-button__caption {
9
color: #fff;
10
margin-left: .5em;
11
}
12
</style>
Copied!
Чтобы применить его к виджету используем такую конструкцию
1
<div data-lgt-id="здесь_идентификатор_подписной_страницы">
2
<!-- Переопределяем шаблон всех кнопок -->
3
<template data-button-inner-template="default">
4
<!-- этим кодом будет заменена каждая кнопка виджета -->
5
<div class="my-button">
6
<!-- используем переменную с иконкой мессенджера -->
7
<img style="width: 20px" src="{{messenger_icon_path}}" alt="">
8
</div>
9
</template>
Copied!
Взглянем на результат:
Круто, у нас получилось :)
Отлично! Заказчик доволен :)

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

Теперь наш заказчик хочет, чтобы у каждого мессенджера выводилось название. А у инстаграма не выводилось. Согласен, требование довольно странное, но... Ещё все названия всех мессенджеров должны быть на русском.
Приступим к внесению изменений :)
1
<!-- Переопределяем названия мессенджеров в аттрибуте data-messenger-names -->
2
<div
3
data-lgt-id="здесь_идентификатор_подписной_страницы"
4
data-messenger-names="{'TG': 'Телеграм', 'FB': 'Фэйсбук', 'VIBER':'Вайбер'}"
5
>
6
<!-- Переопределяем шаблон для всех кнопок -->
7
<template data-button-inner-template="default">
8
<!-- этим кодом будет заменена каждая кнопка виджета -->
9
<div class="my-button">
10
<!-- используем переменную с иконкой мессенджера -->
11
<img style="width: 20px" src="{{messenger_icon_path}}" alt="">
12
<!-- выводим название мессенджера -->
13
<span class="my-button__caption">{{messenger_name}}</span>
14
</div>
15
</template>
16
<!-- Переопределяем шаблон кнопки инстаграма -->
17
<template data-button-inner-template="INST">
18
<!-- этим кодом будет заменена кнопка инстаграма-->
19
<div class="my-button">
20
<!-- используем переменную с иконкой мессенджера -->
21
<img style="width: 20px" src="{{messenger_icon_path}}" alt="">
22
<!-- а здесь, согласно требованию тех. задания -->
23
<!-- мы не выводим название мессенджера -->
24
</div>
25
</template>
26
</div>
Copied!
Ну и конечно же посмотрим, что получилось в результате:
Дело сделано, заказчик доволен
😄

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

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

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

Выглядит так:
Код шаблона:
1
<!-- Блок кнопок -->
2
<div class="button">
3
<style>
4
.text-center {
5
text-align: center;
6
}
7
.my-button {
8
display: inline-flex;
9
align-items: center;
10
}
11
.my-button__caption {
12
color: white;
13
margin-left: .5em;
14
}
15
</style>
16
<div
17
data-lgt-id="ВАШ_ИД_МИНИЛЕНДИНГА"
18
data-messenger-names="{'TG': 'Телеграм', 'VIBER':'Вайбер'}"
19
>
20
<!-- Переопределяем шаблон для всех кнопок -->
21
<template data-button-inner-template="default">
22
<!-- этим кодом будет заменена каждая кнопка виджета -->
23
<div style="min-width:60px" class='lc-button__default-inner lc-button__default-inner_{{messenger_code}} '>
24
<div class="text-center my-button" style="margin-bottom: .3em">
25
<img class="lc-button__img" src="{{messenger_icon_path}}" width='40px'>
26
<span class="my-button__caption text-center">{{messenger_name}}</span>
27
</div>
28
</div>
29
</template>
30
</div>
31
</div>
32
<!-- /Блок кнопок -->
33
34
<script async src="https://leadconverter.ru/widget.js"></script>
35
36
Copied!

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

Выглядит так:
Код шаблона:
1
<!-- Блок кнопок -->
2
<div class="button">
3
<!-- Переопределяем названия мессенджеров в аттрибуте data-messenger-names -->
4
<style>
5
.my-button__caption {
6
color: white;
7
}
8
.text-center {
9
text-align: center;
10
}
11
</style>
12
<div
13
data-lgt-id="ВАШ_ИД_МИНИЛЕНДИНГА"
14
data-messenger-names="{'TG': 'Телеграм', 'VIBER':'Вайбер'}"
15
>
16
<!-- Переопределяем шаблон для всех кнопок -->
17
<template data-button-inner-template="default">
18
<!-- этим кодом будет заменена каждая кнопка виджета -->
19
<div style="min-width:70px" class='lc-button__default-inner lc-button__default-inner_{{messenger_code}} '>
20
<div class="text-center" style="margin-bottom: .3em">
21
<img class="lc-button__img" src="{{messenger_icon_path}}" width='40px'>
22
</div>
23
<div class="text-center">
24
<span class="my-button__caption text-center">{{messenger_name}}</span>
25
</div>
26
</div>
27
</template>
28
</div>
29
</div>
30
<!-- /Блок кнопок -->
Copied!
Если у тебя что-то не получается, или остались вопросы - просто напиши нам.
Выбери удобный для тебя способ связи с нами тут
😊
👇