Sentaste Widget — Interactive Demo

📟 Event Log

Ready.

🎯 Target

Switch between event and season without leaving the demo

Public key Event key API base

🎭 Enabled Categories

Use the multi-select or chips, then apply to keep only those categories enabled

Enabled categories

Loading categories...

Selected category keys

🧪 Debug State

Typeevent

Target-

Members(none)

Public key-

API base-

Hold min15

Max seats(none)

Hold token(none)

Expires(none)

Selected0

Objects(none)

Watch(none)

Status(unknown)

Connectionconnecting

Realtime(none)

Expired objs(none)

🎮 Parent Control

Programmatic seat control from parent page

Object key to deselect

🛰️ Remote Actions

Uses current selection if object keys is empty

Admin key Object keys Order ID Reason

✨ Widget Features

📱

Responsive Design

Adapts from 320px to 4K. Pinch-to-zoom, touch pan, bottom sheets on mobile, double-tap zoom.

♿

Full Accessibility

ARIA roles & labels, keyboard navigation (arrows, Tab, Enter, Escape), live announcements, focus indicators, high contrast mode.

🎨

Theming

Light, Dark, and Auto themes. Custom colors via CSS variables or config. High contrast option for low vision users.

⚡

Real-time Updates

WebSocket for instant seat status changes. Automatic fallback to polling. Connection status indicator and offline detection.

🔒

Hold & Reserve

Server-side seat holds with countdown timer. Automatic release on expiration. Hold token for checkout integration.

🎯

Best Available

One-click best seat selection with pulse animation. Filter by category. Smart suggestions for adjacent seats.

🗺️

Minimap Navigation

Minimap for large venues. Click to navigate. Shows viewport position and all seat categories.

🛒

Cart & Checkout

Built-in cart panel with seat details, pricing, and checkout button. Mobile cart sheet with swipe gestures.

🌍

Internationalization

Full i18n support for English, Spanish, and Portuguese. All labels, error messages, and UI strings translated.

🏟️

Section Zoom

Click sections to zoom in with smooth animation. Breadcrumb navigation. General Admission areas with capacity tracking.

⏳

Loading & Error States

Skeleton shimmer while loading. Friendly error messages with retry. Offline and reconnection banners.

🚀

Viewport Culling

Only renders seats visible in the viewport. Handles 10K+ seat venues smoothly without performance degradation.

💻 Quick Integration

        
// 1. Include the widget script
<script src="https://widget.sentaste.io/dist/sentaste-widget.umd.cjs"></script>

// 2. Create the widget
const widget = Sentaste.render('#my-chart', {
  publicKey: 'pub_ws_your_key_here',
  event: 'your-event-uuid',
  // or: season: 'your-season-uuid', session: 'manual'
  theme: 'auto',           // 'light' | 'dark' | 'auto'
  locale: 'en',             // 'en' | 'es' | 'pt'
  currency: 'USD',
  showCart: true,
  holdExpiryMinutes: 15,
  maxSelectedSeats: 10,
  onSelectionChange: (seats) => console.log(seats),
  onCheckout: (seats) => /* redirect to payment */,
  onHoldTokenCreated: (token, expiresAt) => /* save for checkout */,
});

// 3. API methods
widget.getSelectedSeats();        // → SeatInfo[]
widget.deselectSeat('A-1');       // deselect individual seat
widget.clearSelection();          // deselect all + release holds
widget.setTheme('dark');          // switch theme at runtime
widget.destroy();                 // cleanup and unmount
      

Sentaste.io Widget Interactive Seating Chart for Events

📝 Hidden Form Fields (live values)