С помощью скриптов, описанных ниже, из формы регистрации GetCourse в бота BotHelp можно передавать:
- данные, указанные подписчиком в форме регистрации (ФИО, почта, телефон, другие поля);
- UTM-метки из ссылки страницы с формой регистрации;
- другие get-параметры из ссылки страницы с формой регистрации.
Для того чтобы эти данные передавались, необходимо выполнить настройки формы регистрации GetCourse.
1. Настройки формы для передачи данных со страниц, созданных в GetCourse
В первую очередь необходимо создать страницу на GetCourse и добавить на неё стандартную форму с необходимыми полями.
Важно! Если в настройках конкретного поля формы поставить галочку «Скрывать, если заполнено», то данные из этого поля не будут передаваться в BotHelp.
Чтобы передать данные из формы, перейдите в настройки формы на GetCourse, затем — в раздел «Обработчик формы». Туда добавьте произвольное действие «Вызов 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 = "выбранный-вами-стиль";
Чтобы передать данные из формы, перейдите в настройки формы на GetCourse. В настройках в разделе «Обработчик формы» необходимо добавить произвольное действие, а именно «Вызов 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, или на других сайтах тоже? Например, как Tilda?
Виджет GetCourse можно использовать на сторонних сервисах или на своём сайте.
Если вы не нашли ответ на свой вопрос, задайте его нам в чате внутри кабинета либо напишите на [email protected] 😃
Получите 14 дней полного функционала платформы для создания рассылок, автоворонок и чат-ботов BotHelp: