Перейти к основному содержимому

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

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

Следуйте шагам для настройки​

Шаг 1 — Настройка передачи webhook для BotHelp​

  1. Для интеграции получите API-ключ. Как получить API-ключ.
  2. В воронке бота после Старт создайте действие, как на скрине.

  1. В действии выберите "Отправить данные подписчика через Webhook".

    3.1. Создать действие.

3.2. Отправить данные через Webhook.

Вставьте ссылку, подставив свой API-ключ:

https://bot-api.tgtrack.ru/v1/API_КЛЮЧ/my_bothelp_was_started

Где:

  • API_КЛЮЧ - ваш персональный API-ключ, полученный от Откуда Подписки на шаге 1.
  • Остальная часть ссылки должна оставаться без изменений

Пример готовой ссылки:

https://bot-api.tgtrack.ru/v1/5a3b9c8d7e6f1234/my_bothelp_was_started
подсказка

Выберите пункт пересылки данных пользователя и отправьте данные на наш URL методом POST. Укажите API-ключ, который получили от Откуда Подписки бота на 📘 шаге 1.

Шаг 2 — Проверка подключения​

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

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

Шаг 3 — Настройка передачи глубокой цели​

Если вы используете бота на платформе BotHelp и хотите передавать данные о глубокой цели (например, результат теста) в рекламную систему, выполните следующие шаги:

Создайте действие в воронке с передачей данных​

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

Выберите действие "Внешний запрос".

Настройте внешний запрос​

подсказка

Для передачи данных по глубокой цели из вашего бота в рекламную систему после настройки интеграции, нужно сделать подключение к рекламной системе по инструкции: 📘 Яндекс Директ, 📘 VK Реклама, 📘 Facebook/Instagram, 📘 Google.

Укажите URL для отправки данных в сервис "Откуда Подписки бот".

Вставьте ссылку, подставив API-ключ, полученный от "Откуда Подписки бот" на шаге 1:

https://bot-api.tgtrack.ru/v1/API_КЛЮЧ/send_reach_goal

В поле для записи тела запроса добавьте следующий JSON:​

{
  "user_id": "{%user_id%}",
  "target": "testResult"
}
  • user_id: переменная {%user_id%} автоматически подставит уникальный ID пользователя из BotHelp.
  • target: это идентификатор вашей глубокой цели. Например, "testResult" означает, что пользователь завершил тест.

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

Если сайт на BotHelp, то недостаточно сделать настройку по шагам 1 и 2 из-за логики запуска бота самим 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; /* Цикличная анимация блика */
  }

  .wh-mini-landing-container .wh-landing-buttons .wh-landing-button {
    max-width: initial;
  }

  @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 -->