Create Accountlogin

Template Design Editor

Templates are small blueprints that can, later on, be filled with content and stacked together in our tree editor. They can have any form, design, structure or purpose you want. Here's one example:

Hello World - Writing your First Template

To get a first impression of how the Template, Tree, and Node Editor work together, we'll start with a very simple example. Copy the following line into the "HTML" field:

<span>Hello World</span>

Next, give your template a name by typing "helloworld" into the "Name" input field and click the "Save" button. A small message should appear indicating that saving was successful.

Congrats you have just created your very first design template. You can try it out in the Tree Editor 😊.

Styling your Template

Let's apply some color! Copy the following snippet into the "CSS" field. Ignore all predefined rules at the moment, we'll get to them later.

span { color: red }

This will turn "Hello World" from black to red. So, if you are somewhat familiar with CSS you can go ahead and style your future templates however you like 😊. There are no restrictions whatsoever.

However, let's get back to those predefined rules now. Have a look at the following statement:

.wrapper { }

and replace it with:

.wrapper { background-color: yellow; width: 200px; margin: 20px; padding: 10px; }

The color mess is complete 😉. But where is this wrapper class coming from? It turns out that Zircel wraps all your custom HTML and puts it into a div container with the class name ".wrapper" (that's just something we have to do internally). Now that you are aware of this wrapper you can leverage this information for your benefit and use it in your CSS as we just did in the previous code snippet.

Zircel adds some more classes in certain situations/states. We'll revisit them later.

Text Interpolation

If you played around with the "helloworld" template, you will realize that it is fairly primitive. First of all, you do not always want your node to say "Hello World". You want to define the text for each node individually, right?

Here, text interpolation will come in handy. Replace the HTML of your "helloworld" template with:


Now the preview should display "*text*". The asterisks (*) mark a placeholder that you will be able to overwrite in the Node Editor.

If you save your template and head over to your Tree/Node Editor you should now be able to create multiple "helloworld" nodes with different contents.

Zircel Tags

At this point you are ready to dig into the core of our little template engine: "Zircel Tags". They are super handy. A Zircel Tag looks like a regular HTML tag but starts with "z-" and always needs a special attribute "z-name" (which must be unique). For example:

<z-button z-name="mybutton"/>.

One can distinguish two types of Zircel Tags: primitive and composite.

Primitive Zircel Tags

Here's a list of primitive Zircel Tags that you can use:

Primitive Tags

Primitive tags allow Zircel to infuse magic into the regular HTML markup. For example, when you use a "z-img" tag you'll be able to upload your custom picture in the Node Editor. If you use "z-input" or "z-textarea" Zircel will be able to capture user input (e.g. an email address) on your conversational application and use it within the State Machine and, of course, you will see the user input under Analytics (when logged in). Finally, z-buttons are the glue of the (Execution) Tree. They let you define the execution logic of your conversational application. Users mainly navigate your application by clicking button pointing to other tree nodes.

A few things to notice. Primitive Tags...

Here's an example bringing it all together. Replace your HTML with the follwing:

<span>{{text}}</span> <z-input z-name="field"/> <z-button z-name="btn"/>

and your CSS with:

.wrapper { background-color: yellow; width: 200px; margin: 20px; padding: 10px; } button { background-color: green; padding: 10px; color: white; }

Notice, this looks really ugly. As a little exercise, try to beautify this template with the skills you just learned😊

Once your are happy with the styling: save it and have a look at the template in the Node Editor! Quite cool, right?

Supported z-input types

We currently support the input types text, checkbox, and radio. Other input types tags might work out-of-the-box but are not tested. If you need support for other input types, let us know.

The code snippet below uses the checkbox input type. Both checkboxes and radio-inputs will set the associated state key to "on" when they are checked and no value attribute is provided. The checkbox example below will set the state key to "myvalue" when checked. In case they remain unchecked by the user, no state key value is set.

<z-input z-name="check" type="checkbox" value="myvalue" />

Omitting z-button tags

Your design templates do not need a "z-button" tag. When omitted, the execution of the tree is progressed automatically after 2 seconds to a single child node. It is good practice to always let the user chose when to progress to the next node (i.e. to use "z-button" tags). However, they are useful when you intend to terminate the execution with the next node.

Composite Zircel Tags

What if you want to have more than one button? Or what if you sometimes want one button, and sometimes 2 or even 3 buttons without creating multiple copies of the same template? You can solve this problem by using composite tags:

Composite Tags

Composite tags: z-optional and z-iterable

Here's an example how you can use "z-optional" and "z-iterable":

<z-optional z-name="opt"> <h1>{{title}}</h1> </z-optional> <p>{{text}}</p> <z-iterable z-name="iterable"> <z-img z-name="image"/> </z-iterable> <z-input z-name="field"/> <z-button z-name="btn"/>

This snippet will add an optional title (you can toggle it on/off in the Node Editor). Wrapping z-img's in a "z-iterable" tag will also allow you to add one or multiple images to your node. You can choose how many images you want in the Node Editor.

Here is everything you need to know about "z-itearble" and "z-optional":

Composite tag: z-stackable

The composite tag "z-stackable" is a hybrid of both "z-optional" and "z-iterable". Let's see an example which features all details you need to know:

<z-stackable z-name="article"> <h1 z-name="title">{{title}}</h1> <z-img z-name="image"/> <p z-name="paragraph">{{text}}</p> <z-input z-name="field"/> <div z-name="button-wrapper"> <span>{{buttondescription}}</span> <z-iterable z-name="buttons"> <z-button z-name="button"/> </z-iterable> </div> </z-stackable>

The following "z-stackable" lets users in the Node Editor compose arbitrary sequences (or stacks) of elements:

The screenshot above the Node Editor shows the "article" stack with four stack-elements. Notice that the sequence "title→paragraph→image→button-wrapper" is not identical to the sequence of tags in the zhtml code snippet above. Further, you can repeatedly use stack-elements for as often as you like.

The following rules apply when using "z-stackable":

Congrats, you are Zircel specialist now 😊 by making it this far in the tutorial.

Styling Revisited

Let's look into some additional styling details you can leverage. Remember those empty CSS styling rules at the beginning? Here's how they are useful:

.wrapperAs mentioned before, your html definition is wrapped by a container. This div-container has the ".wrapper" class.
.wrapper.answeredOnce a user has clicked a "z-button" the current node is considered as "answered". If you want you can apply specialized styling as soon as the user answered a node with this rule.
button.clickedThe z-button which the user clicked gets the ".clicked" class. You can use this rule to highlight which button a user selected.

Template Lifecycle

We have already covered the technical aspects of writing design templates. We have yet to do a bit of housekeeping.

Save as Draft

When experimenting with an unfinished design template, you can save it as a "draft". No checks for validity are performed. A new "draft" is not accessible in the Node Editor. If you save an existing template as "draft", its latest regularly saved version is accessible in the Node Editor.


Before you can use a new/modified design template in the Node Editor, you have to save it in a valid state.

Here are a few notes on keeping your template valid:

After saving, the latest version of your template will be accessible in the Node Editor. However, already released applications will not be affected by your latest updates. To deploy design updates, you'll have to "release" again in the Tree Editor.


Templates that are no longer needed can be deleted. As expected, once a template is deleted it can no longer be selected as a new node in the Tree Editor. If there are any trees that still use the deleted template, the nodes will turn red and the specific trees can no longer be released until all references to the deleted design have been removed. However and most importantly, released trees that comprise a deleted template are not affected by the deletion of templates. They remain functioning as expected.


Things to read and forget again😊
Currently, you cannot use JavaScript to further customize your templates for security reasons. The <script> tag is therefore not supported. To provide interactive experiences to your users consider using Custom Components.