Artículos sobre: Sitios

¿Cómo crear un modal de tipo encuesta desde Sitios?

El modal de tipo encuesta permite mostrar una encuesta del módulo de Encuestas directamente en tu sitio web, como pop-up o insertada dentro de la página. Tus visitantes responden sin salir de la navegación y sin abrir enlaces externos.

Beneficios

Más respuestas: la encuesta aparece en el momento y el lugar que definas, mientras el usuario navega.
Configuración en un solo lugar: diseño, disparador, páginas y calendario se configuran igual que en el resto de los modales.
Reutilización: una misma encuesta publicada puede mostrarse en distintos modales o sitios.
Vista previa interactiva: puedes recorrer la encuesta completa desde el editor antes de publicarla.

Casos de uso

Puedes utilizar los modales de tipo encuesta para conocer mejor a tus visitantes, recoger opiniones y obtener información útil para mejorar su experiencia. Según tu objetivo, puedes mostrar la encuesta como un pop-up mientras navegan por tu sitio o embeberla directamente en una página.
Algunos ejemplos de aplicación son:

Moda y tiendas online: conocer la opinión de quienes compraron recientemente, consultar por qué abandonaron el carrito, identificar preferencias de productos o relevar qué categorías les gustaría encontrar en la tienda.
Retail y consumo masivo: medir la satisfacción con la experiencia de compra, consultar sobre la variedad de productos, evaluar promociones o recoger sugerencias para mejorar el servicio.
Inmobiliarias: conocer qué tipo de propiedad buscan los visitantes, identificar sus preferencias de ubicación y presupuesto, o consultar qué información necesitan para avanzar en una operación.
Concesionarias de autos: relevar qué modelos interesan a los visitantes, conocer sus preferencias de financiación, consultar si desean coordinar una prueba de manejo o identificar qué información necesitan antes de comprar un vehículo.
Industria farmacéutica: conocer la experiencia de navegación en sitios informativos, identificar qué contenidos o recursos de salud resultan de mayor interés y recoger sugerencias sobre la información disponible.
Cursos y formación: consultar qué temáticas interesan a los visitantes, conocer sus objetivos de aprendizaje, identificar qué modalidad prefieren (online o presencial) o relevar qué les impide inscribirse.
Experiencias, eventos y talleres: conocer los intereses de los visitantes, consultar qué actividades les gustaría realizar, evaluar horarios y formatos preferidos o recoger opiniones después de una experiencia.

Requisitos previos

Para que la encuesta se vea en tu sitio, antes de crear el modal necesitas contar con:

Un Sitio creado en el módulo de Sitios. Consulta la Guía general del módulo Sitios.
El script de Sitios instalado en tu web. Lo encuentras haciendo clic en Ver script dentro de tu Sitio. Para instalarlo, pide a tu equipo técnico que lo inserten en el head de tu web o consulta Cómo implementar Scripts en Google Tag Manager.
Una encuesta creada y publicada en el módulo de Encuestas. Solo las encuestas publicadas aparecen disponibles para seleccionarlas en el modal. Consulta nuestra documentación de Encuestas.

Dentro de tu Sitio, en la pestaña Modales, haz clic en Crear modal.

Completa el Nombre del modal.
En Tipo, selecciona Encuesta.
Describe el Objetivo del modal.
Haz clic en Crear modal.

Se abrirá el editor del modal. A la izquierda encontrarás las secciones de configuración y, a la derecha, la vista previa, que puedes alternar entre escritorio y móvil con los íconos de la parte superior.

Las opciones de personalización están organizadas en secciones desplegables, igual que en el resto de los modales de icomm, y aparecen en este orden: Contenido del modal, Encuesta, En caso de éxito, Estilos del modal, Embeber, Disparador y Reglas de visibilidad. Todos los cambios se reflejan al instante en la vista previa.

Título y Texto: son el encabezado que acompaña a la encuesta (por ejemplo, "Queremos conocer tu opinión"). En cada campo puedes cambiar la tipografía, el tamaño de la fuente y agregar emojis.
Color del texto: define el color según tu identidad de marca.
Alineación del texto: izquierda, centro, derecha o justificado.
Botón de cierre: activa o desactiva la cruz para cerrar el modal.

Encuesta

Este paso es exclusivo del modal de tipo encuesta: aquí defines qué encuesta verán tus visitantes.

En la sección Encuesta, elige el espacio de trabajo donde se encuentra tu encuesta: el espacio de trabajo actual, General u otro de tus espacios de trabajo.

Utiliza el campo Buscar una encuesta publicada para encontrarla y haz clic sobre ella.

La encuesta quedará seleccionada con su nombre y URL. Si quieres elegir otra, haz clic en Cambiar.
Revisa la encuesta en la vista previa: puedes recorrer todas sus preguntas. Verás el aviso "Estás viendo esta encuesta en modo vista previa. Tus respuestas no se guardarán", por lo que puedes probarla sin generar respuestas reales.

Importante: para saber quién respondió la encuesta, agrega en la configuración de la encuesta un campo oculto con la clave icomm_uid. Sin este campo la encuesta funciona igual, pero las respuestas quedan anónimas.

En caso de éxito

Define qué ocurre cuando el usuario termina de responder la encuesta. En Acción puedes elegir:

Mostrar mensaje: muestra un mensaje de agradecimiento.
Cerrar modal: el modal se cierra automáticamente.
No hacer nada: el modal queda abierto y la encuesta muestra su pantalla de despedida, la que se configura en el módulo de Encuestas.

Si eliges Mostrar mensaje, puedes configurar:

Título y Texto del mensaje (por ejemplo, "¡Gracias por responder!"), con su alineación.
Botón de confirmación: actívalo para agregar un botón y personaliza su texto, color de fondo, color del texto, borde (color, estilo, grosor y radio) y alineación.

