NEWSADA Title II web deadlines: April 24, 2026 (50k+ pop) · April 26, 2027 (under 50k) — Is your site compliant?ADA Title II: April 2026 & 2027 deadlinesLearn more →

Script Tag

The script tag is the simplest way to add the Angstroma widget to any website. One line of HTML — no build step, no framework, no dependencies.

The snippet

Paste before the closing </body> tag. Replace the key with yours.

index.html
<script
  src="https://cdn.angstroma.com/widget.js"
  data-key="ang_live_YOUR_KEY"
  async
></script>
Important
The attribute must be data-key. Any other name (data-api-key, data-apikey, etc.) will prevent the widget from loading. No error is thrown — the widget simply does not appear.

All data-* attributes

data-key
Required—
Your API key. Widget will not initialize without it.
data-preset
Optionalnone
Pre-apply a preset for first-time visitors.
data-position
Optionalright
Button position. Values: left or right.
data-student-id
Optional—
Load a saved student accessibility profile by external ID.
data-tenant
Optionalfrom key
Tenant slug override. Only needed in rare multi-tenant setups.
data-api-url
Optionalapi.angstroma.com
Override the API endpoint. For Enterprise self-hosted only.

Examples

Button on the left side

<script
  src="https://cdn.angstroma.com/widget.js"
  data-key="ang_live_YOUR_KEY"
  data-position="left"
  async
></script>

With a preset applied

<script
  src="https://cdn.angstroma.com/widget.js"
  data-key="ang_live_YOUR_KEY"
  data-preset="wcag-2.2-aa"
  async
></script>

Load a student profile (education use)

<script
  src="https://cdn.angstroma.com/widget.js"
  data-key="ang_live_YOUR_KEY"
  data-student-id="student-external-id-123"
  async
></script>
Important
K–12 student profiles require Schools / Enterprise + signed DPA. Setting data-student-idfor any user under 18 in a U.S. K–12 context triggers FERPA and COPPA obligations — those deployments are gated to the Schools and Enterprise tiers and activate only after a signed Data Processing Agreement is on file. Angstroma stores only the opaque ID you provide; no name, email, or course metadata is persisted. See the Schools overview and FERPA page.

Verification

After adding the snippet:

  1. Open the page in a browser
  2. Look for a circular floating button (bottom-right or bottom-left)
  3. Click it — the accessibility panel should open
  4. Open DevTools → Console — look for [Angstroma A11y] Widget initialized

Content Security Policy

If your site uses a Content Security Policy, add these directives to allow the widget to load:

csp
script-src  https://cdn.angstroma.com;
connect-src https://api.angstroma.com;

Platform-specific guides

Need help with a specific platform? Next.js · React · WordPress · Shopify · Webflow · Angular · Vue.js