Este artículo trata sobre la página de registro que se introdujo en junio de 2025. Por favor, lee este artículo si todavía usas la versión anterior.
¿Sigues usando la versión anterior pero quieres cambiar a la nueva? Consulta este artículo.
Si quieres que las personas se inscriban a tus webinars a través de tu propio sitio web, el formulario incrustado es tu mejor aliado. Te permite colocar el formulario de registro en tu sitio web de cuatro maneras diferentes:
Como botón
Esta opción es un botón que abre el formulario de registro. Puede colocarse en una ubicación fija de tu sitio web o como una superposición que permanece visible mientras los visitantes navegan por la página.
Como formulario incrustado en línea
Esta opción es el propio formulario de registro. Puedes colocarlo en una ubicación fija de tu sitio web.
Como enlace personalizado
Esta opción es un hipervínculo simple que abre el formulario de registro. Puedes colocarlo en una ubicación fija de tu sitio web.
Como widget
Esta opción es una barra o un recuadro que muestra información del webinar. Lo colocas en tu sitio web como una superposición que permanece visible mientras los visitantes navegan por la página.
El formulario incrustado en línea y los formularios que aparecen al usar las opciones de botón, enlace personalizado y widget usan los colores del tema de marca de tu cuenta. Sigue los pasos en este artículo para editarlos.
¡Atención! Cuando generas un código incrustado, le asignamos un identificador único. Este identificador único está en el código y solo puede usarse una vez por página, lo que significa que no puedes colocar el mismo código incrustado varias veces en una misma página. Si quieres usar el mismo formulario incrustado en varias ubicaciones de una página, tendrás que generar un nuevo código incrustado para que el identificador sea diferente. Esto se puede hacer refrescando la página y copiando el nuevo código.
Crear un formulario incrustado
Sigue los pasos a continuación para crear un formulario incrustado:
Encuentra tu webinar en el listado de webinars y haz clic en su título
Haz clic en el botón «Editar webinar»
Ve a «Registro»
Ve a «Incrustar»
Selecciona el tipo de formulario incrustado que quieres usar: botón, formulario incrustado en línea, enlace personalizado o widget.
Personaliza el formulario incrustado que hayas elegido. Puedes encontrar descripciones de todas las opciones aquí.
Cuando termines, copia el código haciendo clic en el icono con dos páginas y colócalo en el código HTML de tu sitio web.
¡No olvides guardar los cambios en tu sitio web!
¡Eso es todo! Si has hecho todo correctamente, el formulario incrustado aparecerá ahora en tu sitio web.
Opciones de personalización
Formulario de registro (todos los tipos)
Puedes personalizar el formulario de registro que se abre cuando alguien pulsa tu incrustación. Los aspectos que se pueden personalizar son:
Idioma
Tema
Colores
Página de confirmación
Sigue leyendo para saber cómo cambiar cada uno de estos.
Cambiar el idioma del formulario incrustado
Por defecto, tu formulario incrustado usará el idioma de tu webinar. También puedes configurarlo para que use el idioma del navegador del visitante o un idioma fijo de una lista. Esta configuración puede cambiarse con el menú desplegable «Idioma del formulario incrustado» tras seleccionar un tipo de incrustación.
Cambiar el tema del formulario incrustado
Por defecto, tu formulario incrustado usará el tema estándar de tu cuenta (claro u oscuro). También puedes configurarlo para que use el tema del sistema del visitante o un tema fijo. Esta configuración puede cambiarse con el menú desplegable «Tema del formulario incrustado» tras seleccionar un tipo de incrustación.
Cambiar los colores del formulario incrustado
Por defecto, tu formulario incrustado usará los colores del tema de tu cuenta. Puedes sobrescribirlos con colores personalizados para cada formulario incrustado individual. Esta configuración puede cambiarse marcando la casilla junto a «Sobrescribir tema personalizado» y seleccionando los colores que quieres usar. Para los widgets, esto también determina el color del propio widget.
Consejo: No puedes previsualizar el formulario en sí cuando creas un botón o un enlace personalizado, pero puedes cambiar a «Formulario incrustado en línea» y luego volver para ver cómo quedará.
Usar un formulario de registro de una sola página
Por defecto, todos los tipos de incrustaciones incluyen un formulario de registro de varias páginas cuando el usuario debe introducir más que solo su nombre y correo electrónico, incluyendo cuando elige entre varias fechas de emisión.
Las incrustaciones pueden configurarse para que el formulario de registro tenga todos los campos en una sola página usando la casilla junto a «Formulario de una sola página».
Usar una página de confirmación personalizada para tu formulario incrustado
Por defecto, a los suscriptores se les muestra una confirmación dentro del formulario incrustado una vez que terminan de registrarse. Puedes elegir establecer una URL personalizada para redirigir a las personas tras suscribirse haciendo clic en «Editar» bajo «Redirigir a los espectadores a una URL personalizada tras el registro», pegando la URL en el cuadro de texto «URL personalizada» y haciendo clic en «Guardar».
Para botones
Botón incrustado en línea y botón fijo
Hay dos tipos de botones incrustados: botones incrustados en línea y botones fijos. Ambos abren el formulario de registro al hacer clic, pero aparecen de forma diferente en tu sitio web.
El botón incrustado en línea se coloca en un lugar específico de tu sitio web y permanece allí, lo que significa que desaparecerá de la pantalla si, por ejemplo, el usuario hace scroll hacia abajo.
El botón fijo, en cambio, permanece visible mientras los visitantes hacen scroll arriba o abajo. ¡Siempre está ahí para que no se olviden de registrarse! Cuando usas el botón fijo, puedes elegir colocarlo en la parte inferior izquierda o inferior derecha de tu sitio web.
Texto y colores del botón
El texto y los colores de tu botón incrustado pueden cambiarse para adaptarse a tu sitio web. Mientras creas tu botón, usa las opciones «Texto del botón», «Color del botón» y «Color del texto del botón» bajo «Personalizar» para ajustarlo a tu gusto.
Para formularios incrustados en línea
Mostrar solo el formulario
Por defecto, los formularios incrustados en línea incluyen el logo de tu empresa, el título del webinar y la fecha/hora del webinar. Puedes eliminar fácilmente esta información de tu formulario incrustado en línea activando la opción «Mostrar solo el formulario».
Esta opción es perfecta cuando quieres mostrar esta información en tu sitio web a tu manera.
Usar un fondo transparente
El formulario incrustado en línea viene con un color de fondo por defecto. Si esto no encaja con tu sitio web o prefieres usar el fondo de tu sitio, configura el fondo del formulario incrustado en línea como transparente marcando la casilla junto a «Fondo transparente».
Para enlaces personalizados
Texto del enlace personalizado
El texto de tu enlace personalizado puede cambiarse para adaptarse a tu webinar. Mientras creas tu enlace personalizado, usa la opción «Texto del botón» bajo «Personalizar» para ajustar el texto a tu gusto.
Para widgets
Barra fija y recuadro fijo
Hay dos tipos de widgets: barras fijas y recuadros fijos. Ambos abren el formulario de registro al pulsar su botón, pero aparecen de forma diferente en tu sitio web.
La barra fija es una barra horizontal que se muestra en la parte superior o inferior de tu sitio web y permanece en esa posición.
El recuadro fijo, en cambio, es una versión más pequeña del widget que ocupa menos espacio que la barra fija. Puede colocarse en la parte superior izquierda, superior derecha, inferior izquierda o inferior derecha y permanece en esa posición.
Tanto la barra fija como el recuadro fijo están siempre visibles, sin importar cuánto hagan scroll las personas en tu sitio web. Se adhieren a la parte de la pantalla que elijas.
Colores del widget
A diferencia de las otras opciones de incrustación, los colores del widget se deciden por los colores del tema en tu cuenta que también se aplican al formulario de registro en sí.
Por defecto, tu widget usará los colores del tema de tu cuenta. Puedes sobrescribirlos con colores personalizados para cada widget individual.
Texto del botón
El texto del botón de tu widget puede cambiarse para adaptarse a tu webinar. Mientras creas tu widget, usa la opción «Texto del botón» bajo «Personalizar» para ajustar el texto del botón del widget a tu gusto.
Configuración avanzada
Incrustar como iframe
También puedes usar el código incrustado dentro de un iframe, pero requiere que uses "srcdoc" (consulta también aquí). El código incrustado quedaría así:
<iframe srcdoc='
<script>
(function(w,d,stn,sa,gn,se,fse){w[gn]=w[gn]||function(){(w[gn].q = w[gn].q||[]).push(arguments)};
se=d.createElement(stn);fse=d.getElementsByTagName(stn)[0];se.id=gn;se.async=1;
se.src=sa+"?t="+new Date().toISOString().slice(0, -9);fse.parentNode.insertBefore(se, fse);
})(window, document, "script", "https://malong.webinargeek.com/malong.embed.js", "mw_12345");
mw_12345("init", {
project: "registration",
identifier: "12345",
shape: "inline"
});
</script>
' />
Como puedes notar, el <div id="mw_Tv1FSKM6ScX_webinargeek"></div> ha desaparecido, porque debe eliminarse si usas este método.
Hacer que el formulario incrustado preseleccione una emisión específica
Puedes hacer que el formulario incrustado preseleccione una emisión específica para asegurar que las personas se registren para una emisión en particular.
Para ello, añade esto al código:
,
broadcastId: "1234"
Puedes encontrar el ID de la emisión en las estadísticas, siendo el número final en la URL, o haciendo clic en opciones junto a la emisión y luego en referencia API.
Un ejemplo completo sería:
<div id="mw_Tv1FSKM6ScX_webinargeek"></div>
<script>
(function(w,d,stn,sa,gn,se,fse){w[gn]=w[gn]||function(){(w[gn].q = w[gn].q||[]).push(arguments)};
se=d.createElement(stn);fse=d.getElementsByTagName(stn)[0];se.id=gn;se.async=1;
se.src=sa+'?t='+new Date().toISOString().slice(0, -9);fse.parentNode.insertBefore(se, fse);
})(window, document, 'script', 'https://malong.webinargeek.com/malong.embed.js', 'mw_Tv1FSKM6ScX');
mw_Tv1FSKM6ScX("init", {
project: "registration",
identifier: "2e467174-46e1-4305-9c33-587f0cd8ad7a",
shape: "inline",
broadcastId: "1234"
});
</script>
Enlaces de registro personalizados para formularios incrustados
Los enlaces de registro personalizados son enlaces que puedes crear para medir registros desde fuentes específicas. Te permiten usar diferentes enlaces de registro para distintas redes sociales y/o campañas publicitarias. Puedes leer más sobre los enlaces de registro personalizados y cómo crearlos en este artículo.
Aplicar enlaces de registro personalizados a formularios incrustados es un poco más complicado y requiere más conocimientos técnicos. Sin embargo, puedes seguir los pasos a continuación para aplicarlos a tus formularios incrustados una vez que hayas creado un enlace de registro personalizado:
Después de crear tu enlace de registro personalizado siguiendo los pasos en este artículo, ve a «Incrustar» al editar tu webinar.
Elige tu tipo de incrustación y personalízalo.
Copia el código y pégalo en un lugar donde puedas editarlo.
Añade una coma (,) al final de la línea antes de
});, por ejemplo después de:
shape: "inline"Crea una nueva línea encima de
});y añade:
cst: "<nombre de tu enlace personalizado>"
Lo que debes poner después decst:es la parte en negrita de tu enlace de registro personalizado, como se muestra en la captura de pantalla a continuación.El final de tu código debería quedar algo así. Ten en cuenta que cada tipo de formulario incrustado tiene una línea final diferente, y este ejemplo es para un formulario incrustado en línea. Si usas, por ejemplo, un botón incrustado, la penúltima línea podría decir
customTextColor: "#ffffff"en su lugar. Todo depende de la personalización de tu formulario incrustado.shape: "inline",
cst: "website"
});
</script>Copia y pega el código modificado donde quieras colocar tu formulario incrustado.
A continuación tienes un ejemplo de un código de formulario incrustado en línea con un enlace de registro personalizado aplicado en el código:
<div id="mw_Tv1FSKM6ScX_webinargeek"></div>
<script>
(function(w,d,stn,sa,gn,se,fse){w[gn]=w[gn]||function(){(w[gn].q = w[gn].q||[]).push(arguments)};
se=d.createElement(stn);fse=d.getElementsByTagName(stn)[0];se.id=gn;se.async=1;
se.src=sa+'?t='+new Date().toISOString().slice(0, -9);fse.parentNode.insertBefore(se, fse);
})(window, document, 'script', 'https://malong.webinargeek.com/malong.embed.js', 'mw_Tv1FSKM6ScX');
mw_Tv1FSKM6ScX("init", {
project: "registration",
identifier: "2e467174-46e1-4305-9c33-587f0cd8ad7a",
shape: "inline",
cst: "website"
});
</script>
Usar tu propio botón para formularios incrustados
Tienes la opción de usar tu propio botón para los formularios incrustados de tu webinar si las opciones de personalización del botón existentes no satisfacen tus necesidades. Para ello, tendrás que usar el tipo de incrustación «Enlace personalizado» como base y editar el código manualmente. Sigue los pasos a continuación:
Encuentra tu webinar en el listado de webinars y haz clic en su título
Haz clic en el botón «Editar webinar»
Ve a «Registro»
Ve a «Incrustar»
Selecciona «Enlace personalizado» como tipo de incrustación
Copia el código y pégalo en un lugar donde puedas editarlo
Ahora, reemplaza la primera línea del código, que debería ser similar a esta:
<span onclick="mw_IMdJQyvjVrd('registrationEvent', 'confirmSignup',con tu propio botón, asegurándote de mantener el atributo «onclick». Entonces, el código debería quedar similar a este:
<button class="tus nombres de clase" onclick="mw_IMdJQyvjVrd('registrationEvent', 'confirmSignup', [])">Regístrate aquí</button>
<script>
(function(w,d,stn,sa,gn,se,fse){w[gn]=w[gn]||function(){(w[gn].q = w[gn].q||[]).push(arguments)};
se=d.createElement(stn);fse=d.getElementsByTagName(stn)[0];se.id=gn;se.async=1;
se.src=sa+'?t='+new Date().toISOString().slice(0, -9);fse.parentNode.insertBefore(se, fse);
})(window, document, 'script', 'https://malong.webinargeek.com/malong.embed.js', 'mw_IMdJQyvjVrd');
mw_IMdJQyvjVrd("init", {
project: "registration",
identifier: "12345",
shape: "link"
});
</script>Cuando termines, copia y pega el código modificado en el código HTML de tu sitio web
¡No olvides guardar los cambios en tu sitio web!
Personalizar incrustaciones con CSS
Si las incrustaciones de WebinarGeek no encajan del todo con el estilo de tu sitio web, puedes usar CSS en tu sitio para modificarlas más allá de lo que permite el asistente de webinars.
Por ejemplo, podrías usar el siguiente CSS para cambiar el redondeo de los botones:
*::part(wg-button-primary) {
border-radius: 4px;
}
*::part(wg-button-secondary) {
border-radius: 4px;
}O este para cambiar los colores de tus botones en el formulario:
/* Botón */
*::part(wg-button-primary) {
background-color: rgb(0, 208, 255);
color: rgb(0, 0, 0)
}
/* Estado de foco */
*::part(wg-button-primary):focus-visible {
outline-color: rgb(0, 208, 255);
}
/* Capa de estado, indicando estado hover/focus/active */
*::part(wg-button-primary)::before {
background-color: rgb(0, 0, 0);
}
Debes añadir estas modificaciones al CSS de tu propio sitio web, porque es ahí donde se colocan las incrustaciones.
¡Atención! Estos cambios se aplican a todas y cada una de las incrustaciones de WebinarGeek en tu sitio web.