Web Chat is configured with data-* attributes on its script tag, the one with id="natiq-chat-script". Appearance, welcome screen, menu and pre-chat form are not attributes: you design those in the dashboard and they apply to every embed.

<script async
  id="natiq-chat-script"
  src="https://cx.na6iq.com/webchat/js/natiqLoader.min.js"
  data-widgetkey="YOUR_WIDGET_KEY"
  data-notify-sound="off"
  data-mode="mobile"></script>

Attributes

Attribute	Default	Values	Effect
data-widgetkey	none	Your widget key	Selects the agent. Required for a live chat.
data-lang	none	ar, en (or a tag such as ar-SA)	Forces the widget's language and direction. Overrides your page's lang.
data-open	off	on, true, 1, yes	Start with the chat card open instead of just the bubble.
data-mode	responsive	mobile, desktop	mobile always uses the phone sheet; desktop always uses the floating card, at any width. Without it the widget picks the sheet below 768 px wide.
data-mobile	off	on, true, 1, yes	Alias for data-mode="mobile". A false value pins nothing. data-mode wins when both are set.
data-theme	none	light, dark	Tells the widget the device theme, for designs that follow it. Meant for webviews whose prefers-color-scheme does not reflect the app's own theme. Not remembered; set it on every load. A mode the design forces still wins.
data-notify-badge	on	off, false, 0, no turn it off	Unread count on the bubble.
data-notify-sound	on	same	A chime when a reply arrives while the chat is closed or the tab is hidden.
data-notify-title	on	same	Unread count in front of your page's <title>. The title is restored afterwards.
data-load	deferred	eager	By default the loader waits for the page's load event and an idle moment. eager injects the widget immediately. Read by the loader only.

How values are read

• The three data-notify-* switches are opt-out: anything other than off, false, 0 or no leaves them on.
• data-open and data-mobile are opt-in: only on, true, 1 or yes turn them on.
• Values are case-insensitive, except data-load, which must be exactly eager. Unrecognised values fall back to the default.
• Attributes are read once, when the widget starts. Change them before the script runs, or reload.

Widget key precedence

The widget looks for a key in this order and uses the first it finds:

1. a ?widgetKey= parameter in the page URL,
2. data-widgetkey on the script tag.

The URL parameter exists so one preview page can show any agent. On your own site, use the attribute, and do not link to pages carrying ?widgetKey= for a different agent.

Layout on phones and tablets

Below 768 px the chat opens as a bottom sheet. Use data-mode="mobile" for an embedded webview that is wider than a phone but behaves like one, and data-mode="desktop" to keep the card on a narrow window.

Dark mode

If the dashboard design is set to follow the visitor's device, the widget uses prefers-color-scheme. Inside a native app webview, pass the app's own theme:

<script async id="natiq-chat-script"
  src="https://cx.na6iq.com/webchat/js/natiqLoader.min.js"
  data-widgetkey="YOUR_WIDGET_KEY"
  data-theme="dark"></script>

If the design forces light or dark, that choice wins over the attribute.

Attributes you will see but should not use

Attribute	What it is
data-preview	Used by the dashboard's Design tab for its read-only live preview. It disables the real chat. Do not set it on your site.
data-botkey	The key of the older bot receiver. New embeds use data-widgetkey.

Language and direction

The widget's own labels come in English and Arabic. It picks the language from data-lang on the script tag, else your page's <html lang>, else Arabic for a right-to-left page with no lang, else the default language in your design, else English. Any value starting with ar or en counts (for example ar-SA). The chat card sets its own direction from that language — right to left for Arabic — and each message follows its own text direction.

Visitor data stored in the browser

Web Chat stores a visitor id, the name and email the visitor gave (if any), and their light/dark preference in localStorage, scoped to the widget key. The keys are natiq_webchat_visitor_id, natiq_webchat_visitor_name, natiq_webchat_visitor_email and natiq_webchat_color_scheme, each stored as <name>:<widgetKey>. If your consent policy covers local storage, load the script only after consent (see Install Web Chat).