Ancho: Auto, Pantalla completa o Personalizado (en píxeles).
Alto: Auto o personalizado.
Márgenes: superior, inferior, izquierdo y derecho.
Color de fondo y Radio del borde.

Imagen: con Cargar imagen puedes subir una imagen nueva, elegir una de tu biblioteca (Buscar en mi biblioteca) o crearla con Generar con AI.
Posición del modal: elige una de las 9 ubicaciones de la grilla y define la distancia a los bordes con los campos Alejar del borde.

Sombra: agrega sombra al modal.
Bloqueo de página: impide que el usuario interactúe con la página mientras el modal está visible.
Cerrar modal al hacer click en el fondo: permite cerrar el modal haciendo clic fuera de él.

Embeber (opcional)

Activa la opción "Insertar el modal dentro de un elemento de la página en lugar de abrirlo encima" para que la encuesta forme parte del contenido de la página, en lugar de aparecer como pop-up.

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 tu sitio web real y solo necesitas seleccionar el lugar deseado: icomm identifica automáticamente el selector correspondiente.

Dentro de la sección Embeber, haz clic en Elegir desde el sitio, ubicado debajo del campo Selector.
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 recorres la página.
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 te permite identificar qué bloque vas a seleccionar antes de hacer clic.
Haz clic sobre el elemento deseado. icomm detecta automáticamente su selector y lo muestra en el panel, sin necesidad de escribirlo manualmente.
Si es necesario, ajusta la selección:
- Si el elemento seleccionado no es exactamente el buscado, usa las flechas ▲ ▼ junto al selector para desplazarte entre el elemento "padre" y sus elementos "hijos" dentro de la estructura de la página, sin volver a hacer clic sobre el sitio.
- Para descartar la selección actual y elegir otro elemento, utiliza el botón Reiniciar selección.
Define dónde se insertará el modal en relación con el elemento seleccionado, mediante el desplegable Posición:

Opción	Qué 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.

Una vez definidos el elemento y la posición, haz clic en Guardar selección para confirmar. Para descartar los cambios y cerrar el panel sin guardar, haz clic en Cancelar.
Al guardar, vuelves automáticamente al editor del modal. Los campos Selector y Posición quedarán completados con la información elegida y podrás ver el resultado en la vista previa, a la derecha del editor.

Disparador

Define cuándo aparece el modal. En Tipo de disparador puedes elegir entre: Tiempo de espera, Abandono de ventana, Click, Observar, Evento y Después de otro modal. Si eliges Tiempo de espera, indica los segundos que deben pasar antes de mostrar la encuesta.

Con la opción Reiniciar activada, defines cuánto tiempo debe pasar (por ejemplo, 6 días) para que el modal vuelva a mostrarse a un mismo usuario.

Para usar el disparador Click, consulta Cómo vincular un botón al disparador click en un pop-up.

Reglas de visibilidad

En Mostrar en defines en qué páginas aparece el modal:

Todas las páginas: el evento se dispara en todas las páginas
Páginas específicas: solo en las páginas que indiques.
Todas las páginas, excepto…: en todas las páginas menos las que indiques.

En las dos últimas opciones puedes usar asteriscos para un filtro más avanzado. Por ejemplo, https://midominio.com/productos* aplica a las páginas que comienzan con "productos", *carrito a las que terminan con "carrito" y *checkout* a cualquier URL que contenga "checkout".

En Cuándo mostrar defines el período de visualización:

Siempre: el modal se muestra sin restricciones de fecha ni horario.
Personalizado: combina un rango de fechas (Desde / Hasta, opcional), todos los días o días específicos de la semana, y todo el día o ventanas horarias.

Importante: para que la encuesta se vea en tu sitio, el modal debe estar guardado, publicado y activo, y el script de Sitios debe estar instalado en tu web. Si falta cualquiera de estos pasos, la encuesta no se mostrará.

Antes de finalizar, puedes usar el botón Vista previa para revisar el diseño y el funcionamiento del modal.

1. Guardar

Haz clic en Guardar. Los cambios se guardan como borrador: verás el mensaje "Cambios guardados. No se ven en el sitio hasta que publiques" y la etiqueta Cambios sin publicar junto al nombre del modal.
Guardar te permite editar el modal sin modificar la versión que se muestra en tu sitio: tus visitantes seguirán viendo la última versión publicada.

2. Publicar

Haz clic en Publicar para que la configuración del borrador se aplique en tu sitio. Verás el mensaje "Publicado como versión X. Ya se ve en el sitio" y la etiqueta de versión se actualizará (por ejemplo, Versión 2 publicada). Cada publicación genera una nueva versión en el historial.

3. Activar

Aunque el mensaje de publicación indique que el modal ya se ve en el sitio, un modal recién creado queda en estado Inactivo y no se mostrará a tus visitantes hasta que lo actives.

Haz clic en el desplegable de estado Inactivo, junto al nombre del modal.
Selecciona Activar.

Verás el mensaje "Estado cambiado con éxito" y el estado pasará a Activo.

También puedes activar o desactivar el modal desde la pantalla principal de Sitios, en la pestaña Modales.

Checklist final

Verifica que se cumplan todas estas condiciones para que la encuesta se vea en tu sitio:

La encuesta está publicada en el módulo de Encuestas.
El script de Sitios está instalado en tu web.
El modal está guardado y publicado.
El modal está en estado Activo.

Tip: si más adelante modificas el modal, recuerda que guardar no publica los cambios. Para que se vean en tu sitio, debes hacer clic en Publicar nuevamente. Si necesitas recuperar una configuración anterior, consulta la sección de historial de versiones desde el desplegable que indica la versión publicada.