Canvas

Chaque survol, clic et zoom est un événement.

Abonnez-vous aux événements place, bloc, objet, section, étage et zoom avec une seule API d'écoute, et retrouvez vos métadonnées de place dans chaque payload.

Découvrir les points clés

Ça vous parle ?

Un plan qui ne parle pas

Scraper le DOM d'un widget pour savoir ce que l'utilisateur a cliqué, c'est de l'archéologie fragile. Une vraie API d'événements rapporte chaque interaction.

Polling de l'état

Lire la sélection dans une boucle timeout, c'est une condition de course déguisée. Les événements poussent dès que ça change.

Payloads sans contexte

Un clic qui dit « place 42 » et rien d'autre vous force à tout recalculer. custom_data renvoie vos ids, prix et refs.

Le plan est un composant, pas une boîte noire

01Un seul appel subscribeaddEventListener avec des noms d'événements simples, seat_click, zoom_level_change, changements d'étage, et consorts.
02La surface complètePlaces, blocs, objets, sections, étages, niveaux de zoom et ready. Chaque interaction se signale.
03Props natives au frameworkReact reçoit onSeatClick et consorts ; Vue émet @seat-click, mêmes événements, forme idiomatique.
04Métadonnées dans le payloadVotre custom_data revient avec chaque événement. L'intégration panier s'écrit toute seule.
05Granularité au survolMouse enter et leave sur les places alimentent tooltips et aperçus sans deviner.
06Conscient du cycle de vieREADY indique quand le plan est vraiment interactif, pas de course contre le rendu.

Brancher en quelques minutes

seatmap.ts
seatmap.addEventListener("ready", () => {
  console.log("plan en ligne");
});
 
seatmap.addEventListener("seat_click", (seat) => {
  // vos métadonnées reviennent à chaque événement
  cart.preview({
    priceId: seat.custom_data.priceId,
    label: seat.label,
  });
});
 
seatmap.addEventListener("zoom_level_change", (level) => {
  breadcrumbs.sync(level); // "venue" | "block" | "seat"
});
TypeScript · seatmap-canvasseat_click · zoom_level_change

Écoutez le plan

Événements avec vos métadonnées, en direct en démo.