Power-driven, <50m
Copy iframe snippet
<iframe src="https://sailx.com/embed/lights/power-driven" width="100%" height="480" frameborder="0" loading="lazy"></iframe>
Embed our widgets
The interactive ColRegs widgets on SailX are free to embed on your sailing school site, blog, course platform, or community forum. Each widget is a self-contained iframe with a small "Made by SailX" attribution footer. No API key required.
How to use
- Pick a widget below. Each has a live preview and a copy-paste iframe snippet underneath.
- Paste the snippet into your blog post, course page, or HTML template. The recommended height is in the snippet — adjust as needed.
- The widgets are fully interactive inside the iframe — sliders, audio playback, animation, click handlers all work.
- The bottom of each widget links back to
sailx.comwith UTM tags so we can see referral traffic. Please don't strip the footer.
Navigation lights
Rotational silhouette of any of 18+ vessel types. Drag to rotate observer angle 0–360°. See how port red / starboard green / masthead / stern light arcs change with bearing.
Sailing
Copy iframe snippet
<iframe src="https://sailx.com/embed/lights/sailing" width="100%" height="480" frameborder="0" loading="lazy"></iframe>
Not under command
Copy iframe snippet
<iframe src="https://sailx.com/embed/lights/nuc" width="100%" height="480" frameborder="0" loading="lazy"></iframe>
Anchored
Copy iframe snippet
<iframe src="https://sailx.com/embed/lights/anchored" width="100%" height="480" frameborder="0" loading="lazy"></iframe>
Trawling
Copy iframe snippet
<iframe src="https://sailx.com/embed/lights/trawling" width="100%" height="480" frameborder="0" loading="lazy"></iframe>
Day shapes
Interactive day shape silhouettes with rotation slider — see how diamond / cone / cylinder profiles change with viewing angle. 10 vessel configurations.
Not under command
Copy iframe snippet
<iframe src="https://sailx.com/embed/shapes/nuc" width="100%" height="540" frameborder="0" loading="lazy"></iframe>
Restricted in manoeuvre
Copy iframe snippet
<iframe src="https://sailx.com/embed/shapes/ram" width="100%" height="540" frameborder="0" loading="lazy"></iframe>
Towing >200m
Copy iframe snippet
<iframe src="https://sailx.com/embed/shapes/towing" width="100%" height="540" frameborder="0" loading="lazy"></iframe>
Aground
Copy iframe snippet
<iframe src="https://sailx.com/embed/shapes/aground" width="100%" height="540" frameborder="0" loading="lazy"></iframe>
Sound signals
Click play to hear ColRegs sound signals — fog, manoeuvring, anchored, aground. Web Audio synthesis (no audio files).
Power-driven making way
Copy iframe snippet
<iframe src="https://sailx.com/embed/signal/power-driven-making-way" width="100%" height="140" frameborder="0" loading="lazy"></iframe>
Vessel at anchor
Copy iframe snippet
<iframe src="https://sailx.com/embed/signal/anchored" width="100%" height="140" frameborder="0" loading="lazy"></iframe>
Vessel aground
Copy iframe snippet
<iframe src="https://sailx.com/embed/signal/aground" width="100%" height="140" frameborder="0" loading="lazy"></iframe>
Altering to starboard
Copy iframe snippet
<iframe src="https://sailx.com/embed/signal/alter-starboard" width="100%" height="140" frameborder="0" loading="lazy"></iframe>
Radar simulator
Animated radar scope with real-time CPA / TCPA per target. Choose from 5 collision-avoidance scenarios. Click on the scope to drop EBL + VRM.
Head-on (Rule 14)
Copy iframe snippet
<iframe src="https://sailx.com/embed/radar/head-on" width="100%" height="540" frameborder="0" loading="lazy"></iframe>
Crossing — give-way
Copy iframe snippet
<iframe src="https://sailx.com/embed/radar/crossing-give-way" width="100%" height="540" frameborder="0" loading="lazy"></iframe>
Close CPA (3 targets)
Copy iframe snippet
<iframe src="https://sailx.com/embed/radar/close-cpa" width="100%" height="540" frameborder="0" loading="lazy"></iframe>
Want a widget that isn't here?
We have ~30 vessel light configurations, 10 day-shape vessel types, 12 named sound signals, and 5 radar scenarios available as embeds — just construct the URL.
/embed/lights/<vessel-slug>— e.g. /embed/lights/pilot/embed/shapes/<vessel-slug>— e.g. /embed/shapes/fishing/embed/signal/<signal-id>— e.g. /embed/signal/pilot/embed/radar/<scenario-id>— e.g. /embed/radar/overtaking