Sentaste.io — Widget Demo Fase 4 — Final

Widget de selección de asientos production-ready: responsive, accesible (ARIA + teclado), temas light/dark, estados de carga, WebSocket en tiempo real, hold flow con timer, best available, áreas GA, sugerencias inteligentes.

🎯 Widget en vivo

Listo.\n

✨ Características (Fase 4)

📱 Responsive

Mobile-first. Pinch-to-zoom, pan táctil, bottom sheet en lugar de tooltips, controles adaptados para cada breakpoint (300px → pantalla completa).

♿ Accesibilidad

ARIA roles, aria-labels, aria-live para anuncios de estado. Navegación por teclado (flechas, Tab, Enter/Space, Escape). Indicadores de foco visibles.

🎨 Temas

Light/Dark con un toggle. Colores personalizables via CSS custom properties y config de colores. Se aplica a canvas, paneles, tooltips, popovers.

⏳ Loading & Errores

Spinner/skeleton al cargar. Mensajes amigables en español ante errores de API. Botón de reintentar. Banner offline con reconexión automática.

🔌 WebSocket

Actualizaciones en tiempo real. Fallback a polling si WS no conecta. Indicador de estado de conexión. Detección offline/online del navegador.

🎯 Best Available

Busca y reserva los mejores N asientos con un click. Animación de pulso en los asientos encontrados. Filtro por categoría.

💻 Integración

// 1. Include the widget <script src="https://cdn.sentaste.io/widget/sentaste-widget.umd.cjs"></script> // 2. Create the widget const widget = Sentaste.render('#my-chart', { publicKey: 'pub_ws_...', event: 'your-event-key', theme: 'dark', // 'light' | 'dark' colors: { // optional custom colors primary: '#7C3AED', selected: '#3B82F6', background: '#111827', }, holdExpiryMinutes: 15, maxSelectedSeats: 10, onSelectionChange: (seats) => { console.log('Selected:', seats); }, onHoldTokenCreated: (token) => { // Pass token to your checkout flow }, }); // 3. API widget.getSelectedSeats(); // Get current selection widget.clearSelection(); // Clear all widget.setTheme('dark'); // Toggle theme widget.destroy(); // Cleanup