Widgets para tu sitio web
Ejemplos en vivo de los mismos widgets JavaScript utilizados en la vista pública del portal. Las tarjetas de resumen no requieren iframe, cuenta ni clave API. El mapa de compras requiere una clave pública de navegador de Google Maps.
Disponible en esta rama; aún no publicado. Despliega API y Web desde la misma versión antes de usarlo en un sitio público.
Instrucciones y límites
Copia un ejemplo en tu página. Usa el nombre de host de la API de tu tenant y el entorno de publicación correspondiente. El módulo crea su propio Shadow DOM y carga su hoja de estilos para aislar las tarjetas del CSS del sitio. Los textos, nombres y colores predeterminados proceden de esa API. El ancho del elemento determina el diseño: las tarjetas usan un mínimo de 300 px y se distribuyen automáticamente en filas. Usa machineCount: 1, 2 o 3 para distintas máquinas en marcha elegidas al azar.
El módulo solo envía solicitudes GET sin credenciales. Estas lecturas públicas permiten orígenes externos; las operaciones de manager y sesión conservan su política CORS de orígenes exactos. Si el sitio usa Content Security Policy, permite el origen de la API en script-src, connect-src, img-src y style-src; el progreso dinámico también requiere estilos inline, el gráfico de compras requiere data: en img-src, y las vistas WashDoc requieren blob: en img-src. Usa HTTPS y un navegador con módulos ES, Shadow DOM, fetch y AbortSignal.timeout. No incluyas credenciales. Los datos son en vivo y pueden no estar disponibles; 503 significa indisponibilidad, nunca cero. Cada tarjeta reintenta automáticamente y señala los valores conservados cuando falla la actualización. La promesa ready informa de errores de inicialización; unavailableText define el mensaje localizado inicial. Llama a destroy() al quitar o sustituir un grupo. El sondeo también se detiene automáticamente al quitar el elemento.
El recuento de máquinas se actualiza cada 15 segundos; compras, reservas y máquinas individuales cada minuto; usuarios activos cada minuto (la API conserva el recuento durante cinco minutos). Las solicitudes comparten una instantánea dentro de la página. La cuenta atrás se calcula cada segundo con la hora del servidor, conserva las máquinas seleccionadas y muestra la finalización durante 20 segundos. Se mantienen los límites y campos públicos; las imágenes son SVG generados por la API. Los importes se separan por moneda.
Introduce el KID canónico de este tenant. No se requiere iniciar sesión. Ubicación y banco incluyen todas las unidades públicas, también las inactivas. Usa Cargar más para las siguientes páginas; las páginas cargadas se actualizan cada minuto. Los tiempos desconocidos se indican sin inventar una cuenta atrás.
Widget de mapa de compras
Inserta el mapa compacto de compras en directo dentro de su propio Shadow DOM. No requiere iframe, portal, inicio de sesión ni token bearer. El sitio API selecciona el tenant. Los datos se actualizan cada 10 segundos; los errores esperan 30 segundos. Llama a destroy() al retirar el widget. Proporciona googleMapsBrowserKey desde la configuración de la clave pública de navegador del sitio que lo integra; nunca uses una clave de servidor para geocodificación. La opción tiene prioridad sobre googleMapsBrowserKey nullable de GetPublicWidgetPresentation (disponible solo si la API ya tiene GoogleMaps:ApiKey configurado). La API no necesita ese ajuste si el sitio proporciona su propia clave. Sin ninguna fuente, ready se rechaza. Las restricciones HTTP-referrer de Google deben permitir el sitio; el widget no las cambia. Para sitios con Content Security Policy, sigue también la guía CSP de Google Maps.
<div id="purchase-map" style="width:100%;height:400px"></div>
<script type="module">
import { mountPurchaseMap } from 'https://YOUR-API/docs/widgets.mjs';
const widget = mountPurchaseMap(document.querySelector('#purchase-map'), {
apiBase: 'https://YOUR-API', language: 'en-GB',
googleMapsBrowserKey: 'YOUR_PUBLIC_BROWSER_KEY'
});
await widget.ready;
// Call widget.destroy() before removing the host.
</script>Capas del mapa: showCoins es true de forma predeterminada; showHeatmap es false. Para mostrar solo el mapa de calor, use showCoins: false, showHeatmap: true. Disponible en el código fuente; aún no publicado.
Use zoom: 7 para fijar el nivel de zoom después de centrar el mapa en los datos. Se admiten valores de 0 a 22. Omita zoom para mostrar todas las ubicaciones automáticamente. Aún no publicado.
Use startPosition: { latitude: 56.2, longitude: 10.5 } para elegir el centro inicial. La latitud debe estar entre -90 y 90 y la longitud entre -180 y 180. Combine con zoom: 6. Con startPosition no se ajusta el mapa a los datos; se mantienen el seguimiento de compras y la navegación manual. Omita el parámetro para el ajuste automático. Disponible en el código fuente; aún no publicado.
Tras widget.ready, widget.getView() devuelve la vista actual { startPosition: { latitude, longitude }, zoom }, o null si no está disponible o se ha destruido. Incluye los movimientos manuales. Aún no publicado.
Fotos recientes
mountRecentPhotos(host, options) muestra una miniatura pública cada tres segundos y actualiza cada minuto. Configure apiBase, alt, loadingText, emptyText y unavailableText. Devuelve ready y destroy(). Los originales permanecen protegidos. Nueva exportación: aún no publicada.
const photos = mountRecentPhotos(element, { apiBase, alt: "Photo", emptyText: "No photos", unavailableText: "Unavailable" });
await photos.ready;
// On removal:
photos.destroy();