Este artículo trata sobre la página de registro introducida en junio de 2025. Lee este artículo en su lugar si aún utilizas la versión anterior.
¿Sigues utilizando la versión anterior, pero quieres cambiar a la nueva? Consulta este artículo.
Si quieres que la gente se inscriba en tus webinars desde tu propio sitio web, el formulario integrado es tu mejor aliado. Te permite colocar el formulario de registro en tu sitio web de una de estas cuatro formas:
Como botón
Esta opción es un botón que abre el formulario de registro. Puedes colocarlo en una ubicación fija de tu sitio web o como una superposición que permanece visible mientras los visitantes se desplazan por la página.
Como integración 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 enlace sencillo 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 tarjeta que muestra información del webinar. La colocas en tu sitio web como una superposición que permanece visible mientras los visitantes se desplazan por la página.
La integración en línea y los formularios que aparecen al utilizar las opciones de botón, enlace personalizado y widget usan los colores del tema de marca de tu cuenta. Sigue los pasos de este artículo para modificarlos.
¡Importante! Al generar un código de integración, le asignamos un identificador único. Este identificador está incluido en el código y solo se puede usar una vez por página; por tanto, no puedes colocar el mismo código de integración varias veces en una misma página. Si quieres usar el mismo formulario integrado en varias ubicaciones de una página, tendrás que generar un código de integración nuevo con un identificador distinto. Para hacerlo, actualiza la página y copia el código nuevo.
Crear un formulario integrado
Sigue estos pasos para crear un formulario integrado:
Busca tu webinar en la lista de webinars y haz clic en su título
Haz clic en el botón «Editar webinar»
Ve a «Registro»
Ve a «Integrar»
Selecciona el tipo de formulario integrado que quieres usar: botón, integración en línea, enlace personalizado o widget.
Personaliza el formulario integrado que has elegido. Encontrarás descripciones de todas las opciones aquí.
Cuando termines, copia el código haciendo clic en el icono con dos páginas e inclúyelo en el código HTML de tu sitio web.
¡No olvides guardar los cambios en tu sitio web!
¡Y listo! Si has hecho todo correctamente, la integración 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 integración. Puedes personalizar lo siguiente:
Idioma
Tema
Colores
Página de confirmación
Sigue leyendo para descubrir cómo cambiar cada una de estas opciones.
Cambiar el idioma del formulario integrado
De forma predeterminada, tu formulario integrado utilizará el idioma de tu webinar. También puedes configurarlo para que utilice el idioma del navegador del visitante o un idioma fijo de una lista. Puedes cambiar este ajuste en el menú desplegable «Idioma de integración» después de seleccionar un tipo de integración.
Cambiar el tema del formulario integrado
De forma predeterminada, tu formulario integrado utilizará el tema estándar de tu cuenta (claro u oscuro). También puedes configurarlo para que utilice el tema del sistema del visitante o un tema fijo. Puedes cambiar este ajuste en el menú desplegable «Tema de integración» después de seleccionar un tipo de integración.
Cambiar los colores del formulario integrado
De forma predeterminada, tu formulario integrado utilizará los colores del tema de tu cuenta. Puedes sustituirlos por colores personalizados para cada formulario integrado. Para cambiar este ajuste, marca la casilla junto a «Anulación del tema personalizado» y selecciona los colores que quieras usar. En el caso de los widgets, también determina el color del propio widget. Si quieres utilizar los colores exactos de tu marca en lugar de una versión ajustada según la teoría del color, activa «Usar colores exactos de la marca» en el selector de color. Así te aseguras de que los colores HEX que introduzcas se apliquen exactamente como se han introducido en el entorno de integración.
Para utilizar los colores exactos de la marca, «Tema de integración» debe estar configurado como «Claro» u «Oscuro», y no como «Coincidir con el tema del sistema del visitante», ya que esta última opción permitiría que el tema cambiase automáticamente y podría afectar a la visualización de los colores de tu marca.
Consejo: No puedes previsualizar el formulario al crear una integración de botón o enlace personalizado, pero puedes cambiar a «Integración en línea» y volver para ver cómo quedará.
Usar un formulario de registro de una sola página
De forma predeterminada, todos los tipos de integración incluyen un formulario de registro de varias páginas cuando el espectador debe introducir algo más que su nombre y dirección de correo electrónico, incluso cuando debe elegir entre varias fechas de emisión.
Puedes configurar las integraciones para que el formulario de registro muestre todos los campos en una sola página mediante la casilla junto a «Formulario de una sola página».
Usar una página de confirmación personalizada para el formulario integrado
De forma predeterminada, los suscriptores ven una confirmación dentro del formulario integrado al terminar de inscribirse. Puedes establecer una URL personalizada a la que redirigir a las personas después de suscribirse: haz clic en «Editar», debajo de «Redirigir a los espectadores a una URL personalizada después del registro», pega la URL en el cuadro de texto «URL personalizada» y haz clic en «Guardar».
Para botones
Integración en línea e integración fija
Hay dos tipos de botones de integración: botones de integración en línea y botones de integración fija. Ambos abren el formulario de registro al hacer clic, pero se muestran de forma diferente en tu sitio web.
El botón de integración en línea se coloca en un lugar específico de tu sitio web y permanece allí; por tanto, desaparecerá de la pantalla de una persona si, por ejemplo, se desplaza hacia abajo.
El botón de integración fija, en cambio, permanece visible mientras los visitantes de tu sitio web se desplazan hacia arriba o hacia abajo. ¡Siempre está ahí, así que no podrán olvidarse de registrarse! Cuando uses el botón de integración fija, puedes elegir colocarlo en la esquina inferior izquierda o derecha de tu sitio web.
Texto y colores del botón
Puedes cambiar el texto y los colores de tu botón de integración para adaptarlos a tu sitio web. Al crear el botón, usa las opciones «Texto del botón», «Color del botón» y «Color del texto del botón» de «Personalizar» para configurarlo a tu gusto.
Para integraciones en línea
Mostrar el logotipo, el título y la fecha
De forma predeterminada, los formularios de integración en línea muestran el logotipo de tu empresa, el título del webinar y la fecha/hora del webinar encima del formulario de registro. Ahora puedes controlar cada uno de estos elementos de forma independiente mediante las casillas «Mostrar logotipo», «Mostrar título» y «Mostrar fecha». Desmarca cualquiera de ellas para ocultar ese elemento de tu integración en línea.
Estas opciones son perfectas si quieres mostrar parte o toda esta información en tu sitio web a tu manera, sin que WebinarGeek la duplique dentro de la integración.
La integración en línea incluye un color de fondo de forma predeterminada. Si no se adapta a tu sitio web o prefieres usar el fondo de tu sitio, configura el fondo de la integración en línea como transparente marcando la casilla junto a «Fondo transparente».
Para enlaces personalizados
Texto del enlace personalizado
Puedes cambiar el texto de tu enlace personalizado para adaptarlo a tu webinar. Al crear el enlace personalizado, usa la opción «Texto del botón» de «Personalizar» para configurarlo a tu gusto.
Para widgets
Barra fija y tarjeta fija
Hay dos tipos de widgets: barras fijas y tarjetas fijas. Ambos abren el formulario de registro al hacer clic en su botón, pero se muestran 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.
La tarjeta fija, en cambio, es una versión más pequeña del widget que ocupa menos espacio que la barra fija. Puedes colocarla en la esquina superior izquierda, superior derecha, inferior izquierda o inferior derecha, y permanece en esa posición.
Tanto la barra fija como la tarjeta fija permanecen siempre visibles, independientemente de cuánto se desplacen las personas por tu sitio web. Se fijan a la zona de la pantalla que elijas.
Colores del widget
A diferencia de las demás opciones de integración, los colores del widget los determinan los colores del tema de tu cuenta, que también se aplican al propio formulario de registro.
De forma predeterminada, tu widget utilizará los colores del tema de tu cuenta. Puedes sustituirlos por colores personalizados para cada widget.
Texto del botón
The text on the button of your widget can be changed to suit your webinar. While creating your widget, use the ‘Texto del botón’ option under ‘Cutomize’ to customize the text on the widget’s button to your liking.
Configuración avanzada
Integrar como iframe
También puedes usar el código de integración dentro de un iframe, pero para ello debes usar «srcdoc» (consulta también aquí). El código de integración tendrá este aspecto:
<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 observar, el <div id="mw_Tv1FSKM6ScX_webinargeek"></div> ha desaparecido, porque debe eliminarse si utilizas este método.
Hacer que la integración preseleccione una emisión específica
Puedes hacer que la integración preseleccione una emisión específica para asegurarte de que la gente se registre para una emisión en concreto.
Para hacerlo, añade esto al código:
,
broadcastId: "1234"
Puedes encontrar el ID de la emisión en las estadísticas, como el último número de la URL, o haciendo clic en las opciones junto a la emisión y después en la referencia de la 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 integrados
Los enlaces de registro personalizados son enlaces que puedes crear para medir los registros procedentes de fuentes específicas. Te permiten usar enlaces de registro distintos para diferentes campañas de redes sociales o publicidad. Puedes obtener más información sobre los enlaces de registro personalizados y cómo crearlos en este artículo.
Aplicar enlaces de registro personalizados a formularios integrados es algo más difícil y requiere más conocimientos técnicos. Sin embargo, una vez que hayas creado un enlace de registro personalizado, puedes seguir estos pasos para aplicarlo a tus formularios integrados:
Después de crear tu enlace de registro personalizado siguiendo los pasos de este artículo, ve a «Integrar» al editar tu webinar.
Elige el tipo de integració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 anterior a
});, por ejemplo, después de:
shape: "inline"Crea una línea nueva encima de
});y añade:
cst: "<your custom link name>"
Lo que debes introducir después decst:es la parte en negrita de tu enlace de registro personalizado, como se muestra en la captura de pantalla siguiente.El final del código debería tener un aspecto parecido a este. Ten en cuenta que cada tipo de formulario integrado tiene una línea final diferente y que este ejemplo es para una integración en línea. Si utilizas, por ejemplo, una integración de botón, la penúltima línea podría ser
customTextColor: "#ffffff"en su lugar. Todo depende de la personalización de tu formulario integrado.shape: "inline",
cst: "website"
});
</script>Copia y pega el código editado donde quieras colocar el formulario integrado.
A continuación tienes un ejemplo de código de integración 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 integrados
Puedes usar tu propio botón para los formularios integrados de tu webinar si las opciones de personalización de botones disponibles no cubren tus necesidades. Para ello, tendrás que usar el tipo de integración «Enlace personalizado» como base y editar el código manualmente. Sigue estos pasos:
Busca tu webinar en la lista de webinars y haz clic en su título
Haz clic en el botón «Editar webinar»
Ve a «Registro»
Ve a «Integrar»
Selecciona «Enlace personalizado» como tipo de integración
Copia el código y pégalo en un lugar donde puedas editarlo
Ahora, sustituye la primera línea del código, que debería tener un aspecto parecido a este:
<span onclick="mw_IMdJQyvjVrd('registrationEvent', 'confirmSignup',por tu propio botón, asegurándote de conservar el atributo «onclick». Después, el código debería tener un aspecto parecido a este:
<button class="your class names" onclick="mw_IMdJQyvjVrd('registrationEvent', 'confirmSignup', [])">Register here</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 integraciones con CSS
Si las integraciones de WebinarGeek no encajan del todo con el estilo de tu sitio web, puedes usar CSS en tu sitio web para modificarlas más allá de lo que permite el asistente del webinar.
Por ejemplo, puedes 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 los botones del formulario:
/* Button */
*::part(wg-button-primary) {
background-color: rgb(0, 208, 255);
color: rgb(0, 0, 0)
}
/* Focus state */
*::part(wg-button-primary):focus-visible {
outline-color: rgb(0, 208, 255);
}
/* State-layer, indicating hover/focus/active state */
*::part(wg-button-primary)::before {
background-color: rgb(0, 0, 0);
}
Haz estas adiciones al CSS de tu propio sitio web, ya que es donde se colocan las integraciones.
¡Importante! Estos cambios se aplican a todas las integraciones de WebinarGeek de tu sitio web.