You can add interactivity to your application without being a developer. Use the Data tab and Element events to allow user interactions to affect your application.
- Add interactivity to elements to track events and conversions or develop features without coding.
- Create events for user clicks, hover effects, and form field changes.
To change your application's state, add a user-interactive element, like a button, to your content entry. To learn how to add elements to your Page or Section, see The Visual Editor.
The video below demonstrates adding a button labeled No thanks to a Page.
Before you edit your application's state with an interactive element, create state for your application. To do this, create a new Content Input.
On the Data tab, do the following:
- Click the Content Input panel.
- Click + New Field.
- Choose a Name and Type.
- Set other values as desired, such as a Default value.
For example, the video demonstrates creating a new boolean input named calloutToggle. Boolean inputs have two possible values: true or false. In this video, calloutToggle is set to true by default.
Check the Content State panel to confirm that your input was created correctly. The newly created input appears alongside the default value you set.
When you change the value in the Content State panel, the state object updates accordingly.
Note: The Visual Editor only reflects changes to the state if the state value is bound to an element on your Page.
To add interactivity to an element:
- Click the element.
- Go to the Element events panel within the Data tab.
- Click + New Event.
- Choose an Event Trigger.
- Click + Action.
- Choose an action.
The video below demonstrates adding a Click trigger event to a button. This event toggles the calloutToggle state property.
A Trigger Event describes what user interaction will lead to a change in your content entry. Depending on the event chosen, the event is triggered when:
- Click: The element is clicked.
- Mouse enter: The cursor enters the element's area.
- Mouse leave: the cursor leaves the element's area.
- Key down: A key is pressed.
- Change: The element, such as an input field, changes.
- Submit: The form is submitted.
Note: The key down, change, and submit events all work best with form elements.
Clicking + Action adds a new action that occurs when the event is triggered. Multiple actions can be added to a single event trigger.
The available actions are:
- Toggle state: Switches a Boolean state between
trueandfalse. - Set state: State is set directly as part of the interaction. For example, you could set a state with a type of "Color" to be a specific color.
- Track event: Track Custom Events or Track Conversions when the event is triggered.
- Custom code: Executes custom JavaScript code.
Test your functionality in the Visual Editor. Trigger your chosen event and watch the Content State panel to verify that the state changes when interacting with the element.
To test your element, do the following:
- Click the Data tab.
- Click the Content State panel.
- Identify the field you created within the Content Inputs panel and its current value.
- Trigger the event you created. This will require you to interact with the Page within the Visual Editor.
- Confirm the value with the Content State panel is changing as you would expect.
The video below demonstrates a click event triggering on the No thanks button, which changes the calloutToggle state.
Bind the state value you created in the Content Input panel to another element in your application. Use the Element data bindings panel to bind data.
On the Data tab, do the following:
- Click the Element data bindings panel.
- Click + New Binding.
- Choose an option from the Get dropdown menu.
- Chose the Content Input you previously created from the from dropdown menu.
For example, if a click event changes a Boolean state value, you can hide or show a section of your Page based on that value.
The video below demonstrates adding a binding in the Element data bindings panel. The callout only appears if calloutToggle is true, which is its default state. Clicking the No thanks button toggles the calloutToggle value from true to false, causing the callout to disappear.
See Custom Code in the Visual Editor to learn more about adding custom code to state bindings or action handlers.
