Перейти на сайт

Передача данных из формы регистрации 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 , этот же стиль нужно использовать и для виджета.


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

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

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


Чтобы передать данные из формы, перейдите в настройки формы на Геткурсе. В настройках в разделе "Обработчик формы" необходимо добавить произвольное действие, а именно "Вызов 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 : 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.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. 

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

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

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

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


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

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

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

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

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

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

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