English
French
Go to website
Back
Articles on:
Blocks
Learn how each block works to create your graph
🟦 Airtable
Example: https://creator.celestory.io/project/X2hu1xLcU Airtable base link: https://airtable.com/universe/expv5ePD2Qfw7lIlK/nocode-serious-game-data-base 🟦 Airtable block This block allows you to exchange with your database of your Airtable account (collaborative online spreadsheet). To start using the Airtable block, you must Enable integrations (Main Menu/Integrations).
Very popular
🟧 Background
The Switch background block allows you to change the background, the decor of the module, from another image from the Resources. The block allows you to operate on a wide spectrum of parameters. For example, you can change the position, the size, the color of the rest of the screen or the description of the image. Indeed, the background will be displayed for a short amount of tim
Very popular
🟩 Start
The Start block is used to start each graph. Therefore, it is not possible to erase it.
Very popular
🟩 Dialogue
The Dialogue block shows the dialogue of one or more series of lines in each character bubble in the feed of the module. When you create a new dialogue block, open it and clock on Slect a character to open the contextual menu. Then choose a character or create a new one. Opening dialogue block  to display it in the user interface. To display a video player, like YouTube, read this article: https://documentation.celestory.io/en/article/insert-a-youtube-video-1horjlj/ Here we have indicated the direct link of the video in the url field of the block.
Popular
🟪 Unique choices
Link to the graph exemple: https://creator.celestory.io/project/JDd_oZdnL Link to the video example : https://www.loom.com/share/3a97c1a91c5949a7813b439a6d1acd8d Uniques choices: The "Unique choices" block acts like the Choices block, and remembers the choices made by the user, and does not reproduce these proposals. Finally there is an "end" output that will redirect the flow once all the choices have been used. . These variables can be numeric or textual, and will be replaced by their current value in the flow
Popular
🟦 Random Number
The Random number block is used to obtain a random number (integer or decimal). By double clicking on the block, you can define the limits of the range of the randomly defined number (e.g. between 1 and 10) and you can connect the block to a boolean variable which will trigger the possibility to have decimal numbers. The value of the Value point will then be filled with a random number and you can for example connect this point to the Value point of an Assign block. ![](https://storage.crisp
Popular
🟪 Choice
The Choice block allows you to offer the user a choice in the form of a clickable button. This choice can be single or multiple : you can add as much as propositions needed by double clicking on the block, then on the "+" icon. Each propositions can be named as you can input text on them. You can then link the different out of each choice to continue the story. The Choice block
Popular
🟥 Break
The Break block allows you to break a loop created by the Repeat block. It is to be placed in the "dead branch" of the latter, which represents the path taken by the player when the loop is over. The Break block almost have a "musical" function. Without it, a Repeat block would create the following pattern : loopnumber of iterations, then "dead branch", then loopnumber of iterat
Some readers
⬛ Alert
The Alert block is used to write the content of notifications that will be displayed in the feed of the module. It works like a dialog block. Only the shape of the Alert notification differs from that of the Dialogs. It is customizable and doesn't need to mention the name of the character speaking (ex: no need to write "narrator:"). You can replace the text you place between singl
Some readers
🟦 Decrement
The Decrement block allows you to decrease the value of a numeric variable by subtracting an integer. This is the combination of an Expression and Assignment block. The block acts as a triggering of a substraction. For this reason, be careful when you set a value : a positive one will result in a substraction, whereas a negative one will result in an addition. You can also link a numeric variable to the value input.  and the values of the variables at the time it reached the Checkpoint block. The user's data is saved on the local storage of his device (which allows to use the application offline). _Note: If you export your application in HTML5 or PWA format, be sure to tell your users not to
Some readers
🟩 Input number
Link to the graph example: https://creator.celestory.io/project/E_IZOuM2v Allow your users to directly enter the value of a number, which you can then assign to a numeric variable, allowing you to make calculated formulas. Simply extend the "value" output point and connect it to the value input point of an Assignment block whose variable input point is linked to a numeric variabl
Some readers
⬛ Set HUD (Head UP Display)
Link to the graph example: https://creator.celestory.io/project/1VqMc5WsZ Link to the video example: https://www.loom.com/share/7e9c5eb9af1147e48fe0029082889897 ⬛ Set HUD (Head UP Display): The Head Up Display (HUD) allows you to display a persistent menu and its items in the upper part of the screen during the user experience. To create a HUD, you must first go
Some readers
🟥 Random path
The Random path block allows you to randomly send the Storyline to one of the multiple outputs whose number has been determined by the value you have inputed in the "paths" section. The percentage of each output is equal for each path.
Some readers
🟥 Condition
The block Condition allows you to check whether or not a condition is fulfilled. This condition is bound to give a true or false result. To determine it, click and hold the point "condition" and drag it with your mouse and release the click:  in the Choice block. Some options imply the use of boolean variables to be effective. This is the case wh
Some readers
⬜ Story
The Story block allows you to create the draft scenes (notes) of your interactive scenario. It does not affect the design or logic of the graph. It will not be visible to the player. You can replace the text you place between singletons (e.g. {{x}} apples) with the value of a current variable. Once done, the text between singletons appears at the bottom of the block with a point to connect to the block of the variable you are targeting. ![](https://storage.crisp.chat/users/helpdesk/website/1
Some readers
🟩 Notification
Link to the video : https://www.loom.com/share/ea5e51532a2d460f9d2201b8510a2bf2 The "Notification" block allows you to overlay your content with a notification/text/image that will appear with or without delay, for a set period of time. To do so, you just need to link a "Notification" block to your content block. Inside the "Notification" block you can enter your text or upload
Some readers
🟦 Webview
Example link: https://creator.celestory.io/project/7JJadkWMi The Webview block is used to display web integrations in the interface. It can be used to display pages, widgets or video players for example. The url field is used to indicate the web address of your integration. Here is a YouTube integration, to learn how to insert a YouTube video step by step: https://documentation.celestory.io/fr/ar
Some readers
🟩 Narrator
The Narrator block allows you to show text content outside of a bubble, which makes easier to distinguish this one frome dialogues'ones. Also, it has a diferent display form which reinforces its differences with the regular chatbot and visual chat template. It is possible to adjust the margins of this text. You can replace the text you place between singletons (ex: {{x}} apples) by the value of a current variable. Once done, the text between singletons appears at the bottom of the block with a
Some readers
🟦 Assign
The Assign block is used to assign a value to a variable. This assignment is absolute, which means the new value will erase the previous one. Here is an example : in my story, I start with an amount of Y gold coins. But I will unfortunately lose all my gold coins and I get back a purse of 10 gold coins. To recreate this event, I add a block Assign whose variable is Y and I set its value at 10 by double clicking in the block. The mathematical operation is now Y=10. The assigned value will cor
Some readers
🟥 Switch
The Switch block allows you to set up a combination of conditions to multiple outputs. Each new output created is associated with a test point to be connected to each Expression block containing the logical expression to be validated. The flow will be directed to the 1st output of a validated test. If there is no validated test, the flow will go through the "default" pass.
Some readers
🟪 Video choice
This is a combination of the Video block and the Choice block. The choices therefore appear directly at the end of the file playback. It is the perfect block for creating interactive videos. This blocks works as a mix of a Video and a Choice block, which means you will have to choose a document to be displayed. You will have to click on the icon corresponding to your document, then
Some readers
🟩 Input text
The Input text block allows a user to enter a sequence of characters on the keyboard that will define the value of a text variable. Once the text has been typed in the box provided for this purpose, the user will have to press a button to validate his entry. The text, the design of input and validate button are customizable. ![](https://storage.crisp.chat/users/helpdesk/website/7
Some readers
🟦 Add to a list
See 🔎 Search for or retrieve values
Some readers
⬛ Run Javascript
The Run javascript block allows you to import your own javascript code to modify your app. Be careful, it is reserved for experts and a bad manipulation may break the app code. Sample code: https://gist.github.com/JonathanPicques/59191e2e7df2ef77391f57843d42543c
Some readers
⬜ Comment
Link to video example : https://www.loom.com/share/c7dc912f773e4243a878c414b45043bf ⬜ Comment: The "comment" block allows you to add comments visually and freely around your graph. This block is not linked to the stream and therefore has no impact on it. You can position it wherever you want, choose the size, color and/or transparency of the block. 🔺 Be careful, as t
Some readers
🟦 Integromat
The Integromat block let you send the value of a variable to +1000 apps through the Integromat platform. Note: In order to send data through Integromat, be sure to export your project first. Triggers will start to work only on exported app. More information in the article: 🔌 Connect Celestory to Integromat
Some readers
🟥 Once
The Once block allows the Storyline to pass through a default path only once. When the stream passes through the Once block again, it will be redirected to the second out. The Once block is useful if you want to create a "dead end" for example You can also link a boo
Some readers
🟦 List includes
See 🔎 Search for or retrieve values
Some readers
⬛ CSS
CSS The CSS block allows you to manually modify the design of the template of your module. You will have to write down your own CSS code in the dedicated area. It is also possible to create an undo feed of the CSS thanks to boolean variable. More informations about CSS are disponible in this article : http://help.celestory.io/en/articles/3838546-css ![](https://storage.crisp.
Some readers
🟧 Play music
The Play music block allows you to play an mp3 sound in the app background, which means the sound will be played until its end and during the course of your project. Firstly, be sure that you have uploaded your sound on your project's library. You also have the option to turn loop on or off.
Some readers
🟪 Alter clickable zone
See: 👆 Clickable zone
Some readers
⬜ Connector
The Connector block allows you to create a malleable bridge for the Storyline, allowing you to visually arrange the graph as you wish. You can create a connector block by double clicking on a connection to split it in two. It does not affect the variables or the visualization of the experiment, but it certainly improve the clearness of your project. Indeed, it can sum up a lot of c
Some readers
🟩 Clear feed
The Clear feed block allows you to remove the feed aka the history of visual elements. After this block, the rest of the feed will appear normal. This block is very useful if you want to create a game of recalling or a textual effect in a complex narrative. Here is an example of what is possible : ![](https://storage.crisp.chat/users/helpdesk/website/17a937df9a703000/8dcc871c-0a
Some readers
🟧 Edit character
The Edit character block allows you to change a character's image, the appearance of its bubble or its animation in a graph. Firstly, you will have to create the character in the menu. This allows you to visualize a change in your relationship with someone, but it can also be helpful if you want to create a narrative shift. One should notice that a change by the Edit character blo
Some readers
🟨 Open a graph
The Open a graph block allows you to pass the Sotryline from one graph to another. For this reason, it is very useful when you want to create recurrent and complex systems such as battles or roll of dices. The graph has to be part of your module or in the global graphs' section : otherwise it will not work. You can create a graph by clicking on the "add' button of your module's
Some readers
🟪 Swipe
Here is the purple Swipe bloc, which allows you to display a card. The card can be swiped to the left or to thr right by the user, with a different outcome of each swipe, like Tinder. In its edit window, you can change the displayed text of the swipe outcome in the left and right option.  : it is not a prob
Some readers
🟩 Load image
See 🐱🏍 Import Gifs
Some readers
🟧 Stop sound
See 🎤 Add Voice over, sounds and musics
Some readers
🟦 Expression
The Expression block allows you to establish a mathematical expression. By double-clicking on the Expression block, you can write a mathematical expression (e.g. x > 3 or y == 5). Then simply connect the point Expression value to the test point of the Condition or Switch block.
Some readers
🟩 Choice with dialogue
The block Choice with dialogue combines the blocks Dialogue and Choice into one block. A dialog will appear just before the choice. You can replace the text you place between singletons (e.g. {{x}} apples) with the value of a current variable. Once done, the text between singletons appears at the bottom of the block with a point to connect to the block of the variable you are targe
Some readers
🟧 Stop music
See 🎤 Add Voice over, sounds and musics
Some readers
🟩 Link
The Link block allows you to insert a web address (url) that can be clicked from the app. The player will then be redirected to the page in question.
Some readers
🟩 Video
The Video block allows you to display an image or video media file in full screen. By clicking on it, the player makes it disappear and the stream continues. If the Enable Zoom function is activated, then it will be possible to zoom in on it, and to pass, the player will have to click on the cross at the top right of the player.
Some readers
🟩 Image
The Image block allows you to show an image in a bubble in the feed of the module. It is also possible to add text, including custom text (via the Text Format block) on top of the image. Text is editable, as you may change its position with margin settings under text's screen. This editing will change the position of your text on the displayed image. ![](https://storage.crisp.ch
Some readers
🟦 Today's date
Link to the example : https://creator.celestory.io/project/OfP0aCiv7 If you want to insert a date in your interactive experiences, you just have to create a "Today's Date" block that you will connect to the "x" value of an "Alert" block. In order for the date to be displayed correctly, you should write {{x}} in your text instead of the date. This value will be automatically replaced by the current date! ![](https://storage.crisp.chat/users/helpdesk/website/3df244a4c5bf3e00/2419aa70-0167-4f3e-a
Some readers
👨🏫 Anatomy of a block
In Celestory, the block allows you to create the content, logic and data of your app. To create a block, you can: either click on Add block on the top bar of your project's graph interface. or right-click in an empty space on the graph, then click on **A
Some readers
🟧 Play sound
See 🎤 Add Voice over, sounds and musics
Some readers
🟥 Repeat
The Repeat block let you create a short "dead" branch of the graph with any block you want. The Storyline will go through that branch and at the end will come back indefinitely to the Repeat block. Use the Break block to break the loop. Index is the value representing the number of loops already done (ex: I told you that {{x}} times already!).
Some readers
🟦 Zapier
The Zapier block let you send the value of a variable to +2000 apps through the Zapier platform. Note: In order to send data through Zapier, be sure to export your project first. Triggers will start to work only on exported app. More information on the article: 🔌 Connect Celestory with Zapier
Some readers
🟦 Remove from list
See 🔎 Search for or retrieve values
Some readers
🟦 Increment
The Increment block allows you to quickly increase the value of a numerical variable. It is a combination of the Assign and Expression blocks that will increment the value of a numeric variable by one positive digit (e.g. +1 or +3).
Few readers
🟩 Input
Link to the example: https://creator.celestory.io/project/cbZhW1bVu The 🟩 Input block allows the user to enter a sequence of characters typed on the keyboard, which will then define the value of a variable. It is suitable for feed experiments. Once the text has been typed in the box provided, the user must press Enter to validate the entry. You can define in the drop-down menu type, the type o
Few readers
🟦 Not
The Not block allows to invert the value of a boolean variable (true to false or vice versa). This block must be linked to an Assign block.
Few readers
🟦 Analytics
Analytics let you trigger data to analyze the user behavior. The name of the analytic will be display on your Sankey diagram (Analytics menu in the main menu). The same order for X blocks let you compare them directly (as the different "gates" you might want to compare can be at different place in the graph). More information on 📊 Analytics here
Few readers
⬛ Hide HUD
Link to the example: https://creator.celestory.io/project/5cB1mtaii The ⬛ Hide HUD block is used to hide the HUD that has been previously displayed in the user interface. To learn how to use the ⬛ Set HUD block: https://documentation.celestory.io/en/article/set-hud-head-up-display-r71wrb/
Few readers
🟦 Get from List
See 🔎 Search for or retrieve values
Few readers
🟦 Load checkpoint
Link to example project: https://creator.celestory.io/project/0-wJ8iNmg (to be imported into your project under Main Menu/Project Settings/Import-Export) The Checkpoint Loader block allows you to redirect the Storyline automatically to the last Checkpoint block the user has been through. The values of the variables will then revert back to the values at the time the Checkpoint block was traversed. 