Este artículo trata sobre la página de registro que se introdujo en junio de 2025. Lee este artículo si todavía utilizas la versión anterior.
¿Sigues utilizando la versión anterior, pero quieres cambiar a la nueva? Consulta este artículo.
Si quieres que las personas se registren en tus webinars desde tu propio sitio web, el formulario incrustado 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 elemento 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 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 mosaico que muestra información sobre el webinar. Lo colocas en tu sitio web como una superposición que permanece visible mientras los visitantes se desplazan por la página.
El elemento incrustado en línea y los formularios que aparecen al usar las opciones de botón, enlace personalizado y widget utilizan los colores del tema de marca de tu cuenta. Sigue los pasos de este artículo para editarlos.
¡Importante! Cuando generas un código de inserción, le asignamos un identificador único. Este identificador único está en el código y solo se puede utilizar una vez por página, lo que significa que no puedes colocar el mismo código de inserción varias veces en una misma página. Si quieres utilizar el mismo formulario incrustado en varias ubicaciones de una página, tendrás que generar un nuevo código de inserción para que el identificador sea distinto. Para ello, actualiza la página y copia el nuevo código.
Crear un formulario incrustado
Sigue estos pasos para crear un formulario incrustado:
Busca tu webinar en la vista general de webinars y haz clic en su título
Haz clic en el botón «Editar webinar»
Ve a «Registro»
Ve a «Insertar»
Selecciona el tipo de formulario incrustado que quieres utilizar: botón, elemento 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!
¡Listo! Si has hecho todo correctamente, el elemento 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 elemento incrustado. Puedes personalizar lo siguiente:
Idioma
Tema
Colores
Página de confirmación
Sigue leyendo para saber cómo cambiar todo esto.
Cambiar el idioma del formulario incrustado
De forma predeterminada, el formulario incrustado utilizará 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. Puedes cambiar este ajuste en el menú desplegable «Idioma de inserción» después de seleccionar un tipo de inserción.
Cambiar el tema del formulario incrustado
De forma predeterminada, el formulario incrustado utilizará 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. Puedes cambiar este ajuste en el menú desplegable «Tema de inserción» después de seleccionar un tipo de inserción.
Cambiar los colores del formulario incrustado
De forma predeterminada, el formulario incrustado utilizará los colores del tema de tu cuenta. Puedes sustituirlos por colores personalizados para cada formulario incrustado. Puedes cambiar este ajuste marcando la casilla junto a «Anulación de tema personalizada» y seleccionando los colores que quieras utilizar. En el caso de los widgets, esto también determina el color del propio widget. Si quieres usar 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 colores. Así te aseguras de que los colores HEX que introduzcas se apliquen exactamente como los has introducido en el entorno de inserción.
Para usar los colores exactos de la marca, «Tema de inserción» debe estar configurado como «Claro» u «Oscuro», y no como «Coincidir con el tema del sistema del visitante», ya que esto permitiría que el tema cambiase automáticamente y podría afectar a cómo se muestran los colores de tu marca.
¡Consejo! No puedes previsualizar el formulario al crear una inserción de botón o enlace personalizado, pero puedes cambiar a «Elemento incrustado en línea» y volver para ver su aspecto.
Usar un formulario de registro de una sola página
De forma predeterminada, todos los tipos de inserciones incluyen un formulario de registro de varias páginas cuando se requiere que el Espectador introduzca más datos que su nombre y dirección de correo electrónico, incluso cuando elige entre varias fechas de emisión.
Puedes configurar las inserciones para que el formulario de registro incluya todos los campos de registro 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 incrustado
De forma predeterminada, los suscriptores ven una confirmación dentro del formulario incrustado cuando terminan de registrarse. Puedes establecer una URL personalizada a la que redirigir a las personas después de suscribirse haciendo clic en «Editar» en «Redirigir a los espectadores a una URL personalizada después del registro», pegando la URL en el cuadro de texto «URL personalizada» y haciendo clic en «Guardar».
Para botones
Elemento incrustado en línea e inserción fija
Hay dos tipos de botones de inserción: botones de inserción en línea y botones de inserción fijos. Ambos abren el formulario de registro al hacer clic, pero aparecen de forma distinta en tu sitio web.
El botón de inserción en línea se coloca en un lugar específico de tu sitio web y permanece allí siempre, lo que significa que desaparecerá de la pantalla si la persona, por ejemplo, se desplaza hacia abajo.
El botón de inserción fijo, por el contrario, permanece visible mientras los visitantes de tu sitio web se desplazan hacia arriba o hacia abajo. ¡Siempre está ahí, así que no pueden olvidarse de registrarse! Cuando usas el botón de inserción fijo, puedes elegir colocarlo abajo a la izquierda o abajo a la derecha de tu sitio web.
Texto y colores del botón
Puedes cambiar el texto y los colores del botón de inserción para adaptarlos a tu sitio web. Al crear el botón, utiliza 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 elementos incrustados en línea
Mostrar logotipo, título y fecha
De forma predeterminada, los formularios incrustados 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 con las casillas «Mostrar logotipo», «Mostrar título» y «Mostrar fecha». Desmarca cualquiera de ellas para ocultar ese elemento de la inserción en línea.
Estas opciones son ideales si quieres mostrar parte o toda esta información en tu sitio web a tu manera, sin que WebinarGeek la duplique dentro de la inserción.
La inserción en línea incluye un color de fondo de forma predeterminada. Si no se adapta a tu sitio web o prefieres utilizar el fondo de tu sitio web, configura el fondo de la inserción en línea como transparente marcando la casilla junto a «Fondo transparente».
Para enlaces personalizados
Texto del enlace personalizado
Puedes cambiar el texto del enlace personalizado para adaptarlo a tu webinar. Al crear el enlace personalizado, utiliza la opción «Texto del botón» de «Personalizar» para configurarlo a tu gusto.
Para widgets
Barra fija y mosaico fijo
Hay dos tipos de widgets: barras fijas y mosaicos fijos. Ambos abren el formulario de registro al hacer clic en su botón, pero aparecen de forma distinta 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 mosaico fijo, por el contrario, es una versión más pequeña del widget que ocupa menos espacio que la barra fija. Puede colocarse arriba a la izquierda, arriba a la derecha, abajo a la izquierda o abajo a la derecha, y permanece en esa posición.
Tanto la barra fija como el mosaico fijo siempre están visibles, independientemente de cuánto se desplacen las personas por tu sitio web. Permanecen fijados a la parte de la pantalla que elijas.
Colores del widget
A diferencia de las demás opciones de inserció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, el 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
Insertar como iframe
También puedes utilizar el código de inserción dentro de un iframe (consulta también aquí). El código de inserció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, ya que debe eliminarse si utilizas este método.
Hacer que la inserción preseleccione una emisión específica
Puedes hacer que la inserción preseleccione una emisión específica para asegurarte de que las personas se registren en una emisión concreta.
Para ello, añade lo siguiente 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 incrustados
Los enlaces de registro personalizados son enlaces que puedes crear para medir los registros procedentes de fuentes específicas. Te permiten utilizar distintos enlaces de registro para diferentes campañas en redes sociales o de publicidad. Puedes obtener más información sobre los enlaces de registro personalizados y cómo crearlos en this article.
Aplicar enlaces de registro personalizados a formularios incrustados es algo más difícil y requiere más conocimientos técnicos. No obstante, puedes seguir estos pasos para aplicarlos a tus formularios incrustados después de crear un enlace de registro personalizado:
Después de crear el enlace de registro personalizado siguiendo los pasos de este artículo, ve a «Insertar» al editar tu webinar.
Elige el tipo de inserción y personalízalo.
Copia el código y pégalo en algún 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 similar a este. Ten en cuenta que cada tipo de formulario incrustado tiene una última línea distinta y que este ejemplo corresponde a una inserción en línea. Si utilizas, por ejemplo, una inserción de botón, 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 editado donde quieras colocar el formulario incrustado.
A continuación se muestra un ejemplo de código de inserció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 incrustados
Tienes la opción de utilizar tu propio botón para los formularios incrustados 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 inserción «Enlace personalizado» como base y editar el código manualmente. Sigue estos pasos:
Busca tu webinar en la vista general de webinars y haz clic en su título
Haz clic en el botón «Editar webinar»
Ve a «Registro»
Ve a «Insertar»
Selecciona «Enlace personalizado» como tipo de inserción
Copia el código y pégalo en algún lugar donde puedas editarlo
Ahora, sustituye la primera línea del código, que debería tener un aspecto similar a este:
<span onclick="mw_IMdJQyvjVrd('registrationEvent', 'confirmSignup',por tu propio botón, asegurándote de conservar el atributo «onclick». A continuación, el código debería tener un aspecto similar 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 inserciones con CSS
Si las inserciones 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);
}
Añade estos elementos al CSS de tu propio sitio web, ya que es ahí donde se colocan las inserciones.
¡Importante! Estos cambios se aplican a todas las inserciones de WebinarGeek de tu sitio web.