⬛HTML5
Le bloc HTML5 permet d'afficher une page web sur la base d'un code HTML, placé dans le "contenu" du bloc.
Le HTML (HyperText Markup Language) est une langage de balisage utilisé pour créer des pages web. Il est souvent associé au CSS pour réaliser l'esthétique de la page (c'est le "front-end") et au JavaScript pour réaliser des actions en arrière plan (c'est le "back-end").
Pour lier des variables au bloc HTML5, il suffit d'ajouter dans le contenu le nom d'une variable entre deux accolades (exemple : {{ nomVariable }} ). Cette variable apparaîtra dans le bloc et pourra être relié à d'autres blocs.
Pour sortir une variable du bloc HTML5, il faut, dans le code JavaScript (donc depuis des balises <script></script>), utiliser l'événement CelestoryOutput :
const event = new CustomEvent("CelestoryOutput", {detail: {key: "nomSortie", value: variableDeSortie}});
window.parent.document.dispatchEvent(event);
Le JSON passé en paramètre ({detail:...}) ne doit pas être changé, mais la variable de l'attribut value peut contenir n'importe quoi : une valeur booléenne, une chaîne de caractères (du texte), un valeur numérique, ou encore un objet JSON (dans ce cas, il faut le transformer en chaîne de caractère avec la fonction JSON.stringify(), exemple : JSON.stringify(variable) ). L'attribut key correspondra au nom qui sera affiché sur le bloc HTML5.
Pour fermer le bloc HTML5, il faut, dans le code JavaScript, utiliser l'évènement CelestoryEnd :
window.parent.document.dispatchEvent(new CustomEvent('CelestoryEnd'));
Le HTML (HyperText Markup Language) est une langage de balisage utilisé pour créer des pages web. Il est souvent associé au CSS pour réaliser l'esthétique de la page (c'est le "front-end") et au JavaScript pour réaliser des actions en arrière plan (c'est le "back-end").
Pour lier des variables au bloc HTML5, il suffit d'ajouter dans le contenu le nom d'une variable entre deux accolades (exemple : {{ nomVariable }} ). Cette variable apparaîtra dans le bloc et pourra être relié à d'autres blocs.
Pour sortir une variable du bloc HTML5, il faut, dans le code JavaScript (donc depuis des balises <script></script>), utiliser l'événement CelestoryOutput :
const event = new CustomEvent("CelestoryOutput", {detail: {key: "nomSortie", value: variableDeSortie}});
window.parent.document.dispatchEvent(event);
Le JSON passé en paramètre ({detail:...}) ne doit pas être changé, mais la variable de l'attribut value peut contenir n'importe quoi : une valeur booléenne, une chaîne de caractères (du texte), un valeur numérique, ou encore un objet JSON (dans ce cas, il faut le transformer en chaîne de caractère avec la fonction JSON.stringify(), exemple : JSON.stringify(variable) ). L'attribut key correspondra au nom qui sera affiché sur le bloc HTML5.
Pour fermer le bloc HTML5, il faut, dans le code JavaScript, utiliser l'évènement CelestoryEnd :
window.parent.document.dispatchEvent(new CustomEvent('CelestoryEnd'));
Mis à jour le : 18/04/2025
Merci !