Creación y Configuración de Modales Embebidos en icomm

Este artículo proporciona la información necesaria para crear, personalizar e implementar modales embebidos a través de icomm. A diferencia de los modales emergentes tradicionales (pop-ups), los modales embebidos se integran de forma nativa en la estructura de la página web del cliente.

Beneficios de los Modales Embebidos

La implementación de formularios de suscripción embebidos ofrece ventajas estratégicas clave para la captación de usuarios y la experiencia de navegación:

• Visibilidad permanente y no Intrusiva: El modal se muestra de forma constante en una sección personalizada del sitio web.
• Captación Continua (Always-On): El componente se mostrará siempre, de manera independiente a si el usuario ya se ha suscrito previamente o si ya se encuentra identificado en los registros del sitio. Esto asegura un canal de contacto y actualización de datos permanentemente disponible.
• Integración estética orgánica: Al insertarse dentro del diseño maquetado del sitio, se percibe como parte nativa de la plataforma del cliente, incrementando la confianza del usuario al momento de completar el formulario.

Paso a Paso para la Configuración en icomm

1. Navegación en la Plataforma

1. Inicie sesión en la plataforma de icomm y diríjase al módulo lateral izquierdo.
2. Haga clic en la sección de Personalización.
3. Seleccione la opción Sitios y posteriormente haga clic en Mis sitios.
4. En la pantalla de visualización, localice el sitio web específico que tiene anclada la URL donde desea que impacte el modal (crucial si administra más de un Sitio).
5. Haga clic en la flecha lateral derecha correspondiente al sitio seleccionado y luego presione Editar para acceder a la pantalla de edición del sitio.

2. Creación del Modal

1. Haga clic en el botón Crear modal.

2. Defina el Nombre del modal. Se sugiere utilizar un nombre claro y representativo para facilitar su posterior diferenciación.
3. Despliegue el campo Tipo y seleccione la opción Embed.
4. Complete el campo de Objetivo y haga clic en el botón definitivo de Crear modal.

3. Personalización y Configuración de Secciones

Una vez creado el contenedor, deberá navegar por las pestañas de configuración interna para personalizar la experiencia:

• Contenido del modal → Configuración del título, textos, botones (envío y cierre), alineaciones y elementos visibles.
• Caso de éxito → Personalización de la pantalla que verá el usuario una vez que se suscriba.
• Estilos del modal → Diseño visual general (colores, fondos, bordes, tipografías, etc.).
• Campos de formulario → Definición de los datos que solicitarás (email, nombre, teléfono, campos personalizados, etc.).
• Términos y condiciones → Inclusión y configuración de consentimiento.
• Embeber → Definición de dónde se mostrará el modal embebido
• Reglas de visibilidad → Segmentación y condiciones bajo las cuales se mostrará.
• Base de datos → Selección de dónde se almacenarán los nuevos contactos.

4. Configuración de Embeber

Para definir en qué parte de la página se mostrará el modal embebido, icomm cuenta con la herramienta "Elegir desde el sitio", que permite seleccionar visualmente el elemento de la página donde se insertará el modal. Al hacer clic en el botón, se abre el sitio web real y solo es necesario seleccionar el lugar deseado: icomm identifica automáticamente el selector correspondiente.

Pasos para seleccionar el selector:

1. Dentro de la sección "Embeber" del editor del modal, hacer clic en el botón "Elegir desde el sitio", ubicado debajo del campo "Selector".
2. Se abrirá el sitio web donde se insertará el modal. En la parte inferior de la pantalla aparecerá el panel "Elegir ubicación del modal", que permanece visible en la misma posición mientras se recorre la página.
3. El panel muestra activo el "Modo: Selección". Al desplazar el cursor sobre la página, cada elemento se resalta con un borde celeste, lo que permite identificar visualmente qué bloque se va a seleccionar antes de hacer clic.
4. Hacer clic sobre el elemento deseado. Al seleccionarlo, icomm detecta automáticamente su selector y lo muestra en el panel, evitando tener que escribirlo manualmente.
5. • Si el elemento seleccionado no es exactamente el buscado, se pueden usar las flechas ▲ ▼ ubicadas junto al selector para desplazarse entre el elemento "padre" y sus elementos "hijos" dentro de la estructura de la página, sin necesidad de volver a hacer clic sobre el sitio.
   • Para descartar la selección actual y elegir un elemento distinto, se puede utilizar el botón "Reiniciar selección".
