С помощью скриптов, описанных ниже, можно передавать данные из формы регистрации GetCourse в бота BotHelp, включая:
- Данные, указанные подписчиком в форме регистрации (ФИО, email, телефон, другие поля);
- UTM-метки из ссылки страницы с формой;
- другие GET-параметры из URL страницы.
Когда это необходимо?
Для передачи подписчика из BotHelp в GetCourse требуется его email или телефон. Однако в боте их запрашивать не всегда удобно. В таком случае, если подписчик сначала вводит свои данные в форме на сайте, они автоматически передаются в BotHelp, а затем уже из BotHelp – в GetCourse.
Это позволяет:
•Связать подписчика между GetCourse и BotHelp.
•Корректно передавать его данные между системами.
Для передачи данных необходимо настроить форму регистрации 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 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. Если вы используете форму регистрации 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 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.
Во второй строчке кода const REDIRECT_URL = "https://www.your_page_for_redirect.com"; вместо ссылки-примера https://www.your_page_for_redirect.com нужно указать ссылку, на которую будет выполняться редирект с текущей страницы с формой регистрации. Например:
- На страницу «Спасибо» с виджет-кнопками. На этой странице подписчик сможет подписаться на бота по клику на виджет-кнопку;
- На бота в Telegram (для других мессенджеров этот вариант не сработает).
Важно такую прямую ссылку сформировать по нашей инструкции.
Тогда после заполнения формы регистрации подписчик сразу подпишется на бота.
Важно! При использовании этого скрипта вам не нужно добавлять действие «Переадресация» в обработчике формы. Скрипт сам выполнит переадресацию на указанную страницу.
Важно! Если вы добавите дополнительные произвольные действия, то их необходимо ставить выше действия «Вызов JavaScript», так как в коде прописан редирект на следующую страницу. Если этого не сделать, то последующие произвольные действия не будут выполняться.
Установка виджета на Tilda
Скопируйте код вставки из настроек виджета. Какой код выбрать, зависит от того, подключён ли на сайте протокол безопасности.
Этот код нужно вставить в Tilda в блок HTML.
Для вывода формы в pop-up выбирайте блок «Pop-up»: «HTML-код в попапе».
Теперь, если подписчик после заполнения формы будет перенаправлен в бота (через виджет-кнопку или напрямую), его данные из формы передадутся в BotHelp, а в GetCourse будет создан новый пользователь.
Как передать данные подписчика в BotHelp из формы регистрации, описано в статье Передача данных из формы регистрации Tilda.
Частые вопросы
Виджет можно располагать только на странице, созданной в GetCourse, или на других сайтах тоже? Например, как Tilda?
Виджет GetCourse можно использовать на сторонних сервисах или на своём сайте.
Если вы не нашли ответ на свой вопрос, задайте его нам в чате внутри кабинета либо напишите на [email protected] 😃
Получите 14 дней полного функционала платформы для создания рассылок, автоворонок и чат-ботов BotHelp: