Skip to main content

Interactions

The allegro.interaction namespace provides a convenience wrapper for triggering interactions.

For more information about what interactions are, see the product documentation on interactions.

allegro.interaction.trigger(name, data?)​

Trigger an interaction. Optionally include a data object with any relevant properties to be passed down to the underlying interaction. The data will be passed down to the Alpine.js x-data scope of the interaction template, allowing you to use it in your template logic and rendering.

allegro.interaction.trigger('member-wall');

allegro.interaction.trigger('member-wall', {
    title: 'Join our membership program',
});

Parameters​

ParameterTypeDescription
namestringThe interaction event name
dataobjectOptional data to include with the interaction

Interaction Actions​

Interactions can have various composable actions, each with their own conditions and delays. JavaScript/CSS actions are applied to the root of the page. Template actions are rendered within a shadow root in the appropriate place configured by the interaction. For example, an interaction that doesn't supply a target selector will be append to the end of the body, while one that targets a specific element will be rendered before/after/etc. that element. The specific logic for how it is rendered relevant to that element is driven by the interaction action.

For more information on templates, see the templates guide.