⬜ HTML5

The HTML5 block allows you to integrate and display tailor-made HTML code directly in a Celestory application. It provides the ability to design custom interfaces, buttons or interactive visual elements, while allowing the use of dynamic variables and the creation of custom outputs.

This block is reserved for Business subscriptions and allows advanced integration between web code and Celestory feeds.

📥 Entries

• content (HTML code): Space dedicated to writing or pasting custom HTML code.
• [Dynamic Entries] (Text/Number/Boolean): Additional entries are automatically generated when the {{variable_name}} syntax is used in the HTML code. They allow dynamic data from other blocks to be injected.

📤 Outings

• out (Flow): Default output to continue the flow of the experience after the HTML5 block is executed.
• [Dynamic Outputs] (Streams): Additional outputs are created if the HTML code configures feedback signals to Celestory. They have the name defined in the code.

💡 Example of use

Scenario: Displaying a personalized message with an interactive button

1. The user arrives at a stage where he should receive a personalized message.
2. The Text block generates a variable {{username}} containing the user's first name.
3. The HTML5 block is configured with the following code:

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

4. The block automatically detects the variable {{username}} and creates a dynamic input to link the output of the Text block to it.
5. When the user clicks on the button, the block generates a dynamic output bouton_clique which can be used to trigger a specific action (eg: display a thank you message).

⚙️ Technical Details

• Handling dynamic variables: The block analyzes the HTML code looking for the {{variable_name}} syntax and automatically creates the corresponding entries. These variables can be of text, number or boolean type.
• Dynamic outputs: Outputs are generated when the HTML code uses the Celestory.send('output_name') method. Each call creates a new output with the specified name.
• Compatibility: This block requires a Business subscription to use. It is designed to work with modern browsers and complies with HTML5 standards.

Updated on: 04/03/2026