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

1. Haga clic en Guardar el modal para conservar los cambios de diseño y lógica.
2. Paso Crítico de Publicación: Diríjase a la parte superior de la pantalla, justo al lado del nombre del modal, y proceda a activar el switch de encendido. Asegúrese de que el indicador cambie y figure en color verde para que empiece a impactar en el sitio en producción.

Actualizado el: 14/07/2026