Widget integration

The Aerolync widget adds live aerodrome status, PPR requests and pilot information to any website. Integration is a single script tag; no build step, no dependencies, no styling work. What the widget shows and which form fields it asks for is configured by the aerodrome administrator in the platform (PPR → Widget) — see the widget configuration page. This page covers the technical side.

Quick start

Place this snippet just before the closing </body> tag:

<script src="https://cdn.aerolync.com/widget/v1/widget.js"
        data-sitekey="YOUR_SITEKEY" async></script>

That is the entire integration. The default open button (the "pill") appears in the configured corner of the page, and the panel opens on click.

The sitekey identifies the aerodrome and is shown in the widget settings in the platform. It is not a secret — protection happens server-side through the allowed-domains list and rate limiting.

How it loads

1. widget.js is a small loader (a few KB). With async it never blocks your page's rendering.
2. The loader fetches the widget configuration for the sitekey and then loads the versioned application bundle from our CDN. Versioning is managed by Aerolync; you always reference /widget/v1/widget.js and never need to update the snippet.
3. The widget renders inside a closed Shadow DOM. Its styles cannot leak into your site and your site's CSS cannot break the widget — including site-wide rules such as * { scrollbar-width: thin } or global typography, which the widget neutralises internally. The only additions to your page are the widget's host elements and one <style> element registering the DM Sans font (@font-face does not work inside Shadow DOM).

The widget defines exactly one global: window.Aerolync.

Opening the widget from your own UI

Any element can open the widget by adding one attribute — no JavaScript required:

<button data-aerolync-open>Request PPR</button>
<button data-aerolync-open="ppr">Straight to the PPR form</button>
<a href="#" data-aerolync-open="pilot">Pilot info</a>

The attribute value selects the tab (status, ppr or pilot); leave it empty for the default tab. Clicks are handled through event delegation, so elements added dynamically — page builders, single-page applications — work automatically.

Try it here. This page embeds the widget with a demo sitekey, so the attribute works right on this page: Open the PPR form Pilot info

JavaScript API

For programmatic control the loader installs a command queue, so calls are safe at any moment — even before the widget has finished loading they are queued and executed automatically:

<script>
  Aerolync('open');                   // open the widget
  Aerolync('open', { tab: 'ppr' });   // open on a specific tab
  Aerolync('close');
  Aerolync('toggle');
</script>

Domains, security and rate limiting

• Allowed domains — when the administrator fills in the allowed-domains list, the widget API refuses requests from any other origin (fail-closed, including requests without an Origin header). Add every hostname the site uses, e.g. example.com and www.example.com. An empty list allows all domains.
• Rate limiting — all widget endpoints are rate-limited per client and per endpoint. Normal visitor traffic never hits the limits.
• Spam protection — the PPR form contains a honeypot field and all input is validated server-side; the same validation rules the form applies client-side are enforced again on submission.

Localisation and time

• The interface ships in 25 European languages. The visitor's language is detected automatically (browser language, with timezone as a tie-breaker) and can be switched inside the widget.
• Times are entered in UTC by default — the aviation convention. The visitor can switch to another time zone; conversion to UTC happens before submission, so the platform always receives UTC.
• The phone field offers a country picker with flags and per-country validation and formatting.

Content-Security-Policy

If your site enforces a CSP, allow the following:

script-src  https://cdn.aerolync.com
connect-src https://api.aerolync.com
img-src     https://cdn.aerolync.com
font-src    https://cdn.aerolync.com

The widget's own styles live inside its Shadow DOM, but the font registration is one inline <style> element in your page: with a strict style-src (without 'unsafe-inline' or a nonce mechanism) that element may be blocked. The widget then simply falls back to the system font stack — everything keeps working.

Stability

The stable, supported integration surface is exactly what is documented on this page: the script tag, the data-sitekey and data-aerolync-open attributes, and the Aerolync() API. The network endpoints the widget calls internally (api.aerolync.com/widget/*) are not a public API and may change without notice — do not integrate against them directly.

Troubleshooting