Виджет кнопки

Вставить кнопки мессенджеров на свой сайт

Открыть в новом окне по ссылке

Вы можете разместить кнопки мессенджеров на своем сайте для  запуска цепочки бота.

Настройка

  • В разделе Инструменты роста выберите "Виджет кнопка"


  • Введите название виджета и метки, которые будут присваиваться подписчику при запуске воронки

  • Добавьте кнопки, которые будут отображены в виджете. 

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


  • Настройте визуальное отображение виджета на сайте. Результат можно увидеть в предпросмотре справа.

  • Для установки виджета перейдите на следующий шаг. При первом создании виджета будет кнопка "Вперед", при редактировании будет предложено сохранение. 

Установка

  • Установите JS код на свой сайт. Этот код позволяет BotHelp отображать виджет на вашем веб-сайте и запускает цепочку воронки. Добавьте его в раздел <head> на каждой странице вашего веб-сайта, где будет использован виджет.

  • Вставьте виджет. Этот код позволяет расположить кнопки на сайте. Вставьте его там, где вы хотите отобразить виджет. 


Важно! Код достаточно один раз установить на сайт. В будущем можно будет менять отображение и воронку прямо в настройках виджета в кабинете - на сайте поменяется автоматически. 

Также на сайте вы можете использовать инструмент роста "Виджет-подписка"

Передача utm меток и параметров при подписке с виджет-кнопки

Если виджет-кнопки будут установлены на сайте, к ссылке которого добавлены utm метки и другие параметры, то метки передадутся в нашу платформу при запуске цепочки бота. 

(!) Работает для Телеграм, Вайбер и ФБ

Пример ссылки на сайт с 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 😃

Чтобы зарегистрироваться на платформе BotHelp, нажмите кнопку ниже:

Регистрация в BotHelp

👆 На этом пока всё