Кнопки мессенджеров на сайт | JS-Виджет
Иногда тебе нужна полная кастомизация подписной страницы. Этот виджет решает твою задачу :)
На нашей практике этот виджет чаще всего используется в двух случаях:
1 - ты хочешь встроить кнопки мессенджеров на свой сайт, но при этом тебе нужно использовать свой дизайн.
2 - ты хочешь чтобы кнопки были "частью страницы", а не встроенными через iframe, как в случае с большинством других виджетов. Например, чтобы повесить на кнопки дополнительные JavaScript события систем аналитики.
Встраиваем виджет в свой сайт
Создаем подписную страницу. О том, как это сделать можно прочитать здесь.
Сохраняем её. Далее переходим на вкладку "Результат" и разворачиваем пункт "JS-виджет".
Копируем скрипт виджета. Он идет первым на вкладке JS-виджет. Он одинаковый для всех виджетов, можешь скопировать его из личного кабинета, или отсюда 👇
И вставляем его на свой сайт перед закрывающим тегом </body>
После этого копируем тег div
из личного кабинета. Он индивидуален для каждого мини-лендинга, скопируй его из личного кабинета, как показано на скриншоте
И вставляем его в наш сайт, в то место, где хотим отображать кнопки мессенджеров.
На этом подключение виджета завершено, можно смотреть результат на сайте. Кнопки будут отображены в стандартном дизайне :)
По умолчанию кнопки выглядят так:
Будут отображены кнопки тех мессенджеров, которые выбраны в настройках мини-лендинга на первом этапе
Настраиваем свой дизайн кнопок
Для того, чтобы переопределить html-код кнопки, необходимо использовать тег template
с атрибутом data-button-inner-template
. Этот тег необходимо поместить внутрь виджета, к которому мы хотим его применить.
Значение атрибута data-button-inner-template
определяет, к какой конкретно кнопке будет применен этот шаблон. У него могут быть следующие значения:
Значение | Для какой кнопки будет применен шаблон |
---|---|
VK | ВКонтакте |
FB | |
TG | Telegram |
INST | |
WHATS | |
default | для всех |
Например, мы хотим переопределить шаблон для всех кнопок. Но кнопка Instagram у нас имеет особенную структуру кода.
В таком случае мы можем использовать такую запись:
Конечно, таким образом можно задать индивидуальный код для каждой кнопки :)
После клика на кнопку, её родительскому элементу будет добавлен класс lc-button_loading. Можно использовать его для того, чтобы пометить кнопку неактивной, или отрисовать на ней анимацию загрузки
☺️
Доступные переменные
Для удобства работы шаблонизатор поддерживает несколько переменных, которые вы можете использовать. Ниже представлен их список:
Переменная | Описание |
---|---|
{{messenger_name}} | Выводит имя мессенджера. Имена могут быть переопределены с помощью атрибута data-messenger-names |
{{messenger_icon_path}} | Путь к иконке мессенджера на нашем сервере. Иконки имеют формат SVG и белый цвет. Так же необходимо задать ширину изображения. Пример:
|
{{messenger_code}} | Код мессенджера (VK, FB...) |
Имена мессенджеров
В каждую кнопку с помощью переменной {{messenger_name}} можно подставить имя мессенджера. По умолчанию будут выведены следующие имена:
Код мессенджера | Имя мессенджера |
---|---|
VK | ВКонтакте |
FB | |
TG | Telegram |
INST | |
VIBER | Viber |
WHATS |
Если вы хотите переопределить их, допишите к тегу виджета аттрибут data-messenger-names.
В его значение передайте JSON-объект в формате {"код_мессенджера":"Имя мессенджера"}
Пример:
Рассмотрим пример
Предположим, что в нашем дизайне каждая кнопка имеет такой стиль:
Чтобы применить его к виджету используем такую конструкцию
Взглянем на результат:
Отлично! Заказчик доволен :)
Тук-тук. Кто там? Правки!
Теперь наш заказчик хочет, чтобы у каждого мессенджера выводилось название. А у инстаграма не выводилось. Согласен, требование довольно странное, но... Ещё все названия всех мессенджеров должны быть на русском.
Приступим к внесению изменений :)
Ну и конечно же посмотрим, что получилось в результате:
Типовые шаблоны
По нашим наблюдениям некоторые шаблоны вы используете чаще остальных. Частый запрос - добавить название мессенджера к стандартному виду кнопок.
Ниже будут приведен код таких шаблонов, и результат, как в итоге он будет выглядеть. Просто скопируй тот, что тебе нужен :)
Вывод названия мессенджера справа от иконки
Выглядит так:
Код шаблона:
Вывод названия мессенджера под иконкой
Выглядит так:
Код шаблона:
Если у тебя что-то не получается, или остались вопросы - просто напиши нам.
Выбери удобный для тебя способ связи с нами тут 😊👇
Last updated