Éditeur embarqué

En bref

Objectif — permettre à vos utilisateurs de dessiner leurs plans de salle depuis votre back-office. Prérequis — une clé secrète, un plan déjà créé (même vide). Attention — cette page utilise la clé secrète : elle ne doit être servie qu'à des utilisateurs authentifiés de votre back-office.

ChartDesigner embarque l'éditeur de plan Mitoera dans une iframe de votre application. L'utilisateur place rangées et sièges, définit les catégories, et le plan est enregistré directement dans votre workspace.

Intégration

CDN

<div id="editor" style="width:100%;height:700px"></div>

<script src="https://bo.mitoera.com/mitoera-editor.js"></script>
<script>
  const designer = new mitoera.ChartDesigner({
    divId:     'editor',
    secretKey: 'pk_xxxxxxxx:sk_xxxxxxxx',
    chartKey:  'UUID_DU_PLAN',
  });

  designer.render();
</script>

npm

import { ChartDesigner } from '@mitoera/sdk/browser';

const designer = new ChartDesigner({
  divId:     'editor',
  secretKey: 'pk_xxxxxxxx:sk_xxxxxxxx',
  chartKey:  'UUID_DU_PLAN',
});

await designer.render();   // async : récupère le jeton d'embed avant d'injecter l'iframe

La clé secrète part dans le navigateur

Contrairement au widget, l'éditeur exige la clé secrète. Deux règles :

1. Ne servez cette page qu'à vos utilisateurs authentifiés, jamais au public.
2. Utilisez une clé dédiée à cet usage, révocable indépendamment de celle de votre serveur.

Options

Option	Type	Description
divId	string	ID du <div> conteneur. Requis
secretKey	string	Clé secrète au format keyId:secret. Requis
chartKey	string	UUID du plan à éditer. Requis
eventKey	string	UUID d'un événement lié — pré-filtre les statuts de sièges

Méthodes

Méthode	Description
render()	Échange la clé contre un jeton d'embed, puis injecte l'iframe. Asynchrone via npm
destroy()	Supprime l'iframe et nettoie les écouteurs

Ce qui se passe sous le capot

1. Le SDK appelle POST /api/auth/embed-token avec keyId et secret.
2. Le serveur renvoie un jeton d'embed à durée de vie courte.
3. L'iframe est chargée sur https://bo.mitoera.com/embed-editor.html?planId=…&token=….

C'est ce jeton, et non votre clé, qui circule dans l'URL de l'iframe. Si le keyId commence par pk_test_, le SDK ajoute le header X-Api-Mode: sandbox et l'éditeur travaille sur l'instance sandbox — voir Mode sandbox.

Cycle de vie recommandé

// 1. Créer le plan côté serveur, avec la clé secrète
const chart = await client.charts.create('Salle Olympia');

// 2. Servir votre page d'édition avec chart.id → l'utilisateur dessine

// 3. Une fois le dessin terminé, publier — côté serveur là encore
await client.charts.publish(chart.id);

Un plan reste draft tant qu'il n'est pas publié : le widget ne l'affichera pas et aucun événement ne pourra s'y rattacher. Après publication, toute modification le repasse en pending jusqu'à la republication.

Dépannage

Symptôme	Cause probable	Correctif
divId introuvable	render() appelé avant que le <div> existe	Appeler après le montage du composant
Iframe blanche	Jeton d'embed refusé	Vérifier le format keyId:secret de la clé secrète
« secretKey doit être au format keyId:secret »	Clé publique fournie	L'éditeur exige la clé secrète, pas pk_live_…
L'éditeur ouvre un plan vide	Mauvais chartKey, ou plan d'un autre workspace	Vérifier l'UUID avec GET /api/charts
Modifications invisibles côté widget	Plan en pending	Republier le plan

Suite

• Plans (API) — créer, publier, archiver un plan par programme
• Catégories (API) — les tarifs et zones dessinés dans l'éditeur