Cómo crear un mapa de imagen en WordPress (y hacerlo realmente interactivo)

Un image map es un concepto simple: tomas una imagen y haces que partes de ella sean interactivas. Haz clic en un país y aparece un tooltip. Haz clic en una pieza de un producto y ves sus detalles. Haz clic en una habitación en el plano de un piso y se expande con información.

La forma clásica de hacer esto en WordPress es con un plugin de image map. Subes tu imagen, dibujas hotspots, defines qué muestra cada uno y publicas. Listo. Estático, predefinido, terminado.

Es un enfoque completamente válido. Pero hay otra forma de pensar en los mapas de imagen, una en la que tu audiencia es quien agrega los pines, no solo tú.

Questiory te da las dos opciones, a través de dos funciones que trabajan juntas: Pin en imagen (la interacción donde las personas colocan sus pines) y Tour (la visualización que muestra todas las contribuciones).

Lo interesante es quién agrega los pines. Ahí es donde se abren las posibilidades.

Cómo funcionan Pin en imagen y Tour juntos

En Questiory, una actividad de Pin en imagen tiene dos lados:

• Pin en imagen es la diapositiva de interacción, donde los participantes tocan o hacen clic para colocar un pin en tu imagen, con la opción de agregar una etiqueta o nota.
• Tour es la diapositiva de visualización, donde todos los pines aparecen juntos en la imagen, como un mapa en vivo de las contribuciones.

Están diseñados para usarse en conjunto. Pero lo que cambia la experiencia por completo es quién carga el contenido.

Interacción Pin en imagen Los participantes tocan en cualquier punto de la imagen para colocar un pin. Pueden agregar una etiqueta o nota a cada uno.

Visualización Tour Muestra todos los pines en la imagen: los tuyos, los de tu audiencia, o ambos. Se actualiza en vivo a medida que llegan nuevas contribuciones.

Tres formas de usarlo

1. Tú cargas los pines, la audiencia explora

Creas la experiencia, agregas tus propios pines en la imagen de forma manual y ocultas la diapositiva de interacción de Pin en imagen. Los visitantes solo ven la visualización Tour: un image map terminado con tus hotspots, donde cada uno muestra el contenido que escribiste.

Esto equivale a cómo funciona un plugin de image map de WordPress. Tú defines todo, los visitantes lo exploran. Un mapa del mundo con tus oficinas. Un diagrama de producto con componentes etiquetados. Una línea de tiempo con eventos anotados. Un plano con descripciones de cada sala.

La diferencia con un plugin es que se embebe en WordPress como un solo iframe, funciona en cualquier página o editor, no requiere instalación y no agrega peso a tu sitio. El contenido interactivo carga desde los servidores de Questiory, por lo que el rendimiento de tu WordPress no se ve afectado.

2. Tu audiencia carga los pines

Publicas la experiencia con ambas diapositivas visibles. Los visitantes llegan a la interacción de Pin en imagen y colocan sus propios pines, marcando su ubicación, su respuesta, o lo que la pregunta les pida. La visualización Tour muestra el resultado colectivo, actualizándose en vivo a medida que más personas participan.

Esto es algo que ningún plugin hace. El mapa se construye solo a partir de las contribuciones de la audiencia. Cuando cien personas han respondido, el Tour muestra una imagen que tú no podrías haber creado por tu cuenta.

Algunos ejemplos de preguntas que funcionan bien así:

3. Una mezcla de ambas

Agregas un conjunto de pines base tú mismo (ubicaciones clave, puntos de referencia, tus propios datos) y luego abres la diapositiva de Pin en imagen para que los visitantes agreguen los suyos encima. El Tour muestra todo junto: tu contexto y las contribuciones de tu audiencia sobre la misma imagen.

Esto funciona bien cuando quieres proporcionar un marco inicial pero dejar espacio para que la audiencia lo amplíe. Un mapa de ubicaciones de clientes conocidos que los visitantes pueden extender. Un diagrama con algunos puntos de dolor anotados, abierto a más aportaciones. Una imagen de antes/después con algunas notas ya colocadas, invitando a más.

Cómo usar Questiory en tu sitio WordPress

Hay dos formas de agregar un image map de Questiory a cualquier página de WordPress.

Opción 1: código embed. Crea tu experiencia en Questiory, copia el código embed y pégalo en un bloque HTML personalizado en el editor de bloques, o en un módulo HTML de Elementor o Divi. El mapa se muestra, recopila pines y se actualiza sin tocar tu configuración de WordPress.

Plugin de Questiory para WordPress

Opción 2: plugin de WordPress. El plugin de Questiory te permite agregar un shortcode en cualquier parte de tu sitio: [questiory_presentation id="TU-ID"]. Sin necesidad de HTML, funciona con cualquier tema y cualquier constructor de páginas que soporte shortcodes.

De cualquier forma, el mapa vive en la infraestructura de Questiory. WordPress solo aloja la página.

En qué se diferencia Questiory de los plugins de image map

Un plugin de image map es una herramienta de publicación. Creas el mapa una vez, defines qué muestra y así queda.

Questiory también puede hacer eso. Pero la versión más interesante es cuando el mapa no está terminado al publicarlo. Cuando las personas que visitan tu página son quienes lo llenan. Cuando el Tour se ve diferente el día uno que el día treinta, porque trescientas personas han marcado sus respuestas.

Esa es la versión difícil de replicar con un plugin. Y solo hace falta una pregunta y una imagen para empezar.

¿Qué imagen de tu sitio sería más interesante si tu audiencia pudiera marcarla?