Interaction builder has a wide array of elements types that you can use to build your interactions. The different buttons, texts, fields and images in your interaction can be freely styled and positioned.
Interactions are built using individual elements, which are the building blocks that you use to create your content. There's plenty of design settings for each element, allowing you to edit the look and feel of them so that it matches your brand.
This article covers:
1. Element types
When using an interaction template from our template library, you'll have a set of elements added to the interaction already that you can work with. New elements can be added from the elements list on the left side of the Design-page.
Examples of available elements:
- Button elements, to use for clickable elements
- Text elements
- Shape elements, for purely visual non-clickable elements like background colors. There are also separate image elements, that offer an easy way to add pictures to your interaction.
- Dropdown menus, to be used in for example contact forms when asking visitors to choose from a list of preset options. There's also a separate radio button element that can be used to this purpose.
- Video elements, for embedding videos in your interactions. Read more here.
- Wheel of fortune element, offering a fun way to engage website visitors.
In addition to these, there are also several other elements available. Feel free to explore these inside Interaction builder!
2. Element listing
The element listing offers a streamlined approach to navigating, organising, and managing elements within a view by presenting them in a structured tree format. This allows effortless reordering of elements, provides quick access to context menus, and enables users to toggle element visibility with ease. Additionally, features such as settings access for individual elements and the ability to disable reports enhance the design workflow, help you effectively manage complex interactions and views.
The element listing shows all elements in a view in a treelike structure. If you've used groups, you'll also see these in the list.
You can change the order of the elements simply by dragging them. The elements list is ordered from highest most element to lowest element, meaning that you'll typically see background-like elements at the bottom of the list (as these once are usually the elements in the back, behind other elements like buttons or texts).
Right clicking on the element allows you to access the context menu for the element.
Double clicking on the element in the list will allow you to access its settings and makes it quicker to for example rename the element or edit its placement.
If you hover over the element in element listing, you can see the element visibility icon. You can easily hide or show element visibility by clicking on the icon.