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

Передача данных из формы регистрации 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}"]`);
if (elementVisible(el) && value) {
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", так как в коде идет редирект на следующую страницу. Если это не сделать, то последующие произвольные действия не будут выполняться. 


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 дней бесплатно

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