Paste this into an Elementor Pro HTML widget. Only data-call changes from one call to the next. Several widgets can sit on one page; the engine loads once.
<div class="sda-call" data-call="circle-left"></div> <script src="https://call-animator.web.app/engine/loader.js" async></script>
Call page with a picker (visitors choose the call; the address bar updates so a call can be linked, e.g. ?call=star-right):
<div class="sda-call" data-picker data-panels="steps,about,checks"></div> <script src="https://call-animator.web.app/engine/loader.js" async></script>
Full single-call page (animation, steps, About with the CALLERLAB definition, and Checks for the logged-in administrator):
<div class="sda-call" data-call="circle-left" data-panels="steps,about,checks"></div> <script src="https://call-animator.web.app/engine/loader.js" async></script>
| Attribute | Values |
|---|---|
data-call | circle-left, circle-right, star-right, star-left, couples-promenade, arm-turn-right, arm-turn-left, allemande-left, allemande-right, swing, courtesy-turn, partner-trade, step-to-a-wave, pass-the-ocean, extend, double-pass-thru, trade-by, veer, ferris-wheel, zoom, scoot-back, recycle, flutterwheel, wheel-around, swing-thru, spin-the-top, run, fold, touch-a-quarter, u-turn-back, half-sashay, rollaway, circulate, square-thru, star-thru, slide-thru, california-twirl, lead-right, split-two, bend-the-line, wheel-and-deal, pass-thru, dosado, box-the-gnat, right-and-left-thru, ladies-chain, four-ladies-chain, right-and-left-grand, weave-the-ring, wrong-way-grand, trade, couples-trade, single-hinge, couples-hinge, cast-off-3-4, turn-thru, left-turn-thru (Plus) |
data-amount | How far: 1/4, 1/2, 3/4, Full (whichever the call offers) |
data-levels | Which levels the call chooser starts with: ms, plus, or ms,plus (the default: all). Visitors can toggle the level chips. |
data-sort | az (default, alphabetical) or teach (CALLERLAB suggested teaching order, with Previous / Next buttons). |
data-to | Allemande Left: leave it off for the call on its own, or alamo for the combination "Allemande Left to an Alamo Ring". For Swing and Partner Trade, data-couples is 1 (default), 2 or 4; for Courtesy Turn, 1 or 2. For Allemande Left and Allemande Right, data-pairs is 1 (default), 2 or 4. For Wheel Around, data-from is promenade, passthru or couple (and data-way normal or reverse); for Veer, data-way is left or right; for Extend, data-from is qtag or tandems. For Circulate, data-type is all, ends, centers, split, couples or column; for Run, data-who is boys, girls, centers or ends; for Fold, boys or girls; for Swing Thru, data-hand R or L. For Square Thru, data-hands is 1-4 and data-hand R or L; for Lead Right, data-way right or left; for Slide Thru, Bend the Line and Wheel and Deal, data-from picks the starting formation. For Pass Thru, data-from is couples or dancers; for Dosado, data-pairs is 1 or 2. For Trade, data-who is centers, ends or all; for Couples Trade, data-from is two or line; for Cast Off Three-Quarters, data-from is mini, line or two. Any call option works the same way, and in the picker's address bar (?call=allemande-left&to=alamo). |
data-view | overhead, tilted (default), low |
data-panels | none (default), or any of steps,about,checks. On a WordPress site, checks shows only to a logged-in user (the administrator); visitors never see it. |
data-figures | classic (default), human (built-in walking figures), or people (real characters by ActorCore / Reallusion, couples in matching shirts). On a picker page it can go in the address too: picker/?figures=people (handy in an iframe: <iframe src="https://call-animator.web.app/picker/?figures=people" width="100%" height="1100" style="border:0"></iframe>, for page editors that can't take the script) |
data-title | off hides the call name heading |
data-picker | present: show the call and "how far" pickers |