Script Actions 🧪

Invoke a script as an SA5 Action.

IMPORTANT: Differentiate;

• "Sequence" action specifications from

• JS actions that run a function

Goals;

Use cases;

• Start a video after an interaction has completed

• Display a pop-up in the middle of an interaction sequence

Technical notes

sa-action-script = ( ... )

This Action requires an SA5 config block

<script type="application/sa+json" handler="action.script" event="alert1">
{
  "@context": "https://attr.sygnal.com",
  "@version": "0.1",
  "script": [
    { "action": "class-add", "data": "class1" }, 
    { "action": "class-remove", "data": "class1" },
    { "action": "scroll-into-view", "behavior": "instant", "block": "start" }      
  ]
}
</script>

This Action requires an SA5 config block

<script type="application/sa+json" handler="action.script" event="alert1">
function test1() { 
  sa.events.invoke("test1"); 
}
</script> 

This Action requires an SA5 config block;

<script type="application/sa+json" handler="action.script" event="alert1">
{
  "@context": "https://attr.sygnal.com",
  "@version": "0.1",
  "function": "myFunc1"  
}
</script>

This Action requires an SA5 config block

<script type="application/sa+json" handler="action.script" event="alert1">
loadCssOnce("https://calendly.com/assets/external/widget.css"); 
loadJsOnce("https://calendly.com/assets/external/widget.js", module?); 

new CSSLoader({
  url: "https://calendly.com/assets/external/widget.css"
}).load();
new CSSLoader({
  url: "https://calendly.com/assets/external/widget.js"
}).load();

Calendly.initPopupWidget({ url: 'https://calendly.com/YOUR_SCHEDULING_LINK' }); 

</script> 

This Action requires an SA5 config block;

Actions

Triggers;

• User action

  • Click

  • Scroll

  • Hover

• Variable change ( reactive );

  • e.g. x > 1000

• Timer

• Interaction step

• Form submit

• Alpine.js triggers

Actions;

• Click ( other elements )

  • Interaction

• Scroll ( other elements )

• Code execution

• Class add/remove

• Form submit

Mechanic;

• Define triggers

  • e.g. attribute wfu-click = ( name )

https://codepen.io/memetican/pen/pvzXrKQ/30243a91b6fb117a92b0e5b3b5b69503?editors=1111