The sign-language widget adds an avatar to your site that signs Arabic text in a regional sign language. It is a second widget beside the accessibility widget, not a feature of it: the avatar and its 3D engine load only when a visitor opens it, so the toolbar stays light. It is the <natiq-asl> web component.

Install

It uses the same widget key as the accessibility widget, so one dashboard widget governs both.

1. Open Accessibility in Natiq and select your widget.

2. On the Share tab, under Install & domains, copy the snippet in Sign-language avatar (optional).

3. Paste it next to the accessibility snippet, before </body>.

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

For a Saudi-region workspace the host is https://sa.na6iq.com/asl/js/…. Copy the dashboard snippet so it is right for your region. The widget adds its own <natiq-asl> element to <body>.

Allowed domains and key rotation apply to both widgets. See Allowed domains and keys.

How visitors use it

A launcher opens a card with the avatar. While the card is open, the visitor clicks a block of text on your page (a heading, paragraph or list item) and the avatar signs that sentence. Links are left alone, so navigation still works. Blocks light up on hover; what lights up is what is signed. The card can be dragged, resized between small and large, and has controls for brightness, a transparent background and speed. On phones (640 px wide or less) it shows a compact card and ignores the size setting.

Attributes

Attribute	Default	Values	Effect
data-token	none	Widget key	Applies the dashboard's language and your allowed domains.
data-lang	page language	ar, en	Language of the card's controls. Not the language signed.
data-position	right	left, right	Corner of the launcher and card.
data-size	small	small, medium, large	Card size: 280 by 420, 360 by 540 or 440 by 660 px. Unknown values become small.
data-dialect	SSL	SSL, JOSL, UAESL	Which sign language to sign into. Not case-sensitive; unknown values become SSL.
data-capture	on	false	Turns click-to-sign off; the card is then driven only by the API.
data-offset-bottom	20	Pixels	Launcher distance from the bottom edge.
data-offset-side	20	Pixels	Distance from the side.
data-auto-open	off	true	Open the card right after the widget starts. Meant for demos.
data-load	deferred	eager	Load at DOMContentLoaded plus idle instead of after load.
data-api	production API	An API origin	Developer override. Leave out in production.
data-preview	off	true	Dashboard preview only.

Dialects: SSL is Saudi (ar-SA), JOSL Jordanian (ar-JO), UAESL Emirati (ar-AE). Every dictionary translates from Arabic; the widget's UI language does not change what is signed.

If both widgets share a corner, give one data-position="left" or raise one with data-offset-bottom="88".

Language precedence

The published language from the dashboard applies only while your page has not chosen one. A data-lang attribute or NatiqAsl.init({ lang }) wins. With no data-lang, the widget follows <html lang> (Arabic if it starts with ar, English otherwise) unless the dashboard's language is set to Arabic or English; that is applied at once from the cached copy, otherwise when the config arrives.

JavaScript API

window.NatiqAsl exists as soon as the loader runs; calls before the widget loads are queued.

Method	Effect
NatiqAsl.init(config)	Change settings at runtime. It accepts lang, position, size, dialect, capture, offsetBottom and offsetSide (offsets are clamped to 0–600).
NatiqAsl.open() / close() / toggle()	Show or hide the card.
NatiqAsl.translate(text)	Translate the text and sign it. The card must be open: call NatiqAsl.open() first.
NatiqAsl.play(payload)	Replay a translate response you already have, with no network call. Accepts the whole response or just its data object. The card must be open: call NatiqAsl.open() first.
NatiqAsl.stop()	Stop signing.
NatiqAsl.destroy()	Remove the widget.

// A host that drives the avatar from its own button
NatiqAsl.init({ capture: false, dialect: 'JOSL' })
document.querySelector('#sign-this').addEventListener('click', () => {
  NatiqAsl.open()
  NatiqAsl.translate(document.querySelector('#notice').textContent)
})

The widget does not dispatch events for your page to listen to.

The translate call

The widget calls POST /api/v1/ai/translate/text-to-sign on the API host, anonymously, with:

{ "text": "مرحبا بك", "spokenLanguage": "ar-SA", "signedLanguage": "SSL" }

The spokenLanguage and signedLanguage pair comes from the dialect. We have not documented the response shape here because it has two versions in the wild and the widget handles both; use NatiqAsl.translate() rather than calling the endpoint yourself. A long sentence expands to many signs (fingerspelling is one sign per letter), so output is capped at 24 movements; the rest of a long sentence isn't signed.

Failure behaviour

If the config request is slow or fails, the widget keeps working on what your page configured. If the key is unknown, replaced, or your domain is not allowed (a 404), the widget removes itself. See Allowed domains and keys.