Usando los scripts que se describen a continuación, puede pasar datos del formulario de registro de GetCourse al bot BotHelp, incluidos:

  • Datos especificados por el suscriptor en el formulario de registro (nombre completo, correo electrónico, número de teléfono, otros campos);
  • Etiquetas UTM del enlace de la página con el formulario;
  • Otros parámetros GET de la URL de la página.

¿Cuando es esto necesario?

Para transferir un suscriptor de BotHelp a GetCourse, se necesita un correo electrónico o un número de teléfono. Sin embargo, solicitarlos mediante un bot no siempre es conveniente.
Otra opción: el suscriptor primero introduce sus datos en un formulario del sitio web; estos se transfieren automáticamente a BotHelp y luego a GetCourse.

Esto permite:

• Vincular al suscriptor entre GetCourse y BotHelp.

•Transferir correctamente sus datos entre sistemas.

1. Configuración del formulario en la página GetCourse

Primero, cree una página en GetCourse y agregue un formulario estándar con los campos obligatorios (por ejemplo, nombre, correo electrónico, teléfono).

¡Importante! Si marca la casilla "Ocultar si se completa" en la configuración de un campo de formulario específico, los datos de este campo no se transmitirán a BotHelp.

Para transferir datos desde el formulario, vaya a la configuración del formulario en GetCourse y luego a la sección "Manejador de formulario". Agregue la acción personalizada "Llamar a JavaScript" y pegue el código para transferir datos (que se encuentra a continuación) en el campo que se abre.

/** * Script para pasar datos de formulario como parámetros de consulta a una página con botones de widget */ (() => { 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((valor, clave) => { valor = valor.trim(); if (valor) { url.searchParams.set(clave.toLowerCase(), valor); } }); const formData = new FormData(formulario); formData.forEach((valor, clave) => { const el = form.querySelector(`[nombre="${clave}"]`); const isFormValue = clave.includes("[") && clave.includes("]"); if (elementVisible(el) && valor && isFormValue) { clave = clave.match(/\[(.*)]/)[1]; clave = clave === "nombre_completo" ? "nombre" : clave; valor = valor.trim(); url.searchParams.set(clave.toLowerCase(), valor); } } }); const aEl = document.createElement("a"); aEl.href = url.href; aEl.target = "_top"; document.body.appendChild(aEl); aEl.click(); })();

¡Importante! Este script solo funciona con formularios ubicados en una página de un sitio web creado con GetCourse. Si usa el formulario de GetCourse como widget para otros creadores de sitios web, utilice el script de la siguiente sección.

En la segunda línea de código, const REDIRECT_URL = "https://www.your_page_for_redirect.com"; reemplace el enlace de ejemplo https://www.your_page_for_redirect.com con la página donde desea que se realice la redirección. Por ejemplo:

  • A la página de agradecimiento con botones de widget . En esta página, el suscriptor podrá suscribirse al bot haciendo clic en el botón del widget.
  • Al bot en Telegram ( esta opción no funciona en otras plataformas de mensajería ).
    Es importante crear dicho enlace directo según nuestras instrucciones . Tras completar el formulario de registro, el suscriptor se suscribirá inmediatamente al bot.

¡Importante!

  • Al usar este script, no agregue acción "Redireccionar" al controlador del formulario.
    La redirección la realiza el propio script.
  • Si añade acciones personalizadas adicionales, colóquelas encima de la acción "Llamar a JavaScript" . De lo contrario, no se ejecutarán; el script interrumpirá la ejecución mediante una redirección.
  • Asegúrese de que el formulario tenga estilos CSS. Abra la configuración → haga clic en "Estilo" . El campo inferior "Clase CSS del bloque" debería indicar: formulario de registro.

2. Configuración del widget GetCourse para creadores de sitios web de terceros

Si está utilizando el widget de formulario GetCourse en un sitio web creado en un constructor de terceros (Tilda, LP, etc.), siga estos pasos:

  1. Al crear un widget, seleccione el "Formulario" .

  2. Vaya a la configuración del formulario .

  3. Agregue una acción personalizada "Llamar JavaScript" .

  4. En el campo que se abre, pegue el código para la transferencia de datos (ver a continuación).

no requiere ninguna configuración ni parámetro
para funcionar Se ejecutará automáticamente después de completar el formulario.

