[▶️ Vidéo : anatomie du bloc HTML5](https://celestory-docs-videos.netlify.app/fr/anatomie-bloc/html5.html)


![HTML5](https://celestory-docs-illustrations.netlify.app/fr/HTML5_FR.svg)

Le bloc HTML5 permet d'intégrer et d'afficher du code HTML sur-mesure directement dans une application Celestory. Il offre la possibilité de concevoir des interfaces personnalisées, des boutons ou des éléments visuels interactifs, tout en permettant l'utilisation de variables dynamiques et la création de sorties personnalisées.

Ce bloc est réservé aux abonnements Business et permet une intégration avancée entre le code web et les flux Celestory.

## 📥 Entrées

-   contenu (Code HTML) : Espace dédié à la rédaction ou au collage de code HTML personnalisé.
-   bouton fermer (Booléen, activé par défaut) : Affiche un bouton qui ferme la page et continue par `out` (seulement si `out` est relié).
-   [Entrées dynamiques] (Texte/Nombre/Booléen) : Des entrées supplémentaires sont générées automatiquement lorsque la syntaxe {{nom_de_variable}} est utilisée dans le code HTML. Elles permettent d'injecter des données dynamiques provenant d'autres blocs.

## 📤 Sorties

-   out (Flux) : Seule sortie de flux : l'expérience continue par ici quand la page envoie l'événement `CelestoryEnd`, ou quand le joueur la ferme.
-   [Sorties dynamiques] (Texte/Nombre/Booléen) : Des sorties de valeur, une par nom déclaré dans le code (`<!-- celestory-outputs: score, verdict -->`, ou `key` d'un `CustomEvent('CelestoryOutput', …)`). Ce ne sont pas des sorties de flux.

## 💡 Exemple d'utilisation


[▶️ Vidéo : le bloc HTML5](https://celestory-docs-videos.netlify.app/fr/graphe-blocs/html5.html)


Scénario : Affichage d'un message personnalisé avec un bouton interactif

1. L'utilisateur arrive sur une étape où il doit recevoir un message personnalisé.
1. Le bloc Texte génère une variable {{nom_utilisateur}} contenant le prénom de l'utilisateur.
1. Le bloc HTML5 est configuré avec le code suivant :

`html

<div style="text-align: center; padding: 20px; background-color: #f0f0f0;">

<h1>Bonjour {{nom_utilisateur}} !</h1>

<button onclick="document.dispatchEvent(new CustomEvent('CelestoryOutput', {detail: {key: 'bouton_clique', value: true}}))">Cliquez ici</button>

</div>

1. Le bloc détecte automatiquement la variable {{nom_utilisateur}} et crée une entrée dynamique pour y relier la sortie du bloc Texte.
1. Le bloc crée une sortie de valeur bouton_clique ; quand l'utilisateur clique, elle reçoit `true`. Pour continuer l'histoire, la page envoie aussi `parent.document.dispatchEvent(new CustomEvent('CelestoryEnd'))`, ou le joueur la ferme : le flux repart par `out`.

## ⚙️ Détails Techniques

-   Gestion des variables dynamiques : Le bloc analyse le code HTML à la recherche de la syntaxe {{nom_variable}} et crée automatiquement les entrées correspondantes. Ces variables peuvent être de type texte, nombre ou booléen.
-   🔺 Noms de variables valides : seules les lettres non accentuées, les chiffres et le tiret bas (a-z, A-Z, 0-9, _) sont reconnus. Un nom contenant un accent, un tiret ou une espace ({{Prénom}}, {{mon-score}}, {{ Prenom }}) n'est pas détecté : aucune entrée n'est créée, aucun message d'erreur n'apparaît, et le repère s'affiche tel quel à l'écran. La casse compte : {{prenom}} et {{Prenom}} sont deux entrées distinctes.
-   Sorties dynamiques : Les sorties sont générées à partir des événements `CustomEvent('CelestoryOutput', {detail: {key: 'nom_sortie', value: ...}})` écrits dans le code. La sortie est créée quand le code est analysé, pas au moment de l'envoi ; chaque envoi met à jour sa valeur avec celle indiquée dans `value`. On peut aussi déclarer les sorties en tête de page avec `<!-- celestory-outputs: nom1, nom2 -->`.
-   Compatibilité : Ce bloc nécessite un abonnement Business pour être utilisé. Il est conçu pour fonctionner avec les navigateurs modernes et respecte les standards HTML5.

---

*Version documentée : v2*