Element Interactions Schema
Element interactions define event-driven behavior: when a trigger fires, an action is executed on a target. They are stored in the _interactions key inside any element’s settings object.
Data structure
Section titled “Data structure”Interactions are a flat array of interaction items. Each item specifies a trigger event, the action to perform, and a target element or selector.
{ "type": "array", "description": "Element interactions: event-driven behavior rules. Each item defines a trigger, action, and target.", "items": { "type": "object", "description": "A single interaction rule: when a trigger fires, an action is executed on a target element.", "properties": { "action": { "type": "string", "description": "Action to perform. show: show element, hide: hide element, click: click element, setAttribute/removeAttribute/toggleAttribute: HTML attribute operations, toggleOffCanvas: toggle offcanvas panel, loadMore: load more query items, startAnimation: CSS animation, scrollTo: scroll to element, javascript: call custom JS function, openAddress/closeAddress: map address, clearForm: clear form, storageAdd/storageRemove/storageCount: browser storage operations.", "enum": [ "show", "hide", "click", "setAttribute", "removeAttribute", "toggleAttribute", "toggleOffCanvas", "loadMore", "startAnimation", "scrollTo", "javascript", "openAddress", "closeAddress", "clearForm", "storageAdd", "storageRemove", "storageCount" ] }, "actionAttributeKey": { "oneOf": [ { "type": [ "string", "number", "integer", "boolean", "null" ] }, { "type": "object" }, { "type": "array" } ] }, "actionAttributeValue": { "oneOf": [ { "type": [ "string", "number", "integer", "boolean", "null" ] }, { "type": "object" }, { "type": "array" } ] }, "ajaxQueryId": { "oneOf": [ { "type": [ "string", "number", "integer", "boolean", "null" ] }, { "type": "object" }, { "type": "array" } ] }, "animationDelay": { "oneOf": [ { "type": [ "string", "number", "integer", "boolean", "null" ] }, { "type": "object" }, { "type": "array" } ] }, "animationDuration": { "oneOf": [ { "type": [ "string", "number", "integer", "boolean", "null" ] }, { "type": "object" }, { "type": "array" } ] }, "animationId": { "oneOf": [ { "type": [ "string", "number", "integer", "boolean", "null" ] }, { "type": "object" }, { "type": "array" } ] }, "animationType": { "oneOf": [ { "type": [ "string", "number", "integer", "boolean", "null" ] }, { "type": "object" }, { "type": "array" } ] }, "conditionsSep": { "oneOf": [ { "type": [ "string", "number", "integer", "boolean", "null" ] }, { "type": "object" }, { "type": "array" } ] }, "delay": { "oneOf": [ { "type": [ "string", "number", "integer", "boolean", "null" ] }, { "type": "object" }, { "type": "array" } ] }, "disablePreventDefault": { "oneOf": [ { "type": [ "string", "number", "integer", "boolean", "null" ] }, { "type": "object" }, { "type": "array" } ] }, "filterElementId": { "oneOf": [ { "type": [ "string", "number", "integer", "boolean", "null" ] }, { "type": "object" }, { "type": "array" } ] }, "formId": { "oneOf": [ { "type": [ "string", "number", "integer", "boolean", "null" ] }, { "type": "object" }, { "type": "array" } ] }, "id": { "type": [ "string", "integer" ], "description": "Unique identifier for this interaction" }, "infoBoxId": { "oneOf": [ { "type": [ "string", "number", "integer", "boolean", "null" ] }, { "type": "object" }, { "type": "array" } ] }, "interactionConditions": { "type": "array", "description": "Sub-conditions that must be met before the action fires", "items": { "type": "object", "description": "A sub-condition on an interaction that must be met before the action fires. Typically checks browser storage values.", "properties": { "conditionType": { "type": "string", "description": "Type of condition check (e.g. \"storage\")" }, "storageCompare": { "type": "string", "description": "Comparison operator for the storage value" }, "storageCompareValue": { "oneOf": [ { "type": [ "string", "number", "integer", "boolean", "null" ] }, { "type": "object" }, { "type": "array" } ] }, "storageKey": { "oneOf": [ { "type": [ "string", "number", "integer", "boolean", "null" ] }, { "type": "object" }, { "type": "array" } ] } }, "additionalProperties": false } }, "interactionConditionsRelation": { "type": "string", "description": "How sub-conditions are combined: \"and\" (all must match) or \"or\" (any must match)", "enum": [ "and", "or" ] }, "jsFunction": { "oneOf": [ { "type": [ "string", "number", "integer", "boolean", "null" ] }, { "type": "object" }, { "type": "array" } ] }, "jsFunctionArgs": { "type": "array", "description": "Arguments passed to the custom JavaScript function (used with action \"javascript\")", "items": { "type": "object", "properties": { "jsFunctionArg": { "type": "string", "description": "Argument value" } }, "additionalProperties": false } }, "loadMoreQuery": { "oneOf": [ { "type": [ "string", "number", "integer", "boolean", "null" ] }, { "type": "object" }, { "type": "array" } ] }, "offCanvasSelector": { "oneOf": [ { "type": [ "string", "number", "integer", "boolean", "null" ] }, { "type": "object" }, { "type": "array" } ] }, "popupContextId": { "oneOf": [ { "type": [ "string", "number", "integer", "boolean", "null" ] }, { "type": "object" }, { "type": "array" } ] }, "popupContextType": { "oneOf": [ { "type": [ "string", "number", "integer", "boolean", "null" ] }, { "type": "object" }, { "type": "array" } ] }, "rootMargin": { "oneOf": [ { "type": [ "string", "number", "integer", "boolean", "null" ] }, { "type": "object" }, { "type": "array" } ] }, "runOnce": { "oneOf": [ { "type": [ "string", "number", "integer", "boolean", "null" ] }, { "type": "object" }, { "type": "array" } ] }, "scrollOffset": { "oneOf": [ { "type": [ "string", "number", "integer", "boolean", "null" ] }, { "type": "object" }, { "type": "array" } ] }, "scrollToDelay": { "oneOf": [ { "type": [ "string", "number", "integer", "boolean", "null" ] }, { "type": "object" }, { "type": "array" } ] }, "scrollToOffset": { "oneOf": [ { "type": [ "string", "number", "integer", "boolean", "null" ] }, { "type": "object" }, { "type": "array" } ] }, "storageType": { "oneOf": [ { "type": [ "string", "number", "integer", "boolean", "null" ] }, { "type": "object" }, { "type": "array" } ] }, "target": { "type": "string", "description": "Target reference: \"self\" for the triggering element, an element ID, or a selector context" }, "targetFormSelector": { "oneOf": [ { "type": [ "string", "number", "integer", "boolean", "null" ] }, { "type": "object" }, { "type": "array" } ] }, "targetSelector": { "oneOf": [ { "type": [ "string", "number", "integer", "boolean", "null" ] }, { "type": "object" }, { "type": "array" } ] }, "templateId": { "oneOf": [ { "type": [ "string", "number", "integer", "boolean", "null" ] }, { "type": "object" }, { "type": "array" } ] }, "toggleOffCanvasInfo": { "oneOf": [ { "type": [ "string", "number", "integer", "boolean", "null" ] }, { "type": "object" }, { "type": "array" } ] }, "trigger": { "type": "string", "description": "Event that fires this interaction. Element: click, mouseover, focus, blur, mouseenter, mouseleave, enterView, leaveView, animationEnd, ajaxStart, ajaxEnd, formSubmit, formSuccess, formError. Browser: scroll, contentLoaded, mouseleaveWindow. Query filters: filterOptionEmpty, filterOptionNotEmpty. WooCommerce: wooAddedToCart, wooAddingToCart, wooRemovedFromCart, wooUpdateCart, wooCouponApplied, wooCouponRemoved.", "enum": [ "click", "mouseover", "focus", "blur", "mouseenter", "mouseleave", "enterView", "leaveView", "animationEnd", "ajaxStart", "ajaxEnd", "formSubmit", "formSuccess", "formError", "scroll", "contentLoaded", "mouseleaveWindow", "filterOptionEmpty", "filterOptionNotEmpty", "wooAddedToCart", "wooAddingToCart", "wooRemovedFromCart", "wooUpdateCart", "wooCouponApplied", "wooCouponRemoved" ] } }, "additionalProperties": false }}interactionItem core properties
Section titled “interactionItem core properties”| Property | Type | Description |
|---|---|---|
id | string | integer | Unique identifier for this interaction |
trigger | string | Event that fires this interaction (see triggers below) |
action | string | Action to perform (see actions below) |
target | string | Target reference ("self", element ID, or selector context) |
targetSelector | string | CSS selector for the target element |
delay | string | Delay before executing the action (ms) |
runOnce | boolean | If true, the interaction fires only once |
Additional properties
Section titled “Additional properties”These properties apply depending on the chosen action:
| Property | Type | Used with |
|---|---|---|
animationType | string | startAnimation (animation type) |
animationId | string | startAnimation (predefined animation ID) |
animationDelay | string | startAnimation (animation delay) |
animationDuration | string | startAnimation (animation duration) |
jsFunction | string | javascript (function name to call) |
jsFunctionArgs | array | javascript (arguments array: [{ jsFunctionArg: "value" }]) |
scrollToDelay | string | scrollTo (delay before scrolling) |
scrollToOffset | string | scrollTo (scroll offset in pixels) |
scrollOffset | string | scroll trigger (scroll position threshold) |
rootMargin | string | enterView/leaveView (IntersectionObserver root margin) |
templateId | string | Template ID reference |
formId | string | Form element ID |
ajaxQueryId | string | AJAX query element ID |
offCanvasSelector | string | toggleOffCanvas (offcanvas CSS selector) |
toggleOffCanvasInfo | string | toggleOffCanvas (info field) |
filterElementId | string | Query filter element ID |
infoBoxId | string | Info box element ID |
loadMoreQuery | string | loadMore (query element ID) |
targetFormSelector | string | clearForm (form CSS selector) |
actionAttributeKey | string | setAttribute/removeAttribute/toggleAttribute (attribute name) |
actionAttributeValue | string | setAttribute/toggleAttribute (attribute value) |
disablePreventDefault | boolean | Do not call preventDefault() on the trigger event |
storageType | string | storageAdd/storageRemove/storageCount (storage type) |
popupContextId | string | Popup context ID |
popupContextType | string | Popup context type |
conditionsSep | string | Visual separator for conditions UI |
Example
Section titled “Example”{ "_interactions": [ { "id": "abc123", "trigger": "click", "action": "startAnimation", "target": "self", "animationType": "fadeIn", "animationDuration": "500" }, { "id": "def456", "trigger": "enterView", "action": "show", "target": "self", "rootMargin": "0px 0px -100px 0px", "runOnce": true } ]}Triggers
Section titled “Triggers”Element
clickmouseoverfocusblurmouseentermouseleaveenterViewleaveViewanimationEndajaxStartajaxEndformSubmitformSuccessformError
Browser / Window
scrollcontentLoadedmouseleaveWindow
Query filters
filterOptionEmptyfilterOptionNotEmpty
WooCommerce
wooAddedToCartwooAddingToCartwooRemovedFromCartwooUpdateCartwooCouponAppliedwooCouponRemoved
Popup templates have two additional triggers (showPopup, hidePopup) available via the templateInteractionItem variant in template settings.
Actions
Section titled “Actions”| Action | Description |
|---|---|
show | Show element |
hide | Hide element |
click | Click element |
setAttribute | Set an HTML attribute |
removeAttribute | Remove an HTML attribute |
toggleAttribute | Toggle an HTML attribute |
toggleOffCanvas | Toggle an offcanvas panel |
loadMore | Load more items (query loop) |
startAnimation | Start a CSS animation |
scrollTo | Scroll to an element |
javascript | Execute a custom JavaScript function |
openAddress | Open a map address |
closeAddress | Close a map address |
clearForm | Clear a form |
storageAdd | Add item to browser storage |
storageRemove | Remove item from browser storage |
storageCount | Count items in browser storage |
Interaction sub-conditions
Section titled “Interaction sub-conditions”Each interaction can optionally include sub-conditions that must be met before the action fires. These are stored in the interactionConditions array, with interactionConditionsRelation controlling whether conditions are combined with AND or OR logic.
| Property | Type | Description |
|---|---|---|
interactionConditions | array | Array of interactionConditionItem objects |
interactionConditionsRelation | string | "and" or "or" (default: "and") |
interactionConditionItem properties
Section titled “interactionConditionItem properties”| Property | Type | Description |
|---|---|---|
conditionType | string | Type of condition check |
storageCompare | string | Comparison operator for storage value |
storageCompareValue | any | Value to compare storage against |
storageKey | any | Browser storage key to check |
Example with sub-conditions
Section titled “Example with sub-conditions”{ "id": "abc123", "trigger": "click", "action": "show", "target": "self", "interactionConditions": [ { "conditionType": "storage", "storageKey": "user_preference", "storageCompare": "==", "storageCompareValue": "dark" } ], "interactionConditionsRelation": "and"} Was this page helpful?