⬜ HTML5

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

• content (Code HTML) : Espace dédié à la rédaction ou au collage de code HTML personnalisé.
• [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) : Sortie par défaut pour poursuivre le flux de l'expérience après l'exécution du bloc HTML5.
• [Sorties dynamiques] (Flux) : Des sorties supplémentaires sont créées si le code HTML configure des signaux de retour vers Celestory. Elles portent le nom défini dans le code.

💡 Exemple d'utilisation

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é.
2. Le bloc Texte génère une variable {{nom_utilisateur}} contenant le prénom de l'utilisateur.
3. Le bloc HTML5 est configuré avec le code suivant :

   <div style="text-align: center; padding: 20px; background-color: #f0f0f0;">
     <h1>Bonjour {{nom_utilisateur}} !</h1>
     <button onclick="Celestory.send('bouton_clique')">Cliquez ici</button>
   </div>

4. Le bloc détecte automatiquement la variable {{nom_utilisateur}} et crée une entrée dynamique pour y relier la sortie du bloc Texte.
5. Lorsque l'utilisateur clique sur le bouton, le bloc génère une sortie dynamique bouton_clique qui peut être utilisée pour déclencher une action spécifique (ex : afficher un message de remerciement).

⚙️ 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.
• Sorties dynamiques : Les sorties sont générées lorsque le code HTML utilise la méthode Celestory.send('nom_sortie'). Chaque appel crée une nouvelle sortie portant le nom spécifié.
• 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.

Mis à jour le : 04/03/2026