> ## Knowledge Base Index
> Fetch the complete knowledge base index at: https://help.icommkt.com/sitemap.xml
> Use this file to discover available pages before exploring further.
> Pure-Markdown content can be obtained by appending a '.md' suffix to the content URLs listed in the sitemap (without the trailing slash).

# 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.

![](https://storage.crisp.chat/users/helpdesk/website/-/e/4/b/4/e4b41ef8ae96c800/image_1492749.png =879xauto)

###### 2. Creación del Modal
1. Haga clic en el botón **Crear modal**.

![](https://storage.crisp.chat/users/helpdesk/website/-/e/4/b/4/e4b41ef8ae96c800/image_1g4meis.png =788xauto)

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**.

![](https://storage.crisp.chat/users/helpdesk/website/-/e/4/b/4/e4b41ef8ae96c800/image_hcpybx.png =446xauto)


| Nota: La pantalla de edición ofrece la alternativa de "Crear con AI" ingresando un prompt detallado.

###### 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__](https://help.icommkt.com/es/article/como-crear-el-pop-up-de-suscripcion-desde-sitios-1e190y5/#1-contenido-del-modal) → Configuración del título, textos, botones (envío y cierre), alineaciones y elementos visibles.
* [__Caso de éxito__](https://help.icommkt.com/es/article/como-crear-el-pop-up-de-suscripcion-desde-sitios-1e190y5/#1-en-caso-de-exito) → Personalización de la pantalla que verá el usuario una vez que se suscriba.
* [__Estilos del modal__](https://help.icommkt.com/es/article/como-crear-el-pop-up-de-suscripcion-desde-sitios-1e190y5/#1-estilos-del-modal) → Diseño visual general (colores, fondos, bordes, tipografías, etc.).
* [__Campos de formulario__](https://help.icommkt.com/es/article/como-crear-el-pop-up-de-suscripcion-desde-sitios-1e190y5/#1-campos-del-formulario) → Definición de los datos que solicitarás (email, nombre, teléfono, campos personalizados, etc.).
* [__Términos y condiciones__ ](https://help.icommkt.com/es/article/como-crear-el-pop-up-de-suscripcion-desde-sitios-1e190y5/#1-terminos-y-condiciones)→ Inclusión y configuración de consentimiento.
* [Embeber ](#6-4-configuracion-de-embeber)→ Definición de dónde se mostrará el modal embebido
* [__Reglas de visibilidad__ ](https://help.icommkt.com/es/article/como-crear-el-pop-up-de-suscripcion-desde-sitios-1e190y5/#1-reglas-de-visibilidad)→ Segmentación y condiciones bajo las cuales se mostrará.
* [__Base de datos__](https://help.icommkt.com/es/article/como-crear-el-pop-up-de-suscripcion-desde-sitios-1e190y5/#1-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.
   * 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é hace**Insertar y reemplazar**El modal reemplaza por completo al elemento seleccionado.**Insertar como último elemento**El modal se inserta dentro del elemento seleccionado, como su último elemento hijo.**Insertar como primer elemento**El modal se inserta dentro del elemento seleccionado, como su primer elemento hijo.**Insertar antes**El modal se inserta inmediatamente antes del elemento seleccionado, al mismo nivel jerárquico.**Insertar después**El 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:

![](https://storage.crisp.chat/users/helpdesk/website/-/e/4/b/4/e4b41ef8ae96c800/ejemploselector-ezgifcom-optim_bewzep.gif)

||| **Nota:** Si el modal no se muestra en el lugar esperado luego de publicar los cambios y aguardar unos minutos, se recomienda repetir el proceso y probar con una opción de posición diferente, ya que distintos elementos de la página pueden requerir distintas ubicaciones relativas.


###### 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.


![](https://storage.crisp.chat/users/helpdesk/website/-/e/4/b/4/e4b41ef8ae96c800/image_okaely.png =702xauto)
||| Importante: guardar un modal no significa que los cambios estén publicados. Para que las modificaciones se reflejen en tu sitio web, deberás hacer clic en Publicar.

## 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.**

   ![](https://storage.crisp.chat/users/helpdesk/website/-/e/4/b/4/e4b41ef8ae96c800/image_1o4kret.png =230xauto)
3. Selecciona la versión que deseas recuperar.
4. Haz clic en **Restaurar**.

   ![](https://storage.crisp.chat/users/helpdesk/website/-/e/4/b/4/e4b41ef8ae96c800/image_1p9j1tz.png =244xauto)

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**.

||| Importante: restaurar una versión anterior no implica publicarla. Podrás revisar o modificar el borrador recuperado antes de publicarlo.

###### ¿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.

|| Importante: Los datos del usuario que completa el pop-up se almacenan en el almacenamiento local del dispositivo; esto significa que si una persona deja sus datos desde una computadora y luego accede desde otro dispositivo (por ejemplo, su celular), el pop-up volverá a mostrarse. Lo mismo sucede si se navega desde incógnito.

| ¿Tienes dudas? Consulta a tu Customer Success o contacta a nuestro equipo de soporte vía Chat.