5. Definir dónde se insertará el modal en relación con el elemento seleccionado, mediante el desplegable "Posición". Las opciones disponibles son:OpciónQué haceInsertar y reemplazarEl modal reemplaza por completo al elemento seleccionado.Insertar como último elementoEl modal se inserta dentro del elemento seleccionado, como su último elemento hijo.Insertar como primer elementoEl modal se inserta dentro del elemento seleccionado, como su primer elemento hijo.Insertar antesEl modal se inserta inmediatamente antes del elemento seleccionado, al mismo nivel jerárquico.Insertar despuésEl modal se inserta inmediatamente después del elemento seleccionado, al mismo nivel jerárquico.
6. Una vez definidos el elemento y la posición, hacer clic en "Guardar selección" para confirmar. Para descartar los cambios y cerrar el panel sin guardar, hacer clic en "Cancelar".
7. Al guardar, se vuelve automáticamente al editor del modal. Los campos "Selector" y "Posición" quedarán completados con la información elegida, y el resultado podrá visualizarse en el panel de vista previa ubicado a la derecha del editor.

Ejemplo:

5. Configuración de Posicionamiento

Esta opción es completada automatícamente al utilizar el botón "Elegir desde el sitio", del paso anterior.

6. Finalización y Activación: Guardar y publicar los cambios del modal

Una vez que hayas configurado tu modal embebido, podrás acceder a la Vista Previa para revisar su diseño y funcionamiento antes de publicarlo.
Los cambios que realices en el modal se guardan inicialmente como borrador. Esto significa que podrás editar y guardar tu configuración sin modificar la versión que actualmente se muestra en tu sitio web.
Para gestionar los cambios, encontrarás las siguientes opciones:

• Guardar: guarda los cambios realizados como borrador, sin afectar la versión publicada. Los visitantes de tu sitio seguirán viendo la última versión publicada del modal.
• Publicar: publica la configuración del borrador para que los cambios se reflejen en tu sitio web. Cada publicación genera una nueva versión que se incorpora al historial.
• Descartar cambios: elimina las modificaciones del borrador y recupera la configuración de la versión actualmente publicada.

Historial de versiones

Los modales cuentan con un Historial que permite consultar las versiones publicadas anteriormente y recuperar una configuración previa cuando sea necesario.
Cada vez que publiques cambios en un modal, se generará una nueva versión que quedará registrada en el historial.

¿Cómo restaurar una versión anterior?

1. Ingresa a la configuración del modal.
2. Accede al detalle de la versión para consultar las versiones publicadas. Haz clic en Historial.

   
   

   
   
3. Selecciona la versión que deseas recuperar.
4. Haz clic en Restaurar.

   
   

   
   

Al restaurar una versión, su configuración se copiará al borrador del modal. La versión que está publicada en el sitio no se modificará automáticamente.
Para aplicar la configuración restaurada en tu sitio web, deberás hacer clic en Publicar.

¿Qué configuraciones se incluyen en las versiones?

El historial conserva la configuración del modal, incluyendo los webhooks y las integraciones con CDP.
Esto significa que, al restaurar una versión anterior, también se recuperarán las configuraciones de webhooks e integraciones asociadas a esa versión.
El nombre del modal no forma parte del versionado, por lo que no se modifica al restaurar una versión anterior.

Actualizado el: 19/10/2026