Widget de Imagen Interactiva para crear imagen interactiva en su sitio web

Convierta una foto de producto, un plano, una captura de pantalla, un diagrama o un mapa en una guía interactiva. Coloque hasta ocho marcadores y dé a cada uno una tarjeta de detalles con una imagen, un título, una descripción y un botón de CTA opcionales.

Cómo crear un widget Image Hotspot

Upload your image

Suba su imagen

Comience con una foto de producto, un plano, una captura de pantalla de una aplicación, una infografía u otra imagen que los visitantes necesiten explorar.

Place and edit hotspots

Coloque y edite los hotspots

Agregue hasta ocho marcadores, arrástrelos a su posición y elija un número o ícono para cada uno. Luego agregue una imagen, un título, una descripción y un enlace de CTA opcionales.

Style and embed it

Aplique estilo e insértelo

Establezca los colores del marcador y de la tarjeta, el comportamiento de clic o al pasar el cursor, el tamaño, la fuente y la visibilidad en dispositivos, luego publique el widget sin código en su sitio.

Cree imágenes interactivas a partir de imágenes estáticas sin código personalizado

Coloque pines de forma visual con coordenadas adaptables

Agregue pines directamente sobre la imagen y arrástrelos a su posición. Los hotspots se almacenan como coordenadas relativas, por lo que se mantienen alineados a medida que la imagen se ajusta en computadoras, tabletas y dispositivos móviles.

Place pins visually with responsive coordinates

Dé a cada hotspot su propio contenido

Agregue una imagen, un título y una descripción opcionales a cada tarjeta de detalles. También puede mostrar un botón de CTA personalizado que abra su destino en una nueva pestaña.

Give every hotspot its own content

Use clic o paso del cursor con hojas inferiores móviles

Abra las tarjetas con clic o al pasar el cursor en computadoras. En dispositivos móviles, el hotspot activo se abre en una hoja inferior que mantiene la imagen fácil de ver.

Use click or hover with mobile bottom sheets

Combine los marcadores y las tarjetas con su sitio web

Utilice marcadores numerados o con íconos, elija de la biblioteca de íconos y ajuste el tamaño del marcador, el efecto de pulso, el tamaño de la tarjeta, los colores, el tema, el radio de las esquinas, la fuente y la alineación del texto.

Match markers and cards to your website

Cómo integrar su Image Hotspot en WordPress

1Obtenga su código de inserción

Después de personalizar su widget de sitio web de Jotform, haga clic en Pruébelo en su sitio web gratis y copie el código de inserción generado.

2Abra el editor de la página

Vaya a la entrada o página de WordPress donde desea mostrar el widget y luego agregue un nuevo bloque.

3Agregue un bloque HTML personalizado

Seleccione HTML Personalizado y pegue el código de inserción de su widget de sitio web de Jotform en el campo HTML.

4Actualice y vea

Haga clic en Actualizar o Publicar y luego abra la página para revisar su widget insertado.

Por qué destacan los Widgets para Sitios Web de Jotform

Los widgets de Jotform hacen que su sitio web sea más interactivo y aumentan las conversiones. Hay muchas herramientas disponibles, desde valoraciones con estrellas y controles deslizantes de testimonios hasta ventanas emergentes de prueba social e inserciones de medios. Agregue widgets a sus formularios o páginas de destino para recopilar datos, mostrar pruebas y captar prospectos — sin necesidad de programación.

Inserte widgets sin necesidad de programar

Agregue widgets de Jotform a su sitio web con un simple código de inserción. Personalice el widget, previsualice su aspecto y péguelo en cualquier página que admita HTML personalizado o bloques de inserción, todo sin un desarrollador.

Cree páginas más interactivas

Utilice los Widgets para Sitios Web de Jotform para captar prospectos, mostrar comentarios de clientes, presentar pruebas sociales, insertar medios o agregar herramientas útiles para páginas web. Cada widget ayuda a los visitantes a interactuar con su negocio directamente desde su sitio web.

Obtenga soporte cuando lo necesite

Si necesita ayuda para configurar, personalizar, insertar o solucionar problemas de su widget, el equipo de atención al cliente de Jotform está disponible las 24 horas, los 7 días de la semana. Puede avanzar con confianza, sabiendo que la ayuda está ahí cuando la necesita.

Dónde usar su widget de Image Hotspot

Utilice hotspots interactivos en cualquier lugar donde los visitantes necesiten inspeccionar un elemento visual y comprender qué significa cada parte.

Imágenes de productos y catálogos para identificar artículos destacados, explicar detalles clave y dirigir a los visitantes a las páginas de productos.

Planos de bienes raíces y lugares para anotar habitaciones, stands, zonas de asientos, comodidades u opciones de alquiler.

Capturas de pantalla de aplicaciones para explicar áreas de la interfaz, pasos del flujo de trabajo, paneles de control o funciones del producto.

Infografías e informes para agregar explicaciones específicas sin saturar el gráfico original.

Diagramas educativos para facilitar la exploración de mapas, visuales de procesos e imágenes de capacitación.

Páginas de portafolio para describir detalles de diseño, materiales, notas de antes y después o decisiones del proyecto.

Convierta prospectos en clientes de pago con el Creador de Formularios de Jotform

Convierta la interacción en acción con Jotform. Cree formularios potentes que captan prospectos, recopilan pagos y automatizan respuestas, todo en un solo lugar. Cada envío llega a su Jotform Inbox, donde puede hacer seguimiento o conectar con sus aplicaciones favoritas.

Empiece — ¡Es gratis!
Convert leads into customers

Preguntas Frecuentes

  • ¿Qué es un widget de Image Hotspot?

    Un widget de Image Hotspot agrega marcadores interactivos a una imagen. Cada marcador puede abrir una tarjeta de detalles con una imagen, un título, una descripción y un botón de CTA.

  • ¿Puedo colocar los hotspots de forma visual?

  • ¿Cuántos hotspots puedo agregar?

  • ¿Qué puedo agregar a cada tarjeta de hotspot?

  • ¿Los visitantes pueden abrir las tarjetas al pasar el cursor?

  • ¿Cómo funciona en dispositivos móviles?

  • ¿Puedo cambiar el estilo del marcador?

  • ¿Puedo aplicar estilo a las tarjetas?

  • ¿Puedo controlar en qué dispositivos se muestra el widget?

  • ¿Necesito escribir código?