The accessibility widget is an Arabic-first toolbar that lets your visitors adjust font size, contrast, spacing, reading mode and more on your pages. It ships as the <natiq-a11y> web component, added to your page by a small loader script.

Install

1. In Natiq, open Accessibility and choose (or create) the widget for your website. Design it on the Design tab, then Publish.

2. On the Share tab, under Install & domains, copy the Embed snippet.

3. Paste it once, just before </body>, on every page of your site.

<script async
  src="https://cx.na6iq.com/a11y/js/natiq-a11y-loader.min.js"
  data-token="YOUR_WIDGET_KEY"></script>

A Saudi-region workspace uses https://sa.na6iq.com/a11y/js/…. Copy the snippet from the dashboard so the host is right. You do not add a <natiq-a11y> element yourself; the widget adds it to <body>.

The loader does three things: it reads the data-* attributes below, installs a queueing window.NatiqA11y so calls made before the widget loads are not lost, and restores a returning visitor's saved settings onto the page before first paint so there is no flash. It then loads the widget after the page's load event, when the browser is idle. A visitor who already has saved settings gets it sooner.

Attributes

Attribute	Values	Effect
data-token	Widget key	Identifies your published widget. Without it the widget runs on built-in defaults.
data-lang	ar, en	Panel language. Absent means "follow the dashboard, else the page".
data-position	left, right	Which corner the launcher sits in.
data-exceptions	Comma-separated CSS selectors	Parts of your page the widget must never change. Because the list is split on commas, a selector that itself contains a comma cannot be expressed here.
data-offset-bottom	Pixels, 0 to 600	Launcher distance from the bottom edge. Default 20.
data-offset-side	Pixels, 0 to 600	Launcher distance from the side chosen by the position. Default 20.
data-load	eager	Load at DOMContentLoaded plus idle instead of after load.
data-api	An API origin	Developer escape hatch to point at another backend. Leave it out in production.
data-preview	true	Used by the dashboard's live preview. Do not set it.

Invalid or out-of-range offsets fall back to 20.

Leave data-lang and data-position out

The dashboard snippet carries only data-token. Attributes on the tag override what you configured in the dashboard for that page, so add data-lang or data-position only to pin a value on one page.

If the page also embeds the sign-language widget, both launchers default to the same bottom corner. Move one with data-position="left" or raise it with data-offset-bottom="88".

Which setting wins

Settings come from four layers. A later layer beats an earlier one:

1. built-in defaults (right corner, all features on, language follows the page);
2. the published document from the dashboard, fetched by key;
3. the loader's data-* attributes;
4. NatiqA11y.init({ … }) from your own JavaScript.

The host page outranks the dashboard on purpose: someone who wrote an attribute into their own HTML made a deliberate per-page choice. Only a value you actually set counts; leaving a field out never erases a lower layer.

One exception: exceptions are combined. The dashboard's exceptions and yours both apply, because each is a statement about what to leave alone.

If you set the language to Auto in the dashboard, the widget picks Arabic when your page's <html lang> starts with ar, and English otherwise. New widgets start in Arabic.

JavaScript API

The loader defines window.NatiqA11y immediately. Calls made before the widget has loaded are queued and run in order.

Method	Effect
NatiqA11y.init(config)	Merge settings into layer 4. Accepts lang, position, exceptions, offsetBottom, offsetSide.
NatiqA11y.open()	Open the panel.
NatiqA11y.close()	Close it.
NatiqA11y.reset()	Clear every setting the visitor applied.
NatiqA11y.destroy()	Close the panel, undo its changes to the page and remove the widget.

// Add a button to your own page that opens the panel
document.querySelector('#accessibility-link').addEventListener('click', () => {
  NatiqA11y.open()
})

NatiqA11y.init({ position: 'left', exceptions: ['#checkout', '.map-canvas'] })

NatiqA11y.applyPreviewConfig and NatiqA11y.setPreviewOpen also exist for the dashboard's preview. They are not for production pages.

The widget key is read when the loader runs, so set data-token on the tag rather than relying on init({ token }). The widget does not dispatch events your page can listen to.

What it saves and what it never does

A visitor's choices are saved in their browser (localStorage, key natiq-a11y:v1) for your site only, and sync across the visitor's tabs. If storage is blocked, the settings last for the page view. The widget's last good copy of your published design is also cached for 24 hours so returning visitors see it immediately.

The widget fails open: if our servers are slow or down, your page loads normally and the widget runs on defaults. The one meaningful refusal is a 404 for the key, which removes the widget. See Allowed domains and keys.