Triggers

SA5 Events

NEW! UNDER TESTING 🧪 Learn more about SA5 Events here.

SA5 Events is a centralized pub-sub event system which makes triggers and actions consistent throughout all SA5 modules.

Modals is one of the first modules we're refitting with this capability.

Modal Triggers

SA5 Triggers

Common triggers used to;

Trigger	Notes
Click Trigger
Timer
Scroll into View
Scroll Position 🧪
Exit Intent 🧪

Modal Actions

sa-event-action-modal-open = ( event-name )

When the event event-name is invoked, open the current modal.

Place this directly on the wfu-modal element that you want to open.

Future

sa-event-action-modal-hide

sa-event-trigger-modal-opened

sa-event-trigger-modal-closed

Modal-Specific Triggers

DEPRECATED These attributes are fully supported but considered deprecated. SA5 Events is the modern way to trigger modals.

Trigger	SA5 Modals	SA5 Events
Click	wfu-modal-trigger-click	SA5 Events Action
Timer	wfu-modal-trigger-timer
Scroll Position 🧪		SA5 Event Trigger
Scroll into View 🧪
Exit Intent 🧪

Trigger	Type
Click wfu-modal-trigger-click = ( modal-name )	Manual	Defined on any button, link, or other element
Timer wfu-modal-trigger-timer = ( time in milliseconds )	Automatic	Configured in seconds
Scroll Position 🧪	Automatic	Configured for a specific page % or a specific px position
Scroll into View 🧪	Automatic	Tied to an element
Exit Intent 🧪	Automatic	When the mouse moves outside of the page canvas
Gate	Manual

Usage Notes ( Modal Setup )

There are many different ways to trigger a modal open. Depending on the type of trigger, these attributes will be placed either on a triggering element, or on the modal element itself.

I want this button or element to trigger my modal on click

On the button or element to be clicked, add this attribute;

wfu-modal-trigger-click = ( modal-name )

Specify the modal's name that you want to open.

I want the modal to appear after X milliseconds

Triggers the modal when a timer has elapsed, starting from page load.

Place this directly on the modal element.

wfu-modal-trigger-timer = ( time in milliseconds )

1 second = 1,000 ms, so if you want to wait 5 seconds, set the value to 5000.

Trigger	Trigger Type	Attribute	Value	Notes
Click	Direct	wfu-modal-trigger-click	Modal name	Place on the triggering button, link, or element
Timer	In-Direct	wfu-modal-trigger-timer	Time in milliseconds	Place on the modal element directly

This is being combined with SA5 Trigger. Event = open modal Action

Types;

• Manual triggers are user-actioned. These can be configured to ignore modal suppression even if it has already been closed.

• Automatic triggers will only open the modal if it is un-suppressed.

Suppression;

Goals;

• Timed open, in ms

  • Auto unhide

  • Or, click trigger, for interaction

  • Respects suppression setting

• Triggered open, by scroll

• Triggered open, by exit intent

• Timed close, in ms

  • Element removal

  • Or, click trigger, for interaction

  • ? Option to suppress