Как подключить BotHelp

BotHelp поддерживает ограниченную интеграцию с Откуда Подписки, доступен функционал:

  • Передача активаций бота в рекламные системы Яндекс/ФБ/Гугл/ВК, оптимизация на старты бота
  • Аналитическая отчетность по аудитории: источники трафика, полный список подписчиков, utm метки откуда пришли (только подписки)
  • Аналитическая отчетность по подпискам: переходы в бота, конверсии в подписку
  • Ежедневные отчеты бота
    “подписки 24ч”
  • Досье подписчика

Следуйте по шагам для настройки подключения:

1. Настройка webhook для BotHelp

  1. Для интеграции необходимо получить API ключ. Как получить API ключ тут.
  2. В самом боте после пункта старт, создайте действие.
  3. Выберите там пункт “Отправить данные подписчика через Webhook” на url

Пример url, на который надо послать запрос: : https://bot-api.tgtrack.ru/v1/API_КЛЮЧ/my_bothelp_was_started


Просто выберите пункт о пересылке данных пользователя и отошлите его на наш url методом POST.

2. Проверка подключения

Для проверки настройки webhook используйте страницу тестирования API TGTrack:
https://bot-api.tgtrack.ru/last_events/

Укажите ваш API ключ (который получили на шаге 1) и проверьте последние 100 запросов.

Проверим, что BotHelp действительно передаёт старт, стоп, а сервис Откуда Подписки принимает его без ошибок. Статус обработки событий должен быть – 0.

Особенности:

Если у вас несколько воронок, которые запускаются по разным значениям параметра start бота, то в ссылке на вашего бота укажите нужный параметр:
https://t.me/ВАШБОТ?bothelp_start=ВАШЕЗНАЧЕНИЕ


Обратите внимание, что для точного отслеживания подписчиков, Откуда Подписки добавит к вашему параметру уникальный идентификатор перехода в бота, поэтому при обработке параметра start в вашем боте используйте поиск подстроки.

Если посадочная страница сделана на конструкторе BotHelp

Если ваш лендинг сделан на конструкторе BotHelp, то кнопку перехода в телеграм канал нужно сделать самому на чистом HTML коде:

<!-- Start BotHelp custom button --> 
 <div class="btnWrapper" id="bothelp_button">
 <a href="https://t.me/ссылка_в_канал/номер_поста" target="_blank">
 <button class="toTg">
 Перейти в телеграм
 </button>
 </a>
 </div>

 <style>
 .btnWrapper a{
 text-decoration: none;
 padding-left: 30px;
 padding-right: 30px;
 display: block;
 margin-top: 16px
 }

 .toTg {
 display: block;
 box-sizing: border-box;
 width: 100%;
 padding: 16px 24px; /* Отступы */
 font-family: 'Nunito', sans-serif;
 background-color: #4faee6; /* Основной цвет фона */
 color: white; /* Цвет текста */
 border-radius: 4px; /* Скругленные углы */
 text-align: center; /* Центровка текста */
 font-size: 16px; /* Размер шрифта */
 font-weight: normal; /* Толщина шрифта */
 cursor: pointer; /* Курсор при наведении */
 border: none; /* Убираем границу */
 position: relative; /* Положение для блика */
 overflow: hidden; /* Скрываем выходящий блик */
 
 }

 .toTg::before {
 content: '';
 position: absolute;
 top: -30%;
 left: -30%;
 width: 50%;
 height: 50%;
 background: rgba(255, 255, 255, 0.5);
 transform: rotate(45deg);
 pointer-events: none;
 animation: shine 2s linear infinite; /* Цикличная анимация блика */
 }

 @keyframes shine {
 0% {
 left: -150%; /* Начинаем с левой стороны */
 }
 100% {
 left: 150%; /* Заканчиваем на правой стороне */
 }
 } 
 </style>
 
 <script>
 var fOnLoad = () => {
 let bhButton = document.querySelector(".wh-landing-button-telegram");
 bhButton.innerHTML = "";
 bhButton.appendChild(document.getElementById("bothelp_button"));
 };
 window.addEventListener("DOMContentLoaded", fOnLoad);
 </script>
 
 <!-- End BotHelp custom button -->Code language: HTML, XML (xml)