Widget par CDN

En bref

Objectif — afficher un plan de salle interactif sur une page web, sans outillage. Prérequis — une clé publique pk_live_…, un événement dont le plan est publié. Temps — 5 minutes.

Le widget se charge par une balise <script> et expose l'objet global Mitoera. Pas de bundler, pas de build : c'est la voie à privilégier pour un site WordPress, un template serveur ou une page statique.

Intégration minimale

html

<div id="mitoera-chart" style="width:100%;height:600px"></div>

<script src="https://bo.mitoera.com/mitoera-widget.js"></script>
<script>
  new Mitoera.SeatingChart({
    divId:        'mitoera-chart',
    workspaceKey: 'pk_live_xxxxxxxx',
    event:        'concert-12-mars',
  }).render();
</script>

Trois options suffisent : où afficher, avec quelle clé, quel événement. Le reste a des valeurs par défaut raisonnables.

Le conteneur doit avoir une hauteur

Le widget remplit son <div>. Un conteneur sans hauteur explicite s'affiche donc… vide. height:600px, height:70vh ou une hauteur héritée d'une grille : au choix, mais quelque chose.

Réagir aux actions de l'utilisateur

html

<div id="mitoera-chart" style="width:100%;height:600px"></div>
<p id="resume">Aucun siège sélectionné</p>

<script src="https://bo.mitoera.com/mitoera-widget.js"></script>
<script>
  const chart = new Mitoera.SeatingChart({
    divId:        'mitoera-chart',
    workspaceKey: 'pk_live_xxxxxxxx',
    event:        'concert-12-mars',
    showLegend:   true,
    showResume:   true,

    onReady: ({ sessionToken, holdToken, eventId }) => {
      // Le plan est chargé et la session ouverte
    },

    onSelectionChange: (seats) => {
      document.getElementById('resume').textContent =
        seats.length ? `${seats.length} siège(s) : ${seats.map(s => s.seatKey).join(', ')}`
                     : 'Aucun siège sélectionné';
    },

    onCheckout: (seats) => {
      // L'utilisateur valide → on passe au paiement
      fetch('/api/panier', {
        method:  'POST',
        headers: { 'Content-Type': 'application/json' },
        body:    JSON.stringify({ seats: seats.map(s => s.seatKey) }),
      }).then(() => location.href = '/paiement');
    },
  });

  chart.render();
</script>

La liste complète des options, callbacks et méthodes est sur SeatingChart — elle vaut pour le CDN comme pour npm.

Passer en sandbox

Une seule chose change : la clé.

workspaceKey: 'pk_test_xxxxxxxx',   // au lieu de pk_live_

Dépannage

Symptôme	Cause probable	Correctif
Le conteneur reste vide	`<div>` sans hauteur	Donner une hauteur CSS explicite
`Mitoera is not defined`	Le script s'exécute avant le CDN	Placer votre `<script>` après celui du widget, ou l'envelopper dans `DOMContentLoaded`
« Événement introuvable »	Slug erroné, ou événement d'un autre workspace	Vérifier l'`identifier` et que la clé appartient au bon workspace
Le plan s'affiche vide, sans sièges	Plan non publié	Publier le plan : `POST /api/charts/{chartId}/publish`
Les sièges ne se sélectionnent pas	Sièges `canceled`, ou événement sans plan lié	Vérifier `GET /api/events/{eventId}/seats`
Clé refusée	Clé secrète utilisée à la place de la publique	Le widget attend `pk_live_…` / `pk_test_…`, jamais `keyId:secret`

Bonnes pratiques

Ne mettez jamais la clé secrète dans cette page. Le widget n'en a pas besoin : il ne fait que lire et poser des holds.

Appelez render() une seule fois. Pour recharger un autre événement, appelez destroy() puis construisez une nouvelle instance.

En navigation SPA, nettoyez. chart.destroy() au démontage du composant supprime l'iframe et les écouteurs postMessage.

Suite

SeatingChart — référence complète des options
Panier après redirection — conserver la sélection lors d'un passage par le login
Brancher un paiement — la suite logique de onCheckout

Widget par CDN ​

Intégration minimale ​

Réagir aux actions de l'utilisateur ​

Passer en sandbox ​

Dépannage ​

Bonnes pratiques ​