Future Plans 🧪📝

The underlying link approach has proven very useful. We want to expand the capabilities to handle other use cases;
  • Trigger interactions ( via a button trigger )
  • Trigger chatbots
  • Trigger Gista with a query
  • Trigger custom JS, JS-based modals, etc.
And also possibly;
  • Trigger GTM datalayer and events

Syntax Expansion

Likely we'll support named or "slotted" formats;
  • ## - Generic trigger prefix
    • e.g. ##glossaryterm
  • #1# - Typed trigger prefix
    • e.g. #1#abc
  • Identify a trigger-capable area ( can be page-wide )
  • Find links that begin with #
  • and contain
    • May be able to regex match #..#.. in selector.
const elements = [...document.querySelectorAll('a[href^="#"][href*="#"]:not([href="#"])')].filter(el => {
const match = el.getAttribute('href').match(/^#(\w*)#(\w+)$/);
return match !== null;
Extract the name, trigger the name.
On page load, build a list of trigger targets, e.g. IX buttons
Typed trigger wiring process;
  • Match to known targets, by name

Registered Type Handlers

  • ix
  • gista ( register and define these as typed trigger handlers in the config code )

Generic trigger

  • Create attribute first
    • wfu-trigger-type
    • wfu-trigger-id
  • wfu-trigger-target-type
  • wfu-trigger-target-id

Other Trigger Types

Currently we have click trigger types
Considering scrolling triggers, and timer-based triggers.
Inactivity-timer based triggers

Technical Notes

What is a Trigger?

Currently SA5 supports the click trigger type only. In this context a trigger is an element such as a link, button, or DIV that is clicked.
In SA5 terms, a trigger may have these properties;
  • Handler. Identifies how the trigger will be handled. Determined as follows;
    • If the trigger element has the attribute wfu-trigger-handler - identifies the handler for the trigger.
    • If unspecified, and the trigger is in a group, that handler is used instead.
    • If there is no group-specified handler, then the trigger is "unhandled," and defaults to a click handler.
  • ID. Uniquely identifies the trigger, or more specifically the triggering action you want performed. In the case of a click trigger, this identifies the click target.
    • wfu-trigger-id - the unique ID of the trigger
  • Group (optional). If the trigger is in a named group, that group name is applied to the trigger. It acts as a namespace.
    • wfu-trigger-group
  • Content. A trigger element may also contain content;
    • Plain-text content ( innerText )
    • HTML content ( innerHTML )

What are Trigger Handlers?

Trigger handlers identify how a particular trigger is handled. For example-
  • Click a matching target link.
  • Prompt an AI chatbot
  • Center a pin in Google maps
  • Start a WhatsApp message
  • Invoke custom code
The trigger's handler is determined as follows;
  • If the trigger itself has a wfu-trigger-handler, that handler is used
  • If not, we check for a trigger group, and a wfu-trigger-group-handler.
  • If not, the trigger is considered unhandled. It defaults to using the click handler, and can be captured in custom code.

What is a Trigger Group?

A trigger group is defined as the nearest ancestor ( containing ) element of a trigger which has the custom attribute of wfu-trigger-group.
A group serves two purposes.
  • It can be named, as in wfu-trigger-group = (name), in which case that name becomes a namespace for the triggers. Some handlers will use this as a scoping mechanism, so that only targets also matching that group will be triggered
  • Default trigger handlers. A group can additionally define a wfu-trigger-group-handler which acts as the handler for any unhandled triggers within.

What are Trigger Targets?

Some trigger handlers such as the click handler can utilize a target element that you specify.
These are identified by wfu-trigger-target = ID. OPTIONALLY They can be namespaced, by wfu-trigger-target-group, which must match.

Setting It Up

Configure the Trigger Library ( optional )

Register handlers, such as Gista.
window.sa5 = window.sa5 || [];
(config) => {
config.handlers.add ('gista');
return config;

Custom Code in the the Trigger Callback ( optional )

Custom-code to handle specific trigger events.
window.sa5 = window.sa5 || [];
(event) => {
console.log("TRIGGER FIRED", event);


A click trigger can be placed on any element that can be clicked. It is governed by;
  • wfu-trigger-type - the type of trigger, which functions as a namespace
  • wfu-trigger-handler - identifies the handler for the trigger. If unspecified, and the trigger is in a group, that handler is used instead. If there is no group-specified handler, then the trigger is "unhandled," and will only fire events in code.
  • wfu-trigger-id - the unique ID of the trigger
  • It can also contain content
All click triggers MAY be in a trigger group. This would be the nearest containing element which has the attributes;
  • wfu-trigger-group - an optional name
  • wfu-trigger-group-type - an optional default type, which will be applied to untyped (generic) triggers
A trigger target can also be placed on any element that can be clicked. Typically this would be a button that is associated with an interaction. It is goverened by;
  • wfu-trigger-target-type - type type of target, which functions as a namespace and must match the trigger
  • wfu-trigger-target-id - unique ID of the target


When a trigger is activated, an event is raised in custom code, with-
  • Trigger container name
  • Trigger type
  • Trigger ID
If trigger target elements are found which match that trigger, they will also be clicked.
If a handler has been associated with the trigger type, it will be invoked, e.g. Gista.

How it Works

  • Identifies relevant areas to process links in. These are referred to as trigger-containers.
    • Identified with a wfu-trigger-area custom attribute. It can optionally be given a unique name
    • Optionally, set the default type with wfu-trigger-default-type =
  • Resolves links in those areas, including the parent node
Last modified 5mo ago