Виджет кнопки
Вы можете разместить кнопки мессенджеров на своем сайте для запуска цепочки бота.
Настройка
В разделе Инструменты роста выберите "Виджет кнопка"
Введите название виджета и метки, которые будут присваиваться подписчику при запуске воронки
Добавьте кнопки, которые будут отображены в виджете.
Нужно выбрать бота или авторассылку, которые будут запускаться при подписке.
Для Вконтакте необходимо выбрать ВК-лендинг, который откроется по клику на кнопку на виджете
Настройте визуальное отображение виджета на сайте. Результат можно увидеть в предпросмотре справа.
Для установки виджета перейдите на следующий шаг. При первом создании виджета будет кнопка "Вперед", при редактировании будет предложено сохранение.
Установка
Установите JS код на свой сайт. Этот код позволяет BotHelp отображать виджет на вашем веб-сайте и запускает цепочку воронки. Добавьте его в раздел <head> на каждой странице вашего веб-сайта, где будет использован виджет.
Вставьте виджет. Этот код позволяет расположить кнопки на сайте. Вставьте его там, где вы хотите отобразить виджет.
Важно! Код достаточно один раз установить на сайт. В будущем можно будет менять отображение и воронку прямо в настройках виджета в кабинете - на сайте поменяется автоматически.
Также на сайте вы можете использовать инструмент роста "Виджет-подписка"
Передача utm меток и параметров при подписке с виджет-кнопки
Если виджет-кнопки будут установлены на сайте, к ссылке которого добавлены utm метки и другие параметры, то метки передадутся в нашу платформу при запуске цепочки бота.
ВАЖНО! Работает для Telegram, Viber и FB и ВК
Пример ссылки на сайт с utm меткой "utm_content" и параметром кастомного поля "pole":
https://768767.tilda.ws/landing_widget?pole=123456&utm_content=tilda
После подписки с виджет кнопки, установленной на сайте с данными параметрами, значения параметров запишутся в карточке подписчика в соответствующих полях.
(!) Если нужного кастомного поля в карточке подписчика еще нет, то данные не запишутся, т.е. поле нужно прежде создать.
Частые вопросы:
Как реализовать отслеживание конверсий пикселем фейсбук при установке виджета на сайт?
Нужно вставить пиксель на сайт. Отслеживание конверсий и др. аналитика для сайтов в случае использования виджетов лежат на стороне пользователя.
Как настроить сбор данных (email, телефон) на сайте через виджет?
С виджета возможен только запуск бота. Сбор данных можно настроить в самом боте.
Возможно ли передать utm метки при подписке с виджет кнопки?
Да, если виджет кнопки будут установлены на сайте, к ссылке которого добавлены utm метки, то метки передадутся в нашу платформу при подписке пользователя.
Можно ли вставить несколько виджетов в разные блоки на одну страницу сайта?
Да, можно использовать несколько виджетов на странице. А также есть возможность комбинировать виджеты на сайте.
Что сделать, чтобы поменять расположение виджетов?
Для горизонтального выравнивания необходимо сделать следующее:
Добавить на ваш контейнер одно из следующих свойств:
style="display: flex; justify-content: flex-start" (в начале, по умолчанию)
style="display: flex; justify-content: center" (по центру)
style="display: flex; justify-content: flex-end" (в конце)
Пример:
<div id="bh-widget-button-root" data-bh-widget-id="100" data-bh-customer-id="100" style="display: flex; justify-content: center"></div>
Расположение по вертикали зависит от того, куда вы вставили ваш контейнер
Пример:
<div>Section 1</div>
<div>Section 2</div>
<div id="bh-widget-button-root">Виджет кнопки</div>
<div>Section 3</div>
В данном варианте кнопки будет между блоками Section 2 и Section 3 в вашей верстке.
Чтобы сделать их в самом низу необходимо поменять структуру на следующую:
<div>Section 1</div>
<div>Section 2</div>
<div>Section 3</div>
<div id="bh-widget-button-root">Виджет кнопки</div>
Как убрать надпись “Сделано на BotHelp”?
Её можно убрать через CSS-стили. Для этого в css код страницы добавьте:
.bh-powered-by { display:none !important;}
Если ваш сайт на конструкторе, в котором нельзя изменить css код, то перед вставкой кода виджета нужно добавить код:
<style>.bh-powered-by { display:none !important;}</style>
Если добавление виджет-кнопки происходит на Тильде, то необходимо указать немного иной код:
<style>.bh-w-powered-by { display:none !important;}</style>
Если вы не нашли ответ на свой вопрос, задайте его нам в чате внутри кабинета либо напишите на hello@bothelp.io 😃
Получите 14 дней полного функционала платформы для создания рассылок, автоворонок и чат-ботов BotHelp.