Diferencia entre formulario y widget:
El formulario del widget no tiene estilo CSS por defecto, por lo que debes agregarlo manualmente.

Utilice el mismo estilo que para el formulario de la página: formulario-de-registro

¡Importante! Asegúrese de que el estilo CSS esté en el formulario. Para ello, vaya a la configuración haciendo clic en el botón Estilo . En el campo inferior "Clase CSS del bloque", debe especificarse el estilo "registration-form".

¡IMPORTANTE! Si usa un estilo CSS diferente para el widget, asegúrese de especificarlo en la primera línea del script :

(() => { const FORM_CONTAINER_CLASS = "tu-estilo-elegido";

Para enviar datos desde un formulario:

  1. Vaya a la configuración del formulario GetCourse.

  2. Abra la sección Controlador de formulario .

  3. Agregue una acción personalizada "Llamar JavaScript" .

  4. Pegue el script de transferencia de datos en el campo que se abre (ver a continuación).

/** * Script para pasar datos de formulario como parámetros de consulta a una página con botones de widget */ (() => { 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((valor, clave) => { valor = valor.trim(); if (valor) { url.searchParams.set(clave.toLowerCase(), valor); } }); const formData = new FormData(formulario); formData.forEach((valor, clave) => { const el = form.querySelector(`[nombre="${clave}"]`); const isFormValue = clave.includes("[") && clave.includes("]"); if (elementVisible(el) && valor && isFormValue) { clave = clave.match(/\[(.*)]/)[1]; clave = clave === "nombre_completo" ? "nombre" : clave; valor = valor.trim(); url.searchParams.set(clave.toLowerCase(), valor); } } }); const aEl = document.createElement("a"); aEl.href = url.href; aEl.target = "_top"; document.body.appendChild(aEl); aEl.click(); })();

¡Importante! Este script solo funciona con el formulario de registro como widget ubicado en las páginas de un sitio web creado con un constructor externo (por ejemplo, Tilda, LP, etc.). Para los formularios en las páginas de GetCourse, use un script diferente (ver arriba).

En la segunda línea del script const REDIRECT_URL = "https://www.your_page_for_redirect.com"; en lugar del enlace de ejemplo https://www.your_page_for_redirect.com, especifique el enlace al que se redirigirá después de enviar el formulario. Por ejemplo:

  • A la página “Gracias” con botones de widget: el suscriptor podrá suscribirse al bot con un clic
  • Al bot en Telegram (no funciona con otras plataformas de mensajería).
    Es importante crear dicho enlace directo según nuestras instrucciones . Tras completar el formulario de registro, el suscriptor se suscribirá inmediatamente al bot.

¡Importante! No agregue la "Redireccionar" ; la redirección la realiza el propio script.

¡Importante! Si usa otras acciones personalizadas , colóquelas encima de la acción "Llamar a JavaScript" .
De lo contrario, no se ejecutarán; el script iniciará inmediatamente una transición a otra página.

Instalación de un widget en Tilda

Copia el código de inserción desde la configuración del widget. El código a elegir dependerá de si el sitio tiene habilitado un protocolo de seguridad.

Este código debe insertarse en Tilda en el bloque HTML.

 

Para mostrar el formulario en una ventana emergente, seleccione el bloque “Ventana emergente”: “Código HTML en una ventana emergente”.

Ahora, si un suscriptor es redirigido al bot después de completar el formulario (a través de un botón de widget o directamente), sus datos del formulario se transferirán a BotHelp y se creará un nuevo usuario en GetCourse .

En el artículo Transferencia de datos desde el formulario de registro de Tilda se describe cómo transferir datos de suscriptores a BotHelp desde el formulario de registro .

Preguntas frecuentes

¿Se puede colocar el widget solo en una página creada en GetCourse o también en otros sitios? Por ejemplo, como Tilda.

El widget GetCourse se puede utilizar en servicios de terceros o en su propio sitio web.


Si no has encontrado la respuesta a tu pregunta, pregúntanos en el chat dentro de tu cuenta o escríbenos a BotHelpSupportBot o a hello@bothelp.io

Obtenga 14 días de funcionalidad completa de la plataforma para crear mailings, autofunnels y chatbots BotHelp.

Obtenga 14 días gratis

¿Fue útil este artículo?

¡Gracias por tus comentarios!