Using the scripts described below, you can pass data from the GetCourse registration form to the BotHelp bot, including:

  • Data specified by the subscriber in the registration form (full name, email, telephone number, other fields);
  • UTM tags from the link of the page with the form;
  • other GET parameters from the page URL.

When is this necessary?

To transfer a subscriber from BotHelp to GetCourse, you need an email or phone number. But requesting them in a bot is not always convenient.
Alternative: the subscriber first enters data in a form on the site, they are automatically transferred to BotHelp, and then to GetCourse.

This allows:

•Link the subscriber between GetCourse and BotHelp.

•Correctly transfer its data between systems.

1. Setting up the form on the GetCourse page

First, create a page in GetCourse and add a standard form to it with the required fields (for example, name, email, phone).

Important! If you check the "Hide if filled" box in the settings of a specific form field, the data from this field will not be transmitted to BotHelp.

To transfer data from the form, go to the form settings on GetCourse, then to the "Form Handler" section. Add a custom action "Call JavaScript" there and paste the code for transferring data (it's below) into the field that opens.

/** * 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.window; const windowUrl = new URLSearchParams(window.location.search).get("loc") : window.location.href; 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(); url.searchParams.set(key.toLowerCase(), value); } } }); const aEl = document.createElement("a"); aEl.href = url.href; aEl.target = "_top"; document.body.appendChild(aEl); aEl.click(); })();

Important! This script only works for a form placed on a page of a site made in GetCourse itself. If you use the GetCourse form as a widget for other site builders, then use the script from the next section.

In the second line of code const REDIRECT_URL = "https://www.your_page_for_redirect.com"; replace the example link https://www.your_page_for_redirect.com with the desired page where the redirect should occur. For example:

  • To the "Thank you" page with widget buttons . On this page, the subscriber will be able to subscribe to the bot by clicking on the widget button.
  • To the bot in Telegram ( for other messengers this option will not work ).
    It is important to form such a direct link according to our instructions . Then after filling out the registration form, the subscriber will immediately subscribe to the bot.

Important!

  • When using this script, do not add "Redirect" action in the form handler.
    The redirect is performed by the script itself.
  • If you add additional custom actions, place them above the "Call JavaScript" action . Otherwise, they will not be executed - the script will interrupt execution by making a redirect.
  • Make sure that the form has CSS styling. Open the settings → click "Style" . The bottom field "Block CSS class" should say: registration-form

2. Setting up the GetCourse widget for third-party website builders

If you are using the GetCourse form widget on a website created in a third-party builder (Tilda, LP, etc.), follow these steps:

  1. When creating a widget, select the "Form" .

  2. Go to form settings .

  3. Add a custom action "Call JavaScript" .

  4. In the field that opens, paste the code for data transfer (see below).

does not require any additional settings or parameters
to work The script will work automatically after filling out the form.

Difference between form and widget:
The widget form does not have CSS styling by default, so you need to add it manually.

Use the same style as for the form on the page: registration-form

Important! Be sure to check that the CSS style is in the form. To do this, go to the settings by clicking on the Style . In the very bottom field "CSS class of the block" the style "registration-form" should be specified.

IMPORTANT! If you use a different CSS style for the widget, be sure to specify it in the first line of the script :

(() => { const FORM_CONTAINER_CLASS = "your-chosen-style";

To submit data from a form:

  1. Go to the GetCourse form settings.

  2. Open the Form Handler .

  3. Add a custom action "Call JavaScript" .

  4. Paste the data transfer script into the field that opens (see below).

/** * 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.window; const windowUrl = new URLSearchParams(window.location.search).get("loc") : window.location.href; 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(); url.searchParams.set(key.toLowerCase(), value); } } }); const aEl = document.createElement("a"); aEl.href = url.href; aEl.target = "_top"; document.body.appendChild(aEl); aEl.click(); })();

Important! This script only works for the registration form as a widget placed on the pages of a site created in a third-party constructor (for example, Tilda, LP, etc.). For forms on GetCourse pages, use a different script (see above).

In the second line of the script const REDIRECT_URL = "https://www.your_page_for_redirect.com"; instead of the example link https://www.your_page_for_redirect.com, specify the link to which the redirect should occur after submitting the form. For example:

  • To the “Thank you” page with widget buttons—the subscriber will be able to subscribe to the bot with a click
  • To the bot in Telegram (does not work for other messengers).
    It is important to create such a direct link according to our instructions . Then, after filling out the registration form, the subscriber will immediately subscribe to the bot.

Important! Do not add the "Redirect" - the redirect is performed by the script itself.

Important! If you use other custom actions , place them above the "Call JavaScript" action .
Otherwise, they will not be executed - the script will immediately launch a transition to another page.

Installing a widget on Tilda

Copy the embed code from the widget settings. Which code to choose depends on whether the site has a security protocol enabled.

This code needs to be inserted into Tilda in the HTML block.

 

To display the form in a pop-up, select the “Pop-up” block: “HTML code in a pop-up”.

Now, if a subscriber is redirected to the bot after filling out the form (via a widget button or directly), his data from the form will be transferred to BotHelp , and a new user will be created in GetCourse .

How to transfer subscriber data to BotHelp from the registration form is described in the article Transferring data from the Tilda registration form .

Frequently asked questions

Can the widget be placed only on a page created in GetCourse, or on other sites too? For example, like Tilda?

The GetCourse widget can be used on third-party services or on your own website.

If you have not found the answer to your question, ask us in the chat inside your account or write to BotHelpSupportBot or to hello@bothelp.io

Get 14 days of full functionality of the platform for creating mailings, autofunnels and chatbots BotHelp.

Get 14 days free

Was this article helpful?

Thanks for your feedback!