Передача данных из формы регистрации GetCourse

Как передавать данные из формы регистрации Геткурс в Ботхелп для дальнейшей работы.

С помощью скриптов, описанных ниже, из формы регистрации GetCourse можно передавать в бота BotHelp следующие данные:

Данные, указанные подписчиком в форме регистрации (ФИО, почта, телефон, другие поля)
UTM-метки из ссылки страницы с формой регистрации
Другие get-параметры из ссылки страницы с формой регистрации

Для того, чтобы эти данные передавались необходимо выполнить настройки формы регистрации GetCourse.

1. Настройки формы для передачи данных со страниц, созданных в GetCourse

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

ВАЖНО! Если в настройках конкретного поля формы поставить галочку "Скрывать, если заполнено", то данные из этого поля не будут передаваться в BotHelp.

Чтобы передать данные из формы, перейдите в настройки формы на Геткурсе. В настройках в разделе "Обработчик формы" необходимо добавить произвольное действие, а именно "Вызов Javascript" и в открывшееся поле вставить код для передачи данных.

/**
* Script for passing form data as query parameters to a page with widget buttons
*/

(() => {
const FORM_CONTAINER_CLASS = "registration-form";
const REDIRECT_URL = "https://www.google.com/";

const windowRef = window.top !== window.window ? window.top?.[0] ?? window.top : window;
const elementVisible = (elem) => elem.offsetWidth || elem.offsetHeight || elem.getClientRects().length;
const formSelector = `.${FORM_CONTAINER_CLASS.replace(".", "")} form`;
const form = document.querySelector(formSelector);

const url = new URL(REDIRECT_URL);

const windowSearchParams = new URLSearchParams(windowRef.location.search);
windowSearchParams.delete("ref");
windowSearchParams.delete("loc");
windowSearchParams.forEach((value, key) => {
value = value.trim();
if (value) {
url.searchParams.set(key.toLowerCase(), value);
}
});

const formData = new FormData(form);
formData.forEach((value, key) => {
const el = form.querySelector(`[name="${key}"]`);
const isFormValue = key.includes("[") && key.includes("]");
if (elementVisible(el) && value && isFormValue) {
key = key.match(/\[(.*)]/)[1];
key = key === "full_name" ? "name" : key;

value = value.trim();
if (value) {
url.searchParams.set(key.toLowerCase(), value);
}
}
});

windowRef.location.href = url.href;
})();

ВАЖНО! Этот скрипт работает именно для формы регистрации, которая расположена на страницах сайта, который был сделан в самом GetCourse. Если вы используете форму регистрации GetCourse как виджет для других конструкторов сайтов, то используйте скрипт из следующего раздела.

Во второй строчке кода const REDIRECT_URL = "https://www.your_page_for_redirect.com"; вместо ссылки-примера https://www.your_page_for_redirect.com нужно указать ссылку, на которую будет выполняться редирект с текущей страницы с формой регистрации. Например:

На страницу "Спасибо" с виджет-кнопками. На этой странице "Спасибо" подписчик сможет подписаться на бота по клику на виджет кнопку
Прямая ссылка на бота в Telegram (для других мессенджеров этот вариант не сработает).
Важно такую прямую ссылку сформировать по нашей инструкции.
В этом случае после заполнения формы регистрации подписчик сразу подпишется на бота.

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

Важно! Если вы добавите дополнительные произвольные действия, то их необходимо ставить выше действия "Вызов Javascript", так как в коде идет редирект на следующую страницу. Если это не сделать, то последующие произвольные действия не будут выполняться.

ВАЖНО! Обязательно проверьте наличие CSS стиля в форме. Для этого перейдите в настройки кликом по кнопке "Стиль". В самом нижнем поле "CSS-класс блока" должен быть указан стиль "registration-form"

2. Настройки виджета GetCourse для передачи данных со страниц, созданных на других конструкторах сайтов

При создании виджета выберите "Форма", после чего перейдите в настройки формы. Добавьте произвольное действие "Вызов Javascript" и в открывшемся поле установите код для передачи данных.
Код для виджета не отличается какими-либо настройками или параметрами.

Главное отличие настроек формы от настроек виджет-формы это отсутствие CSS-стилей в последнем. Стили необходимо добавить вручную.

Стиль для формы на странице был registration-form , этот же стиль нужно использовать и для виджета.

ВАЖНО! В случае, если необходимо установить другой стиль для виджета, то этот же стиль необходимо указать в первой строчке кода передачи данных:

(() => { const FORM_CONTAINER_CLASS = "выбранный-вами-стиль";

/**
 * Script for passing form data as query parameters to a page with widget buttons
 */

(() => {
  const FORM_CONTAINER_CLASS = "registration-form";
  const REDIRECT_URL = "https://www.google.com/";

  const elementVisible = (elem) => elem.offsetWidth || elem.offsetHeight || elem.getClientRects().length;
  const formSelector = `.${FORM_CONTAINER_CLASS.replace(".", "")} form`;
  const form = document.querySelector(formSelector);

  const url = new URL(REDIRECT_URL);

  const isIframe = window.top !== window.window;
  const windowUrl = isIframe ? new URLSearchParams(window.location.search).get("loc") : window.location.href;

  const windowSearchParams = new URL(windowUrl).searchParams;
  windowSearchParams.forEach((value, key) => {
    value = value.trim();
    if (value) {
      url.searchParams.set(key.toLowerCase(), value);
    }
  });

  const formData = new FormData(form);
  formData.forEach((value, key) => {
    const el = form.querySelector(`[name="${key}"]`);
    const isFormValue = key.includes("[") && key.includes("]");
    if (elementVisible(el) && value && isFormValue) {
      key = key.match(/\[(.*)]/)[1];
      key = key === "full_name" ? "name" : key;

      value = value.trim();
      if (value) {
        url.searchParams.set(key.toLowerCase(), value);
      }
    }
  });

  const aEl = document.createElement("a");
  aEl.href = url.href;
  aEl.target = "_top";
  document.body.appendChild(aEl);
  aEl.click();
})();

ВАЖНО! Этот скрипт работает именно для формы регистрации в виде виджета, который расположен на страницах сайта, который был сделан в других конструкторах, а не на GetCourse.

На страницу "Спасибо" с виджет-кнопками. На этой странице "Спасибо" подписчик сможет подписаться на бота по клику на виджет кнопку
Прямая ссылка на бота в Telegram (для других мессенджеров этот вариант не сработает).
Важно такую прямую ссылку сформировать по нашей инструкции.
В этом случае после заполнения формы регистрации подписчик сразу подпишется на бота.

Частые вопросы:

Виджет можно располагать только на странице, созданной в GetCourse или на других сайтах тоже? Например, как Тильда?

Виджет GetCourse можно использовать и на сторонних сервисах или на своем сайте.

Если вы не нашли ответ на свой вопрос, задайте его нам в чате внутри кабинета либо напишите на hello@bothelp.io 😃

Получите 14 дней полного функционала платформы для создания рассылок, автоворонок и чат-ботов BotHelp:

Получить 14 дней бесплатно

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