The sign-language widget is a second, optional widget that sits beside the accessibility widget. A floating hand button opens an avatar card. When a visitor selects text or clicks a sentence on your page, the avatar signs it. It's separate from the accessibility toolbar so that its 3D avatar only loads when a visitor opens it.

What visitors get

The sign-language avatar card on a customer page: open it, then select text or click a sentence to have it signed.

• A floating hand button on your page. Opening it shows a draggable avatar card.
• Click-to-sign: with the card open, the avatar signs the text a visitor has selected, or otherwise the sentence they click. Long sentences are cut at about 240 characters. Clicks on links, buttons and form fields work as normal and aren't signed.
• Controls on the card for brightness, a transparent background and signing speed.
• A size toggle beside the close button that switches the card between small and large. On phones the card is a compact size and the toggle is hidden.

Install it

The widget uses the same widget key as the accessibility widget. You add the website and publish its settings first. See Set up the accessibility widget.

On the Share tab, the Sign-language avatar card holds the second snippet to paste beside the first.

1. 1Copy

1. Open Accessibility and the Share tab for your website.

2. Find Sign-language avatar (optional) and copy its snippet.

3. Paste it on your site beside the accessibility snippet, just before the closing body tag.

The snippet follows the same pattern as the first one, with its own loader:

<script async
  src="https://YOUR-WIDGET-HOST/asl/js/natiq-asl-loader.min.js"
  data-token="YOUR_WIDGET_KEY"></script>

One key, one domain list

The avatar checks the same key against the same service, so:

• your Allowed domains list governs both widgets;
• Rotate key revokes the old key for both, so update both snippets;
• if the key is rotated, the widget's website is disabled or its domain isn't on the list, the avatar removes itself from the page.

If the avatar's service can't be reached, it keeps running rather than disappearing from your page.

Language

The Panel language you publish under Language & voice only changes the avatar's own labels. With Match the page, the avatar takes its label language from the page's lang: Arabic, otherwise English.

The avatar signs Arabic text in Saudi Sign Language by default. Add data-dialect="JOSL" or data-dialect="UAESL" to the snippet for Jordanian or Emirati sign language. The dashboard preview shows the avatar beside the toolbar on a stand-in page. It only shows the avatar's idle stance; nothing signs in the preview.

Stop the two buttons overlapping

Both launchers sit in the bottom corner of the page by default. If they overlap, use one of these on a script tag:

• data-position="left" on one of the two tags;
• data-offset-bottom="88" to raise one above the other (the value is the distance from the edge in pixels; data-offset-side works the same for the side).

The dashboard preview raises the avatar 88 pixels this way while both launchers share a corner.

Attributes outrank the dashboard

A data-lang on the avatar's script tag overrides the language you published, for that page.

Set up the accessibility widgetKey, domains and publishing.Accessibility featuresWhat the toolbar offers visitors.