Celestory lets you create interactive scenarios without coding, design adaptive experiences and track your audience's personalized journeys.

1. To Start in Celestory

Go to: https://creator.celestory.io/home/examples

Let's open the example that is titled 'Bot (en)' this is a project that is pre-edited for the purpose of this tutorial.

Simply click on the cover picture to open the project.

It is also good to note that it is possible to create a 'New Project' from scratch on the projects page, click on the 'New project' in the far right corner.

2. Starting a graph

Let's go back to the example 'Bot (en)'. Here you can see the graph in the center.

A project is made of Modules the modules have graphs that are built in them, these can be found on the side menu to the left . Each project has a Starting Module and a Starting graph.

3. A graph is made of colored blocks

Each block has a specific feature and is named according to it's function.

The main blocks are:

Start (launch the scenario)

Alert (make a notification)

Dialogue (for character interaction)

Choice (offer user interactions).

4. Open the Alert block

On the left of the graph after start, double click on 'Alert'

At this point you can change the text inside the 'Alert' block window. To close this window click 'X' to exit.

5. Click on Play on the bar menu

Click the play button found on the header menu, you now have the live preview of your application!

Notice that the text you've just edited is now in the preview box 'play test'.

6. Preview the next block

 To test the blocks click anywhere in the pop up 'Play test' window. The next block on the graph will appear in the play test, in this instance it is a Dialogue block.

While simulating a user path, you can see the blocks you passed through are highlighted.

To add new dialogue write the first line of dialogue and don't forget to hit the enter key at the end of the sentence. This ensures that there is a line of space between each line of dialogue, otherwise the dialogue will not appear.

7. Add a character

To add characters click on 'Module settings' in the 'Modules' menu to the left of the screen, then click 'Characters'. Within a project if you would like to create a new module, which is possible in the 'Modules' menu, the new module will have the same settings as the module already set up.

Once clicked on 'Character' simply click on 'Add Character'

Change the name of your character this has to match the dialogue in the scenario, click on the + plus sign 'Create resources' here you can add an image for your character. Click on 'Select an image'.

You can use the resources in Celestory or upload your own images, click 'Add' choose the files you wish to import or click on the folders already provided.

Choose the targeted file (seen in the preview) and click on OK.

You can close the 'Module Settings' window and click on 'Play' to see your character talking.

8. Zoom on the graph

 Use the mouse wheel to zoom or alternatively click on the magnifying glasses.

The blocks show the content that follows the Storyline, which is the personalized path of a user. The Storyline goes from an "out" arrow from a block to an "in" arrow from another one.

9. Open the Choice block

  Double click the 'Choice' block. Fill in the boxes with the choices you desire, here the two choices are displayed and can be edited. Add a choice by clicking the '+ Text' button.

Once all your choices are added click on the 'X' to close the window.

The choices make a fork in the graph and each arrow choice needs linking to a new or current block.

Link your new choice so it is visible by the user. Click on the arrow and drag it to link it to the dialogue box.

This links the blocks and the storyline.

To remove a connection in the Storyline, right-click on the line connecting the blocks then click 'Remove the connection'.

Click on 'Play' to see that your choices are now appearing in the 'Play test'.

10. Erase part of the Graph

Hold the SHIFT key, click and drag the mouse to trace a selection of the targeted blocks you wish to remove. Right click and select 'Remove selection'.

You can also hold the Control key (Command key for Mac) and click on multiple blocks to make a selection.

The selection is highlighted, another way to delete a section is to simply press the 'Delete' key on your keyboard.

You are now ready to create your own interactive scenario!

To go further and learn how to give memory to you app, you can see ☑️ Set up conditions

To see how to create data through Analytics, go to 📊 Mesure your audience's behavior

To understand all the elements in the interface, go see the Tool Elements.

Did this answer your question?