Define custom actions to trigger on Element events by registering actions within your codebase. Use custom actions to trigger functions within your codebase, such as engagement events or tracking details.
This feature is accessible within the Classic UI mode of the Visual Editor.
- Use the
registerAction()function to register custom actions. - Once a content entry has access to a custom action, access it within the Element Events panel in the Data tab.
Within your codebase, register a custom action with the registerAction() function. Your custom action will require an id, name, kind, and action.
Each key-value pair functions in the following way:
- id: a globally unique ID for an action
- name: the name that will appear within the Visual Editor for the action
- kind: the type of action; can be
function,expression, orany - action: a function that returns a string representation of code that should run when the action is triggered
For more dynamic custom actions, add inputs to your actions. The inputs key can be added to the argument for registerAction(), which accepts an array of input objects.
These values can then be accessed within the action anonymous function. In the example below, a new input with a name of alertMessage is created that is required and accepts a string. The value of this input is then used within the action anonymous function.
To use the custom action you've registered within your content entry:
These values can then be accessed within the action anonymous function. In the example below, a new input with a name of alertMessage is created that is required and accepts string. The value of this input is then used within the action anonymous function.
In the video below, a button is selected and a custom Alert Action is triggered on button click. This causes an alert to appear on the page with the string provided to the custom input.
Read more about binding data and events within the Data binding overview. Or, learn how to add Custom code directly within the Visual Editor.