@helpai/elements 1.9.0 → 1.11.0

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
package/llms-full.txt CHANGED
@@ -1,6 +1,6 @@
1
- # Help AI Elements: the full SDK docs (@helpai/elements@1.9.0)
1
+ # Help AI Elements: the full SDK docs (@helpai/elements@1.11.0)
2
2
 
3
- <!-- https://cdn.help.ai/sdk/js/elements/1.9.0/docs/quickstart.md -->
3
+ <!-- https://cdn.help.ai/sdk/js/elements/1.11.0/docs/quickstart.md -->
4
4
 
5
5
  # Quickstart
6
6
 
@@ -67,7 +67,7 @@ kebab-case `data-*` attribute. Common ones:
67
67
  ></script>
68
68
  ```
69
69
 
70
- Full list: [Installation § script data attributes](https://cdn.help.ai/sdk/js/elements/1.9.0/docs/installation.md#path-a--script-data--auto-boot).
70
+ Full list: [Installation § script data attributes](https://cdn.help.ai/sdk/js/elements/1.11.0/docs/installation.md#path-a--script-data--auto-boot).
71
71
 
72
72
  ---
73
73
 
@@ -149,7 +149,7 @@ export default function RootLayout({ children }: { children: React.ReactNode })
149
149
  ### Vue / Svelte / Angular / any bundler
150
150
 
151
151
  Call `init(...)` once on mount and `destroy()` on unmount, or use the `<web-ai-chat>` element (path D).
152
- Full framework-by-framework walkthrough: [Framework integrations](https://cdn.help.ai/sdk/js/elements/1.9.0/docs/frameworks.md).
152
+ Full framework-by-framework walkthrough: [Framework integrations](https://cdn.help.ai/sdk/js/elements/1.11.0/docs/frameworks.md).
153
153
 
154
154
  ---
155
155
 
@@ -186,20 +186,20 @@ round chat bubble with an accent color.
186
186
  - **Close the panel** → the bubble returns.
187
187
  - **Reload the page** → your chat history stays intact.
188
188
 
189
- Something not showing up? → [Troubleshooting](https://cdn.help.ai/sdk/js/elements/1.9.0/docs/troubleshooting.md).
189
+ Something not showing up? → [Troubleshooting](https://cdn.help.ai/sdk/js/elements/1.11.0/docs/troubleshooting.md).
190
190
 
191
191
  ---
192
192
 
193
193
  ## 4. Common next steps
194
194
 
195
- - **Match your brand** — [Theming](https://cdn.help.ai/sdk/js/elements/1.9.0/docs/theming.md) has every color,
195
+ - **Match your brand** — [Theming](https://cdn.help.ai/sdk/js/elements/1.11.0/docs/theming.md) has every color,
196
196
  radius, and font knob.
197
- - **Change the launcher label / icon** — [`launcher` options](https://cdn.help.ai/sdk/js/elements/1.9.0/docs/configuration.md#launcher).
197
+ - **Change the launcher label / icon** — [`launcher` options](https://cdn.help.ai/sdk/js/elements/1.11.0/docs/configuration.md#launcher).
198
198
  - **Know who the visitor is** — pass `userContext: { id, email, name }`
199
199
  (and `pageContext: { area }`) for personalization.
200
- - **Forward chat events to analytics** — [Events & hooks](https://cdn.help.ai/sdk/js/elements/1.9.0/docs/events-and-hooks.md).
200
+ - **Forward chat events to analytics** — [Events & hooks](https://cdn.help.ai/sdk/js/elements/1.11.0/docs/events-and-hooks.md).
201
201
  - **Add a second widget** (one for sales, one for support) — [Recipes
202
- § Multiple widgets](https://cdn.help.ai/sdk/js/elements/1.9.0/docs/recipes.md#multiple-widgets-on-one-page).
202
+ § Multiple widgets](https://cdn.help.ai/sdk/js/elements/1.11.0/docs/recipes.md#multiple-widgets-on-one-page).
203
203
 
204
204
  ---
205
205
 
@@ -230,15 +230,15 @@ the same deployment:
230
230
  | Remix | read from `window.ENV` |
231
231
  | Create React App | `REACT_APP_*` |
232
232
 
233
- Full security notes: [Security & privacy](https://cdn.help.ai/sdk/js/elements/1.9.0/docs/security-privacy.md).
233
+ Full security notes: [Security & privacy](https://cdn.help.ai/sdk/js/elements/1.11.0/docs/security-privacy.md).
234
234
 
235
235
  ---
236
236
 
237
- <!-- https://cdn.help.ai/sdk/js/elements/1.9.0/docs/installation.md -->
237
+ <!-- https://cdn.help.ai/sdk/js/elements/1.11.0/docs/installation.md -->
238
238
 
239
239
  # Installation
240
240
 
241
- Deep-dive for every install path. See [Quickstart](https://cdn.help.ai/sdk/js/elements/1.9.0/docs/quickstart.md)
241
+ Deep-dive for every install path. See [Quickstart](https://cdn.help.ai/sdk/js/elements/1.11.0/docs/quickstart.md)
242
242
  for the 5-minute version.
243
243
 
244
244
  ---
@@ -250,7 +250,7 @@ for the 5-minute version.
250
250
  | [A. `<script data-*>` auto-boot](#path-a--script-data--auto-boot) | Static HTML, WordPress, no build step | CDN |
251
251
  | [B. Async loader snippet](#path-b--async-loader-snippet) | Tag managers, analytics pipelines | CDN |
252
252
  | [C. NPM package](#path-c--npm-package) | React, Next.js, Vue, Svelte, SolidJS, any bundler | NPM |
253
- | [React kit](https://cdn.help.ai/sdk/js/elements/1.9.0/docs/frameworks.md#react) | React, Next.js, Remix: `<HelpAI />` + `useHelpAI()` | NPM |
253
+ | [React kit](https://cdn.help.ai/sdk/js/elements/1.11.0/docs/frameworks.md#react) | React, Next.js, Remix: `<HelpAI />` + `useHelpAI()` | NPM |
254
254
  | [D. Web Component](#path-d--web-component) | Declarative tags in any framework | CDN or NPM |
255
255
 
256
256
  > ### CDN URL
@@ -271,9 +271,9 @@ for the 5-minute version.
271
271
  All four paths:
272
272
 
273
273
  - Load the same JS bundle.
274
- - Accept the same [configuration options](https://cdn.help.ai/sdk/js/elements/1.9.0/docs/configuration.md).
275
- - Emit the same [events](https://cdn.help.ai/sdk/js/elements/1.9.0/docs/events-and-hooks.md).
276
- - Respect the same [isolation guarantees](https://cdn.help.ai/sdk/js/elements/1.9.0/docs/security-privacy.md#shadow-dom--iframe).
274
+ - Accept the same [configuration options](https://cdn.help.ai/sdk/js/elements/1.11.0/docs/configuration.md).
275
+ - Emit the same [events](https://cdn.help.ai/sdk/js/elements/1.11.0/docs/events-and-hooks.md).
276
+ - Respect the same [isolation guarantees](https://cdn.help.ai/sdk/js/elements/1.11.0/docs/security-privacy.md#shadow-dom--iframe).
277
277
 
278
278
  You can combine them — e.g., a Next.js page can use path C, and a
279
279
  marketing landing can use path A, both pointing at the same deployment.
@@ -327,13 +327,13 @@ The zero-JavaScript path intentionally exposes a small, flat subset of
327
327
  | `data-page-context` | `pageContext` extras (JSON) | `'{"experiment":"b"}'` |
328
328
 
329
329
  Unknown attributes are ignored. Full option semantics:
330
- [Configuration](https://cdn.help.ai/sdk/js/elements/1.9.0/docs/configuration.md).
330
+ [Configuration](https://cdn.help.ai/sdk/js/elements/1.11.0/docs/configuration.md).
331
331
 
332
332
  > Explicit scalar attributes (`data-user-id`, `data-page-area`, …) win
333
333
  > over keys in the `data-user-context` / `data-page-context` JSON. For
334
334
  > SPAs where the visitor logs in after load or navigates between pages,
335
335
  > set context dynamically with
336
- > [`instance.setUserContext(...)` / `setPageContext(...)`](https://cdn.help.ai/sdk/js/elements/1.9.0/docs/configuration.md#setting-context-after-login--on-navigation).
336
+ > [`instance.setUserContext(...)` / `setPageContext(...)`](https://cdn.help.ai/sdk/js/elements/1.11.0/docs/configuration.md#setting-context-after-login--on-navigation).
337
337
  > The `data-user-*` / `data-page-*` attributes are reactive — updating
338
338
  > one re-handshakes with the same anonymous visitor/conversation. This
339
339
  > context is informational for the AI, never an auth credential.
@@ -436,7 +436,7 @@ arrays or objects to it before the bundle arrives:
436
436
  </script>
437
437
  ```
438
438
 
439
- Full details: [Events & hooks](https://cdn.help.ai/sdk/js/elements/1.9.0/docs/events-and-hooks.md#global-lifecycle-hooks).
439
+ Full details: [Events & hooks](https://cdn.help.ai/sdk/js/elements/1.11.0/docs/events-and-hooks.md#global-lifecycle-hooks).
440
440
 
441
441
  ### After boot
442
442
 
@@ -458,7 +458,7 @@ window.HelpAI.brand // { id, displayName, cdnUrl, ... }
458
458
  ## Path C — NPM package
459
459
 
460
460
  For sites with a bundler. Full framework-specific walkthroughs:
461
- [Framework integrations](https://cdn.help.ai/sdk/js/elements/1.9.0/docs/frameworks.md).
461
+ [Framework integrations](https://cdn.help.ai/sdk/js/elements/1.11.0/docs/frameworks.md).
462
462
 
463
463
  ### Install
464
464
 
@@ -650,7 +650,7 @@ declare module 'react' {
650
650
 
651
651
  **Angular** — add `CUSTOM_ELEMENTS_SCHEMA` to your module.
652
652
 
653
- Framework-by-framework details: [Framework integrations](https://cdn.help.ai/sdk/js/elements/1.9.0/docs/frameworks.md).
653
+ Framework-by-framework details: [Framework integrations](https://cdn.help.ai/sdk/js/elements/1.11.0/docs/frameworks.md).
654
654
 
655
655
  ---
656
656
 
@@ -858,14 +858,14 @@ weigh chunking (see [Caching, versioning & self-hosting](#caching-versioning--se
858
858
 
859
859
  ## Next
860
860
 
861
- - [Configuration](https://cdn.help.ai/sdk/js/elements/1.9.0/docs/configuration.md) — every option explained with examples.
862
- - [Theming & customization](https://cdn.help.ai/sdk/js/elements/1.9.0/docs/theming.md) — matching your brand.
863
- - [Framework integrations](https://cdn.help.ai/sdk/js/elements/1.9.0/docs/frameworks.md) — framework-specific recipes.
864
- - [Troubleshooting](https://cdn.help.ai/sdk/js/elements/1.9.0/docs/troubleshooting.md) — "my widget isn't showing up".
861
+ - [Configuration](https://cdn.help.ai/sdk/js/elements/1.11.0/docs/configuration.md) — every option explained with examples.
862
+ - [Theming & customization](https://cdn.help.ai/sdk/js/elements/1.11.0/docs/theming.md) — matching your brand.
863
+ - [Framework integrations](https://cdn.help.ai/sdk/js/elements/1.11.0/docs/frameworks.md) — framework-specific recipes.
864
+ - [Troubleshooting](https://cdn.help.ai/sdk/js/elements/1.11.0/docs/troubleshooting.md) — "my widget isn't showing up".
865
865
 
866
866
  ---
867
867
 
868
- <!-- https://cdn.help.ai/sdk/js/elements/1.9.0/docs/frameworks.md -->
868
+ <!-- https://cdn.help.ai/sdk/js/elements/1.11.0/docs/frameworks.md -->
869
869
 
870
870
  # Framework integrations
871
871
 
@@ -954,18 +954,24 @@ function PricingHelp() {
954
954
  }
955
955
  ```
956
956
 
957
- - **`<HelpAI {...options} />`** takes every [widget option](https://cdn.help.ai/sdk/js/elements/1.9.0/docs/configuration.md) as a prop; `aiAgentDeploymentId` is
957
+ - **`<HelpAI {...options} />`** takes every [widget option](https://cdn.help.ai/sdk/js/elements/1.11.0/docs/configuration.md) as a prop; `aiAgentDeploymentId` is
958
958
  required. It renders nothing itself: the widget mounts once the page is in the browser, a prop change re-configures
959
959
  the live widget without a remount, and unmounting removes it. Callback props (`onOpen`, `onMessage`, …) can be new
960
960
  functions on every render; the widget always calls the latest one.
961
- - **`useHelpAI(widgetId?)`** returns `{ state, ask, open, close, reset }`. `state` is
962
- [`{ open, ready, unread, conversationId? }`](https://cdn.help.ai/sdk/js/elements/1.9.0/docs/api-reference.md#state-and-ready) and re-renders the component when it changes;
961
+ - **`useHelpAI(widgetId?)`** returns `{ state, ask, open, close, reset, track }`. `state` is
962
+ [`{ open, ready, unread, conversationId? }`](https://cdn.help.ai/sdk/js/elements/1.11.0/docs/api-reference.md#state-and-ready) and re-renders the component when it changes;
963
963
  the server render sees the initial state. The commands are stable across renders and do nothing until the widget
964
964
  has mounted (`state.ready`). `ask(text)` fills the composer; `ask(text, { send: true })` sends it. Call `reset()`
965
965
  when your user logs out.
966
966
  - **One import path.** The kit carries the whole widget API (`getInstance`, `hook`, the types), so import everything
967
967
  from `@helpai/elements/react`; the package's other entries are separate copies with their own widgets.
968
968
  - **Two widgets** on one page: give each `<HelpAI widgetId='support' … />` and read it with `useHelpAI('support')`.
969
+ - **Page tools:** `useHelpAITool(tool)` gives the agent a tool while the component is mounted, or pass
970
+ `<HelpAI tools={[...]} />` ([Page tools](https://cdn.help.ai/sdk/js/elements/1.11.0/docs/page-tools.md)). `execute` can be a new function on every render; the
971
+ agent's call runs the latest one, and only a changed definition registers or configures anything again.
972
+ - **Signed-in users:** pass `userToken`, a function that fetches the token your server signs
973
+ ([Verified users](https://cdn.help.ai/sdk/js/elements/1.11.0/docs/security-privacy.md#verified-users-usertoken)). Keep it stable for one user (a module function, or
974
+ `useCallback` keyed on your user id): a different function signs in afresh, and dropping it signs out.
969
975
 
970
976
  The kit bundles the widget and imports only React from your app, so you don't need Preact installed.
971
977
 
@@ -987,7 +993,7 @@ function Chat() {
987
993
  `import type {} from '@helpai/elements/jsx/react';` once (in your entry file or a `.d.ts`) registers `<web-ai-chat>`
988
994
  in React 19's JSX: every attribute the element reads autocompletes, `ai-agent-deployment-id` is required, and a `ref`
989
995
  is the typed element with `ask`, `open`, `state`, `ready` and `reset`. Vue and Svelte have `@helpai/elements/jsx/vue`
990
- and `@helpai/elements/jsx/svelte` ([JSX typings](https://cdn.help.ai/sdk/js/elements/1.9.0/docs/api-reference.md#jsx-typings)).
996
+ and `@helpai/elements/jsx/svelte` ([JSX typings](https://cdn.help.ai/sdk/js/elements/1.11.0/docs/api-reference.md#jsx-typings)).
991
997
 
992
998
  ```tsx
993
999
  import { useRef } from 'react';
@@ -1496,21 +1502,21 @@ sometimes mounts duplicate instances. Always pair your `useEffect` /
1496
1502
 
1497
1503
  **CSP blocks the widget** — the widget inlines styles inside a shadow
1498
1504
  root (requires `style-src 'unsafe-inline'` or a nonce pattern). See
1499
- [Security & privacy § CSP](https://cdn.help.ai/sdk/js/elements/1.9.0/docs/security-privacy.md#content-security-policy).
1505
+ [Security & privacy § CSP](https://cdn.help.ai/sdk/js/elements/1.11.0/docs/security-privacy.md#content-security-policy).
1500
1506
 
1501
- More: [Troubleshooting](https://cdn.help.ai/sdk/js/elements/1.9.0/docs/troubleshooting.md).
1507
+ More: [Troubleshooting](https://cdn.help.ai/sdk/js/elements/1.11.0/docs/troubleshooting.md).
1502
1508
 
1503
1509
  ---
1504
1510
 
1505
1511
  ## Next
1506
1512
 
1507
- - [Recipes](https://cdn.help.ai/sdk/js/elements/1.9.0/docs/recipes.md) — programmatic control patterns.
1508
- - [Events & hooks](https://cdn.help.ai/sdk/js/elements/1.9.0/docs/events-and-hooks.md) — analytics integration.
1509
- - [Configuration](https://cdn.help.ai/sdk/js/elements/1.9.0/docs/configuration.md) — every option in detail.
1513
+ - [Recipes](https://cdn.help.ai/sdk/js/elements/1.11.0/docs/recipes.md) — programmatic control patterns.
1514
+ - [Events & hooks](https://cdn.help.ai/sdk/js/elements/1.11.0/docs/events-and-hooks.md) — analytics integration.
1515
+ - [Configuration](https://cdn.help.ai/sdk/js/elements/1.11.0/docs/configuration.md) — every option in detail.
1510
1516
 
1511
1517
  ---
1512
1518
 
1513
- <!-- https://cdn.help.ai/sdk/js/elements/1.9.0/docs/configuration.md -->
1519
+ <!-- https://cdn.help.ai/sdk/js/elements/1.11.0/docs/configuration.md -->
1514
1520
 
1515
1521
  # Configuration reference
1516
1522
 
@@ -1518,7 +1524,7 @@ Every option you can pass to `init(...)` / `mount(...)` / set via
1518
1524
  `data-*` attributes / set via web-component attributes.
1519
1525
 
1520
1526
  Group-by-group walkthrough with realistic examples. For an at-a-glance
1521
- lookup, see [API reference](https://cdn.help.ai/sdk/js/elements/1.9.0/docs/api-reference.md).
1527
+ lookup, see [API reference](https://cdn.help.ai/sdk/js/elements/1.11.0/docs/api-reference.md).
1522
1528
 
1523
1529
  ---
1524
1530
 
@@ -1603,7 +1609,7 @@ init({ widgetId: 'support', publicKey: SUPPORT_KEY, aiAgentDeploymentId: SUPPORT
1603
1609
  init({ widgetId: 'sales', publicKey: SALES_KEY, aiAgentDeploymentId: SALES_DEPLOYMENT_ID });
1604
1610
  ```
1605
1611
 
1606
- See [Recipes § Multiple widgets](https://cdn.help.ai/sdk/js/elements/1.9.0/docs/recipes.md#multiple-widgets-on-one-page).
1612
+ See [Recipes § Multiple widgets](https://cdn.help.ai/sdk/js/elements/1.11.0/docs/recipes.md#multiple-widgets-on-one-page).
1607
1613
 
1608
1614
  ### `baseUrl`
1609
1615
 
@@ -1616,6 +1622,37 @@ Override if you use:
1616
1622
  - A custom domain (`your-company.com`).
1617
1623
  - A local dev backend.
1618
1624
 
1625
+ ### `userToken`
1626
+
1627
+ `string | () => string | Promise<string>` · default: none (anonymous)
1628
+
1629
+ Signs the visitor in as your logged-in user: a JWT your server signs with the deployment's secret key, or a function
1630
+ returning a fresh one. Their conversations then follow them to any device, and the AI gets their name and email as
1631
+ verified facts. Runtime-only: not an attribute or `data-*` option, so the token stays out of the page's markup. See
1632
+ [Security → Verified users](https://cdn.help.ai/sdk/js/elements/1.11.0/docs/security-privacy.md#verified-users-usertoken) for signing it.
1633
+
1634
+ ```ts
1635
+ init({ publicKey: 'agent_pk_...', aiAgentDeploymentId: '01900000-0000-7000-8000-000000000000', userToken: () => fetch('/api/help-ai-token').then((res) => res.text()) });
1636
+ ```
1637
+
1638
+ ### `tools`
1639
+
1640
+ `ModelContextTool[]` · default: none
1641
+
1642
+ Tools the AI agent can use on your page, in the WebMCP tool shape: a name, a description, a JSON Schema of its input
1643
+ and an `execute` function the widget runs in the visitor's browser when the agent calls it
1644
+ (`annotations: { consequentialHint: true }` asks the visitor first). Runtime-only, like `userToken`;
1645
+ `chat.update({ tools })` replaces them. `chat.registerTool(tool)` adds one for every widget on the page instead. Full
1646
+ guide: [Page tools](https://cdn.help.ai/sdk/js/elements/1.11.0/docs/page-tools.md).
1647
+
1648
+ ```ts
1649
+ init({
1650
+ publicKey: 'agent_pk_...',
1651
+ aiAgentDeploymentId: '01900000-0000-7000-8000-000000000000',
1652
+ tools: [{ name: 'open_booking', description: 'Open the booking form. Use it whenever the visitor wants to book a call.', execute: () => (bookingForm.open(), { opened: true }) }],
1653
+ });
1654
+ ```
1655
+
1619
1656
  ### `userContext`
1620
1657
 
1621
1658
  `object | undefined`
@@ -1735,8 +1772,8 @@ widget.clearUserContext();
1735
1772
  ```
1736
1773
 
1737
1774
  You can also seed context at load time via `data-user-*` /
1738
- `data-page-*` tag attributes — see [Installation](https://cdn.help.ai/sdk/js/elements/1.9.0/docs/installation.md) and
1739
- the framework recipes in [`frameworks.md`](https://cdn.help.ai/sdk/js/elements/1.9.0/docs/frameworks.md).
1775
+ `data-page-*` tag attributes — see [Installation](https://cdn.help.ai/sdk/js/elements/1.11.0/docs/installation.md) and
1776
+ the framework recipes in [`frameworks.md`](https://cdn.help.ai/sdk/js/elements/1.11.0/docs/frameworks.md).
1740
1777
 
1741
1778
  ---
1742
1779
 
@@ -1791,7 +1828,7 @@ init({ presentation: { mode: 'floating', iframe: true }, publicKey: 'agent_pk_..
1791
1828
  ```
1792
1829
 
1793
1830
  Composes with any `mode`. Default is `false` — shadow DOM alone is
1794
- enough for 95% of deployments. [Security § Iframe isolation](https://cdn.help.ai/sdk/js/elements/1.9.0/docs/security-privacy.md#iframe-isolation).
1831
+ enough for 95% of deployments. [Security § Iframe isolation](https://cdn.help.ai/sdk/js/elements/1.11.0/docs/security-privacy.md#iframe-isolation).
1795
1832
 
1796
1833
  ### `presentation.position`
1797
1834
 
@@ -1856,7 +1893,7 @@ mode via the header picker regardless of palette overrides.
1856
1893
  End users can flip the theme via the header picker. Their choice is
1857
1894
  persisted per device + synced cross-device.
1858
1895
 
1859
- Full customization guide: [Theming](https://cdn.help.ai/sdk/js/elements/1.9.0/docs/theming.md).
1896
+ Full customization guide: [Theming](https://cdn.help.ai/sdk/js/elements/1.11.0/docs/theming.md).
1860
1897
 
1861
1898
  ---
1862
1899
 
@@ -1956,7 +1993,7 @@ init({
1956
1993
  ```
1957
1994
 
1958
1995
  Variants + callout fully explained in
1959
- [Theming § Launcher](https://cdn.help.ai/sdk/js/elements/1.9.0/docs/theming.md#launcher).
1996
+ [Theming § Launcher](https://cdn.help.ai/sdk/js/elements/1.11.0/docs/theming.md#launcher).
1960
1997
 
1961
1998
  ### `launcher.hidden`
1962
1999
 
@@ -2195,7 +2232,7 @@ Full behavior + wire contract:
2195
2232
  `boolean` · default: `false`
2196
2233
 
2197
2234
  Turn OFF the 👍/👎 feedback controls under each rateable reply (AI or operator) — unset/`false` shows them (default). While
2198
- shown, a choice fires the [`messageFeedback`](https://cdn.help.ai/sdk/js/elements/1.9.0/docs/events-and-hooks.md) event and is sent to the backend.
2235
+ shown, a choice fires the [`messageFeedback`](https://cdn.help.ai/sdk/js/elements/1.11.0/docs/events-and-hooks.md) event and is sent to the backend.
2199
2236
 
2200
2237
  ```ts
2201
2238
  init({ behavior: { disableMessageFeedback: true } }); // hide the controls
@@ -2284,7 +2321,7 @@ init({
2284
2321
  });
2285
2322
  ```
2286
2323
 
2287
- Full key list: [i18n](https://cdn.help.ai/sdk/js/elements/1.9.0/docs/theming.md#internationalization) or
2324
+ Full key list: [i18n](https://cdn.help.ai/sdk/js/elements/1.11.0/docs/theming.md#internationalization) or
2288
2325
  `src/i18n/strings.ts` in the source.
2289
2326
 
2290
2327
  ---
@@ -2367,7 +2404,7 @@ init({
2367
2404
  });
2368
2405
  ```
2369
2406
 
2370
- For richer event handling, see [Events & hooks](https://cdn.help.ai/sdk/js/elements/1.9.0/docs/events-and-hooks.md).
2407
+ For richer event handling, see [Events & hooks](https://cdn.help.ai/sdk/js/elements/1.11.0/docs/events-and-hooks.md).
2371
2408
 
2372
2409
  ---
2373
2410
 
@@ -2403,7 +2440,7 @@ The widget itself does not include drafts in Help AI network requests before
2403
2440
  Send. Use an encrypted adapter when same-origin plaintext storage is not
2404
2441
  acceptable; an in-memory adapter disables reload restoration.
2405
2442
 
2406
- Full adapter contract: [Security & privacy § custom storage](https://cdn.help.ai/sdk/js/elements/1.9.0/docs/security-privacy.md#custom-storage).
2443
+ Full adapter contract: [Security & privacy § custom storage](https://cdn.help.ai/sdk/js/elements/1.11.0/docs/security-privacy.md#custom-storage).
2407
2444
 
2408
2445
  ---
2409
2446
 
@@ -2509,14 +2546,14 @@ const chat = init({
2509
2546
 
2510
2547
  ## Not covered here
2511
2548
 
2512
- - **Events** → [Events & hooks](https://cdn.help.ai/sdk/js/elements/1.9.0/docs/events-and-hooks.md)
2513
- - **Theming deep-dive** → [Theming](https://cdn.help.ai/sdk/js/elements/1.9.0/docs/theming.md)
2514
- - **Framework-specific wiring** → [Frameworks](https://cdn.help.ai/sdk/js/elements/1.9.0/docs/frameworks.md)
2549
+ - **Events** → [Events & hooks](https://cdn.help.ai/sdk/js/elements/1.11.0/docs/events-and-hooks.md)
2550
+ - **Theming deep-dive** → [Theming](https://cdn.help.ai/sdk/js/elements/1.11.0/docs/theming.md)
2551
+ - **Framework-specific wiring** → [Frameworks](https://cdn.help.ai/sdk/js/elements/1.11.0/docs/frameworks.md)
2515
2552
  - **Backend API** → Backend contract (internal)
2516
2553
 
2517
2554
  ---
2518
2555
 
2519
- <!-- https://cdn.help.ai/sdk/js/elements/1.9.0/docs/options.md -->
2556
+ <!-- https://cdn.help.ai/sdk/js/elements/1.11.0/docs/options.md -->
2520
2557
 
2521
2558
  # Configuration — `ChatWidgetOptions`
2522
2559
 
@@ -2844,13 +2881,13 @@ Pass `footer: { poweredBy: { text: "" } }` to opt out of the brand attribution.
2844
2881
 
2845
2882
  ---
2846
2883
 
2847
- <!-- https://cdn.help.ai/sdk/js/elements/1.9.0/docs/api-reference.md -->
2884
+ <!-- https://cdn.help.ai/sdk/js/elements/1.11.0/docs/api-reference.md -->
2848
2885
 
2849
2886
  # API reference
2850
2887
 
2851
2888
  Compact lookup for the SDK's exported functions, types, and events.
2852
- For explanations + examples, see the [Configuration](https://cdn.help.ai/sdk/js/elements/1.9.0/docs/configuration.md)
2853
- and [Events & hooks](https://cdn.help.ai/sdk/js/elements/1.9.0/docs/events-and-hooks.md) guides.
2889
+ For explanations + examples, see the [Configuration](https://cdn.help.ai/sdk/js/elements/1.11.0/docs/configuration.md)
2890
+ and [Events & hooks](https://cdn.help.ai/sdk/js/elements/1.11.0/docs/events-and-hooks.md) guides.
2854
2891
 
2855
2892
  ---
2856
2893
 
@@ -2894,13 +2931,14 @@ React kit (React 18+; everything above plus the component and the hook, so impor
2894
2931
  ```ts
2895
2932
  import {
2896
2933
  HelpAI, // <HelpAI {...options} /> mounts the widget, re-configures it on prop changes, removes it on unmount
2897
- useHelpAI, // useHelpAI(widgetId?) → { state, ask, open, close, reset }, re-rendering on state changes
2934
+ useHelpAI, // useHelpAI(widgetId?) → { state, ask, open, close, reset, track }, re-rendering on state changes
2935
+ useHelpAITool, // useHelpAITool(tool) gives the agent a page tool while the component is mounted
2898
2936
  type HelpAIProps,
2899
2937
  type HelpAIControls,
2900
2938
  } from '@helpai/elements/react';
2901
2939
  ```
2902
2940
 
2903
- See [Frameworks → React](https://cdn.help.ai/sdk/js/elements/1.9.0/docs/frameworks.md#react).
2941
+ See [Frameworks → React](https://cdn.help.ai/sdk/js/elements/1.11.0/docs/frameworks.md#react).
2904
2942
 
2905
2943
  ---
2906
2944
 
@@ -2987,13 +3025,16 @@ interface ChatWidgetInstance {
2987
3025
 
2988
3026
  // Lifecycle
2989
3027
  reset(): void; // start over as a new anonymous visitor (on logout)
3028
+ login(userToken: UserTokenSource): void; // sign the visitor in as your logged-in user (a signed token, or a function returning one)
3029
+ track(name: string, data?: Record<string, string | number | boolean>): void; // report your page's own event: analytics + the agent's next message
3030
+ registerTool(tool: ModelContextTool, options?: { signal?: AbortSignal }): void; // a tool the agent can use on this page, for every widget on it
2990
3031
  destroy(): void;
2991
3032
 
2992
3033
  // Events
2993
3034
  on<E extends EventName>(name: E, fn: (payload: EventMap[E]) => void): () => void; // returns unsubscribe fn
2994
3035
 
2995
3036
  // Re-config
2996
- update(patch: Partial<ChatWidgetOptions>): void;
3037
+ update(patch: Partial<ChatWidgetOptions>): void; // e.g. update({ tools }) on a route change
2997
3038
 
2998
3039
  // Host-asserted context (informational, not auth; re-handshakes, same visitor/conversation)
2999
3040
  setUserContext(ctx: Partial<NonNullable<ChatWidgetOptions['userContext']>>): void; // merges into the current user context
@@ -3013,7 +3054,7 @@ interface ChatWidgetInstance {
3013
3054
  ## `ChatWidgetOptions`
3014
3055
 
3015
3056
  The generated, schema-backed field reference is
3016
- [`docs/api/configuration.md`](https://cdn.help.ai/sdk/js/elements/1.9.0/docs/options.md); it is authoritative.
3057
+ [`docs/api/configuration.md`](https://cdn.help.ai/sdk/js/elements/1.11.0/docs/options.md); it is authoritative.
3017
3058
  The public input keeps embed identity, context, endpoint overrides, storage,
3018
3059
  and callbacks at the top level. Serializable widget settings use focused
3019
3060
  nested sections. `mount()` and `init()` require `aiAgentDeploymentId`; the
@@ -3053,7 +3094,30 @@ init({
3053
3094
  ```
3054
3095
 
3055
3096
  The complete type also exposes `features`, `forms`, `modules`, and `tracking`.
3056
- See [Configuration](https://cdn.help.ai/sdk/js/elements/1.9.0/docs/configuration.md) for behavior and examples.
3097
+ See [Configuration](https://cdn.help.ai/sdk/js/elements/1.11.0/docs/configuration.md) for behavior and examples.
3098
+
3099
+ ### `ModelContextTool`
3100
+
3101
+ A tool the agent can use on your page, in the WebMCP tool shape ([Page tools](https://cdn.help.ai/sdk/js/elements/1.11.0/docs/page-tools.md)). On `<web-ai-chat>`
3102
+ it's the `tools` property or `registerTool()`, since functions can't be attributes.
3103
+
3104
+ ```ts
3105
+ interface ModelContextTool<TInput = unknown> {
3106
+ name: string; // letters, digits, `_` and `-` (58 at most; others become `_`); the agent sees `site__<name>`
3107
+ title?: string;
3108
+ description: string; // when to use it (1024 characters at most)
3109
+ inputSchema?: Record<string, unknown>; // JSON Schema of an object; none = no input
3110
+ annotations?: ToolAnnotations; // `consequentialHint: true` = the visitor approves each call first
3111
+ execute(input: TInput, options: { signal: AbortSignal }): unknown; // a JSON result, or throw; `signal` aborts when the visitor moves on
3112
+ }
3113
+
3114
+ interface ToolAnnotations {
3115
+ readOnlyHint?: boolean;
3116
+ untrustedContentHint?: boolean;
3117
+ consequentialHint?: boolean;
3118
+ debugging?: boolean;
3119
+ }
3120
+ ```
3057
3121
 
3058
3122
  ### `ActionName`
3059
3123
 
@@ -3180,6 +3244,46 @@ visitor, their current conversation (draft and queued messages included), prefer
3180
3244
  `setUserContext`, then reconnects as a first visit. Listeners added with `on()` stay, and the handle keeps working.
3181
3245
  On `<web-ai-chat>`, also remove a `user-context` attribute you set.
3182
3246
 
3247
+ ### `login(userToken)`
3248
+
3249
+ Signs the visitor in as your logged-in user. `userToken` is a JWT your server signs with the deployment's secret key,
3250
+ or a function returning a fresh one (called again when the server rejects the current token as expired). The widget
3251
+ reconnects as that user: their conversations on this browser move to them, and they reach their conversations on any
3252
+ device where they're signed in. Call `reset()` when they sign out; switching to another user's token starts over the
3253
+ same way. Also `HelpAI('login', userToken)`, `element.login(userToken)` on `<web-ai-chat>` (not an attribute, so the
3254
+ token stays out of the DOM), the `userToken` option at `init()`, and `<HelpAI userToken={…} />`. Signing and the
3255
+ guarantees: [Security → Verified users](https://cdn.help.ai/sdk/js/elements/1.11.0/docs/security-privacy.md#verified-users-usertoken).
3256
+
3257
+ ```ts
3258
+ chat.login(() => fetch('/api/help-ai-token').then((res) => res.text()));
3259
+ ```
3260
+
3261
+ ---
3262
+
3263
+ ### `registerTool(tool, options?)`
3264
+
3265
+ Gives the agent a tool on this page, for every widget on it: the latest registration of a name wins, and aborting
3266
+ `options.signal` removes it. Also `HelpAI('registerTool', tool)` (queued before the script loads),
3267
+ `element.registerTool(tool)` and the React kit's `useHelpAITool(tool)`. Details: [Page tools](https://cdn.help.ai/sdk/js/elements/1.11.0/docs/page-tools.md).
3268
+
3269
+ ```ts
3270
+ chat.registerTool({ name: 'open_booking', description: 'Open the booking form. Use it whenever the visitor wants to book a call.', execute: () => bookingForm.open() });
3271
+ ```
3272
+
3273
+ ---
3274
+
3275
+ ### `track(name, data?)`
3276
+
3277
+ Reports something the visitor did on your site, outside the chat. It sends a `hostEvent` hit to Elements analytics
3278
+ (not when tracking is off), and the widget keeps the last 10 for the agent, which reads them with the visitor's next
3279
+ message. The name is 1–64 characters; the data is flat (strings, numbers, booleans; 256 characters of JSON at most).
3280
+ Also `HelpAI('track', name, data)`, `element.track(name, data)` and `useHelpAI().track`. Details:
3281
+ [Analytics → Your own events](https://cdn.help.ai/sdk/js/elements/1.11.0/docs/analytics.md#your-own-events-chattrack).
3282
+
3283
+ ```ts
3284
+ chat.track('plan_viewed', { plan: 'pro' });
3285
+ ```
3286
+
3183
3287
  ---
3184
3288
 
3185
3289
  ## Events
@@ -3257,7 +3361,7 @@ The auto-boot parser exposes the documented flat `data-*` subset.
3257
3361
  ></script>
3258
3362
  ```
3259
3363
 
3260
- Full attribute list: [Installation § script data attributes](https://cdn.help.ai/sdk/js/elements/1.9.0/docs/installation.md#attributes).
3364
+ Full attribute list: [Installation § script data attributes](https://cdn.help.ai/sdk/js/elements/1.11.0/docs/installation.md#attributes).
3261
3365
 
3262
3366
  `data-no-autoboot` — loads the bundle but doesn't auto-mount. For
3263
3367
  deferred init via JS.
@@ -3464,14 +3568,14 @@ Or use `/v1/` for the latest 1.x.x (auto-patches, no major breaks).
3464
3568
 
3465
3569
  ## See also
3466
3570
 
3467
- - [Configuration](https://cdn.help.ai/sdk/js/elements/1.9.0/docs/configuration.md) — options with examples + context.
3468
- - [Events & hooks](https://cdn.help.ai/sdk/js/elements/1.9.0/docs/events-and-hooks.md) — event handling deep-dive.
3469
- - [Recipes](https://cdn.help.ai/sdk/js/elements/1.9.0/docs/recipes.md) — copy-paste scenarios.
3470
- - [Troubleshooting](https://cdn.help.ai/sdk/js/elements/1.9.0/docs/troubleshooting.md) — when things go wrong.
3571
+ - [Configuration](https://cdn.help.ai/sdk/js/elements/1.11.0/docs/configuration.md) — options with examples + context.
3572
+ - [Events & hooks](https://cdn.help.ai/sdk/js/elements/1.11.0/docs/events-and-hooks.md) — event handling deep-dive.
3573
+ - [Recipes](https://cdn.help.ai/sdk/js/elements/1.11.0/docs/recipes.md) — copy-paste scenarios.
3574
+ - [Troubleshooting](https://cdn.help.ai/sdk/js/elements/1.11.0/docs/troubleshooting.md) — when things go wrong.
3471
3575
 
3472
3576
  ---
3473
3577
 
3474
- <!-- https://cdn.help.ai/sdk/js/elements/1.9.0/docs/events-and-hooks.md -->
3578
+ <!-- https://cdn.help.ai/sdk/js/elements/1.11.0/docs/events-and-hooks.md -->
3475
3579
 
3476
3580
  # Events & lifecycle hooks
3477
3581
 
@@ -3493,17 +3597,19 @@ Both deliver the same event stream. Both are safe to mix.
3493
3597
 
3494
3598
  ## Available events
3495
3599
 
3496
- | Event | Fires on | Payload |
3497
- | ----------------- | ------------------------------------------------- | ------------------------------------------------------ |
3498
- | `open` | Panel opens (floating mode) | `void` |
3499
- | `close` | Panel closes | `void` |
3500
- | `message` | User sends a message + assistant finishes a reply | `{ role: "user" \| "assistant"; text: string }` |
3501
- | `error` | Transport error or mid-stream error | `unknown` (error object or message) |
3502
- | `expand` | Expanded tier toggled (⤢) | `boolean` (new state) |
3503
- | `fullscreen` | Fullscreen tier toggled (⛶) | `boolean` (new state) |
3504
- | `handshake` | Widget finishes booting (once per mount) | `HandshakeResponse` (dashboard config) |
3505
- | `localeChange` | User picks a different language | `string` (new BCP-47 tag) |
3506
- | `messageFeedback` | User rates a reply 👍/👎 (or clears it) | `{ messageId: string; value: "up" \| "down" \| null }` |
3600
+ | Event | Fires on | Payload |
3601
+ | ----------------- | ----------------------------------------------------------------------------------- | ------------------------------------------------------------------------------------------------------------------------------------------ |
3602
+ | `open` | Panel opens (floating mode) | `void` |
3603
+ | `close` | Panel closes | `void` |
3604
+ | `message` | User sends a message + assistant finishes a reply | `{ role: "user" \| "assistant"; text: string }` |
3605
+ | `error` | Transport error or mid-stream error | `unknown` (error object or message) |
3606
+ | `expand` | Expanded tier toggled (⤢) | `boolean` (new state) |
3607
+ | `fullscreen` | Fullscreen tier toggled (⛶) | `boolean` (new state) |
3608
+ | `handshake` | Widget finishes booting (once per mount) | `HandshakeResponse` (dashboard config) |
3609
+ | `localeChange` | User picks a different language | `string` (new BCP-47 tag) |
3610
+ | `messageFeedback` | User rates a reply 👍/👎 (or clears it) | `{ messageId: string; value: "up" \| "down" \| null }` |
3611
+ | `hostEvent` | Your page calls `chat.track(name, data)` | `{ name: string; data?: Record<string, scalar> }` |
3612
+ | `toolResult` | A [page tool](https://cdn.help.ai/sdk/js/elements/1.11.0/docs/page-tools.md) call settles, or the visitor answers a question card | `{ toolCallId: string; name?: string; status?: "completed" \| "failed" \| "declined" \| "stopped" \| "interrupted"; durationMs?: number }` |
3507
3613
 
3508
3614
  ---
3509
3615
 
@@ -3945,21 +4051,220 @@ explicit `off()` is belt-and-suspenders. Either way works.
3945
4051
  | No events at all | `.on()` called before the instance was fully constructed. Use `init()`'s return value or a pre-boot hook |
3946
4052
  | Pre-boot hook never fires | Widget never mounted — check the public-key/deployment-id pair |
3947
4053
 
3948
- [Troubleshooting](https://cdn.help.ai/sdk/js/elements/1.9.0/docs/troubleshooting.md) has the full diagnostic
4054
+ [Troubleshooting](https://cdn.help.ai/sdk/js/elements/1.11.0/docs/troubleshooting.md) has the full diagnostic
3949
4055
  checklist.
3950
4056
 
3951
4057
  ---
3952
4058
 
3953
4059
  ## Next
3954
4060
 
3955
- - [Analytics integration](https://cdn.help.ai/sdk/js/elements/1.9.0/docs/analytics.md) — GA4, Mixpanel, Segment, Amplitude, PostHog, Sentry, multi-provider
3956
- - [Recipes](https://cdn.help.ai/sdk/js/elements/1.9.0/docs/recipes.md) — copy-paste scenarios
3957
- - [API reference § events](https://cdn.help.ai/sdk/js/elements/1.9.0/docs/api-reference.md#events) — compact lookup
3958
- - [Configuration § callbacks](https://cdn.help.ai/sdk/js/elements/1.9.0/docs/configuration.md#callbacks-shortcut-for-events)
4061
+ - [Analytics integration](https://cdn.help.ai/sdk/js/elements/1.11.0/docs/analytics.md) — GA4, Mixpanel, Segment, Amplitude, PostHog, Sentry, multi-provider
4062
+ - [Recipes](https://cdn.help.ai/sdk/js/elements/1.11.0/docs/recipes.md) — copy-paste scenarios
4063
+ - [API reference § events](https://cdn.help.ai/sdk/js/elements/1.11.0/docs/api-reference.md#events) — compact lookup
4064
+ - [Configuration § callbacks](https://cdn.help.ai/sdk/js/elements/1.11.0/docs/configuration.md#callbacks-shortcut-for-events)
4065
+
4066
+ ---
4067
+
4068
+ <!-- https://cdn.help.ai/sdk/js/elements/1.11.0/docs/page-tools.md -->
4069
+
4070
+ # Page tools
4071
+
4072
+ Give the AI agent tools that act on your own page: open your booking form, read the visitor's cart, jump to a
4073
+ section, fill in a form. You describe each tool and write its function; the agent decides when to call it, the
4074
+ widget runs the function in the visitor's browser, and the agent continues the conversation with what it returned.
4075
+ Every page can offer different tools, so the agent can do on each page what that page is for.
4076
+
4077
+ A tool has the [WebMCP](https://webmachinelearning.github.io/webmcp/) shape (the W3C draft for tools a web page
4078
+ offers to AI agents), so a tool you write for the widget also works with a browser's own WebMCP support, and the
4079
+ other way round.
4080
+
4081
+ ```ts
4082
+ chat.registerTool({
4083
+ name: 'open_booking',
4084
+ description: 'Open the booking form on this page for a meeting type. Use it whenever the visitor wants to book a call.',
4085
+ inputSchema: {
4086
+ type: 'object',
4087
+ properties: { meetingType: { type: 'string', enum: ['sales', 'support'] } },
4088
+ required: ['meetingType'],
4089
+ },
4090
+ execute({ meetingType }) {
4091
+ bookingForm.open(meetingType);
4092
+ return { opened: true };
4093
+ },
4094
+ });
4095
+ ```
4096
+
4097
+ A visitor writes "I'd like to talk to sales"; the agent calls `open_booking` with `{ meetingType: 'sales' }`, your
4098
+ booking form opens, and the agent answers "The booking form is open, pick a time that suits you."
4099
+
4100
+ ## Adding tools
4101
+
4102
+ | Where you are | How |
4103
+ | ---------------- | ---------------------------------------------------------------------------------------------------------------------------- |
4104
+ | Script tag | `HelpAI('registerTool', tool)`. Works before the widget has loaded: the loader queues it. |
4105
+ | npm | `chat.registerTool(tool, { signal })`, or `init({ tools: [...] })`. |
4106
+ | React | `useHelpAITool(tool)` in the component that owns the feature, or `<HelpAI tools={[...]} />`. |
4107
+ | `<web-ai-chat>` | `element.registerTool(tool)`, or the `tools` property (functions can't be attributes). |
4108
+ | Plain HTML | A form with `toolname` and `tooldescription` attributes ([Forms as tools](#forms-as-tools)); no script needed. |
4109
+ | A WebMCP browser | Tools registered with the browser's own `document.modelContext.registerTool()` are offered too ([WebMCP](#webmcp-browsers)). |
4110
+
4111
+ `registerTool` adds the tool for every widget on the page. Pass an `AbortSignal` to remove it again, for example when
4112
+ a single-page app leaves the route that owns it:
4113
+
4114
+ ```ts
4115
+ const route = new AbortController();
4116
+ chat.registerTool(addToCart, { signal: route.signal });
4117
+ // …when the visitor leaves the product page:
4118
+ route.abort();
4119
+ ```
4120
+
4121
+ `useHelpAITool` does this for you: the tool is registered while the component is mounted, `execute` always runs the
4122
+ latest render's function, and React's StrictMode double mount still leaves one registration.
4123
+
4124
+ ## A tool
4125
+
4126
+ | Field | What it is |
4127
+ | ------------------------------- | ------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------ |
4128
+ | `name` | Letters, digits, `_` and `-`, 58 characters at most; other characters become `_`. The agent sees `site__<name>`. A name registered again replaces the earlier tool. |
4129
+ | `description` | When the agent should use it and what it does, 1024 characters at most. The agent picks tools by their descriptions: say when, not only what. Without one, `title` (then `name`) is used. |
4130
+ | `title` | Optional. A short human name. |
4131
+ | `inputSchema` | Optional. [JSON Schema](https://json-schema.org/) of the input, an object. The agent fills it in; use `enum` and `required` to keep the input exact. Without one, the tool takes no input. |
4132
+ | `annotations.consequentialHint` | Optional. `true` for a tool with real consequences (an order, a booking, a message to someone): the visitor approves each call in the chat first, and the function runs only on Approve. |
4133
+ | `execute` | `(input, { signal }) => result`. Return a value or a promise of one; throw to report a failure. `signal` aborts when the visitor moves on before the call finishes. |
4134
+
4135
+ The `ModelContextTool` and `ToolAnnotations` types are exported for TypeScript; `ModelContextTool<{ sku: string }>`
4136
+ types `execute`'s input. WebMCP's other annotations (`readOnlyHint`, `untrustedContentHint`) are accepted and not used
4137
+ yet.
4138
+
4139
+ Nothing about a tool can break the chat: a tool without a `name` or an `execute` function is left out with a warning
4140
+ in the browser console, and every message still goes through.
4141
+
4142
+ ## Forms as tools
4143
+
4144
+ A form becomes a tool with two attributes, in every browser:
4145
+
4146
+ ```html
4147
+ <form toolname="request_demo" tooldescription="Request a product demo for the visitor." toolautosubmit>
4148
+ <label for="email">Work email</label>
4149
+ <input id="email" name="email" type="email" required />
4150
+ <input name="company" toolparamdescription="The visitor's company name" />
4151
+ <select name="plan">
4152
+ <option value="starter">Starter</option>
4153
+ <option value="pro">Pro</option>
4154
+ </select>
4155
+ <button>Request demo</button>
4156
+ </form>
4157
+ ```
4158
+
4159
+ - Each named field is an input the agent can fill: a `select` or radio group takes one of its values, a checkbox
4160
+ `true` or `false`, a number field a number, anything else text. Hidden, disabled and file fields are left out, and
4161
+ so are passwords: the visitor types those, never the chat.
4162
+ - A field's description is its `toolparamdescription`, else its label, else its `aria-description`; `required`
4163
+ fields are required.
4164
+ - The agent fills the fields the way a visitor would (your framework's change handlers run). With `toolautosubmit`
4165
+ the form is then submitted; without it the visitor checks the form and presses its button. When a field still
4166
+ blocks the submit (a password, or a value the browser rejects), the form isn't submitted and the agent is told which
4167
+ field needs the visitor.
4168
+
4169
+ ## WebMCP browsers
4170
+
4171
+ In a browser with WebMCP (`document.modelContext`: in Chrome, turn on `chrome://flags/#enable-experimental-web-platform-features`
4172
+ or join the origin trial), the tools the page registered with the browser are offered to the agent too, and the widget
4173
+ runs them through the browser. A `<form toolname>` is the exception: such a browser lists it too, but the widget fills
4174
+ it itself, as in every other browser, so your form's own submit handler keeps working and passwords stay the
4175
+ visitor's. Elsewhere, nothing changes.
4176
+
4177
+ ## Which tools a message offers
4178
+
4179
+ The widget reads the page's tools when the visitor sends each message: the browser's WebMCP tools, then forms, then
4180
+ the `tools` option, then `registerTool`. For a name in more than one place, the later one wins. When the agent calls a
4181
+ tool, the widget reads them again and runs the current function of that name, so a single-page app's route change
4182
+ applies straight away, with nothing to keep in sync. A call to a tool the page no longer has tells the agent the page
4183
+ doesn't offer it right now. So does a call to a tool the message didn't offer at all (the agent repeating an earlier
4184
+ call after a route change): the server answers it with "This page doesn't offer that action right now.", tells the agent
4185
+ not to call it again this turn, and the agent carries on from what it knows or asks the visitor.
4186
+
4187
+ ## What the agent gets back
4188
+
4189
+ - **A return value** becomes the tool's result, as JSON: dates become strings, `undefined` becomes `null`, functions
4190
+ are dropped, a page element is named (`"[dialog]"`), a repeated object reads `"[circular]"`, and a result over
4191
+ 30,000 characters is sent as `{ truncated: true, preview }`. Return what the agent needs to answer well, such as
4192
+ `{ opened: true }` or `{ items: 2, total: '$48' }`.
4193
+ - **A thrown error** (or a rejected promise) reaches the agent as the tool's error, with its message, so it can tell
4194
+ the visitor or try another way. For an expected miss ("that product is out of stock") a normal result such as
4195
+ `{ ok: false, reason: 'out of stock' }` gives the agent more to work with.
4196
+
4197
+ With several calls in one step, the agent waits for all of them, and for any approvals, then continues once.
4198
+
4199
+ ## Each call runs once
4200
+
4201
+ - **Tabs.** Only the tab where the visitor sent the message runs the calls in its reply; another tab of the same
4202
+ conversation shows them running, then the agent's answer.
4203
+ - **Reloads and navigation.** A call that hadn't started when the page reloaded runs once after the reload. A call
4204
+ that was running is never run again: the agent is told the page reloaded, so it may or may not have taken effect,
4205
+ and checks with the visitor; its card reads "Not completed". A result that was ready but not yet sent is sent after the reload. The widget keeps
4206
+ this note per tab in `sessionStorage`, so it also covers a navigation to another page of your site.
4207
+ - **Leaving the page.** Results go out with `keepalive`, so they arrive even when the page navigates straight after.
4208
+ A tool that navigates should return first and leave after:
4209
+
4210
+ ```ts
4211
+ execute({ path }) {
4212
+ setTimeout(() => location.assign(path), 0); // navigate after the result is sent
4213
+ return { navigating: path };
4214
+ },
4215
+ ```
4216
+
4217
+ - **The script loaded twice, or two widgets.** The call still runs once.
4218
+ - **No time limit.** The agent waits for the result. While a tool runs, the chat shows Stop. If the visitor presses it,
4219
+ or sends another message first, the call's `signal` aborts, its result is never sent, and its card reads
4220
+ "Not completed". A stopped call never runs again, not even after a reload.
4221
+
4222
+ When `sessionStorage` is blocked (some private modes), the note lives in memory, so a reload can't tell a call that
4223
+ ran from one that didn't; everything else works the same.
4224
+
4225
+ ## What the visitor sees
4226
+
4227
+ A tool that runs on its own appears in the transcript only when the deployment shows tool calls
4228
+ (`behavior.showToolCalls`), with its input and result: "Running", then "Completed" or "Error" (the tool failed), or
4229
+ "Not completed" when the visitor stopped it or moved on, or a reload cut it short. A tool with `consequentialHint` always shows an approval card with the input; Reject tells
4230
+ the agent the visitor declined, and the function never runs.
4231
+
4232
+ ## Events
4233
+
4234
+ Each call this page settles fires `toolResult` with `{ toolCallId, name, status, durationMs }`: `status` is
4235
+ `completed`, `failed`, `declined` (the visitor rejected it), `stopped` (the visitor pressed Stop) or `interrupted` (a
4236
+ reload cut it short). It never carries the input or the result.
4237
+
4238
+ ```ts
4239
+ chat.on('toolResult', ({ name, status, durationMs }) => analytics.track('help_ai_tool', { name, status, durationMs }));
4240
+ ```
4241
+
4242
+ ## Security
4243
+
4244
+ - Tools run with your page's full privileges, as code you wrote. Anyone can also call your functions from the
4245
+ browser's developer tools, so a tool may do only what the visitor could do on the page themselves.
4246
+ - The agent chooses the input. Check it in `execute` as you would a form submission, and mark tools with real
4247
+ consequences (payments, deletions, messages to other people) `consequentialHint: true`, or confirm in your own UI.
4248
+ - The definitions are sent with each message and the results are stored in the conversation, like any tool's result,
4249
+ so never put secrets in a description or a result.
4250
+
4251
+ ## Testing
4252
+
4253
+ `testing/page-tools-manual.md` walks through every case above in a real browser
4254
+ on the `dev/page-tools.html` playground, with a real model or the mock backend.
4255
+
4256
+ ## Troubleshooting
4257
+
4258
+ - **The agent never uses the tool:** write the description as an instruction ("Use it whenever the visitor wants to
4259
+ book a call"), and check the console for a "skipped a tool" warning.
4260
+ - **The chat waits after a tool:** the function never settled (a promise that doesn't resolve). Return, or throw.
4261
+ - **"This page doesn't offer … right now":** the call came after the tool was removed (a route change aborted its
4262
+ signal), or the agent tried a tool this page doesn't register. Keep a tool registered while the agent may still use
4263
+ it.
3959
4264
 
3960
4265
  ---
3961
4266
 
3962
- <!-- https://cdn.help.ai/sdk/js/elements/1.9.0/docs/theming.md -->
4267
+ <!-- https://cdn.help.ai/sdk/js/elements/1.11.0/docs/theming.md -->
3963
4268
 
3964
4269
  # Theming & customization
3965
4270
 
@@ -4286,7 +4591,7 @@ init({
4286
4591
 
4287
4592
  ## Header actions
4288
4593
 
4289
- See [Configuration § Header actions](https://cdn.help.ai/sdk/js/elements/1.9.0/docs/configuration.md#header-actions)
4594
+ See [Configuration § Header actions](https://cdn.help.ai/sdk/js/elements/1.11.0/docs/configuration.md#header-actions)
4290
4595
  for the full semantics. Quick customization examples:
4291
4596
 
4292
4597
  ### Minimal chrome
@@ -4493,7 +4798,7 @@ are for what tokens don't cover (shadows, corners, borders).
4493
4798
 
4494
4799
  For truly bespoke designs (e.g., replacing the launcher with your
4495
4800
  own component), use `launcher.hidden: true` + custom trigger, or a
4496
- [no-script trigger](https://cdn.help.ai/sdk/js/elements/1.9.0/docs/api-reference.md#no-script-triggers).
4801
+ [no-script trigger](https://cdn.help.ai/sdk/js/elements/1.11.0/docs/api-reference.md#no-script-triggers).
4497
4802
 
4498
4803
  ---
4499
4804
 
@@ -4525,16 +4830,16 @@ can always override.
4525
4830
 
4526
4831
  ## Next
4527
4832
 
4528
- - [Events & hooks](https://cdn.help.ai/sdk/js/elements/1.9.0/docs/events-and-hooks.md) — listening to chat
4833
+ - [Events & hooks](https://cdn.help.ai/sdk/js/elements/1.11.0/docs/events-and-hooks.md) — listening to chat
4529
4834
  interactions, integrating with analytics.
4530
- - [Recipes](https://cdn.help.ai/sdk/js/elements/1.9.0/docs/recipes.md) — copy-paste examples for common
4835
+ - [Recipes](https://cdn.help.ai/sdk/js/elements/1.11.0/docs/recipes.md) — copy-paste examples for common
4531
4836
  customization scenarios.
4532
- - [Configuration reference](https://cdn.help.ai/sdk/js/elements/1.9.0/docs/configuration.md) — the full option
4837
+ - [Configuration reference](https://cdn.help.ai/sdk/js/elements/1.11.0/docs/configuration.md) — the full option
4533
4838
  table.
4534
4839
 
4535
4840
  ---
4536
4841
 
4537
- <!-- https://cdn.help.ai/sdk/js/elements/1.9.0/docs/recipes.md -->
4842
+ <!-- https://cdn.help.ai/sdk/js/elements/1.11.0/docs/recipes.md -->
4538
4843
 
4539
4844
  # Recipes
4540
4845
 
@@ -5258,13 +5563,13 @@ brand accent set in the dashboard.
5258
5563
 
5259
5564
  ## Next
5260
5565
 
5261
- - [Events & hooks](https://cdn.help.ai/sdk/js/elements/1.9.0/docs/events-and-hooks.md) — full event API
5262
- - [Configuration](https://cdn.help.ai/sdk/js/elements/1.9.0/docs/configuration.md) — every option
5263
- - [Troubleshooting](https://cdn.help.ai/sdk/js/elements/1.9.0/docs/troubleshooting.md) — when things go wrong
5566
+ - [Events & hooks](https://cdn.help.ai/sdk/js/elements/1.11.0/docs/events-and-hooks.md) — full event API
5567
+ - [Configuration](https://cdn.help.ai/sdk/js/elements/1.11.0/docs/configuration.md) — every option
5568
+ - [Troubleshooting](https://cdn.help.ai/sdk/js/elements/1.11.0/docs/troubleshooting.md) — when things go wrong
5264
5569
 
5265
5570
  ---
5266
5571
 
5267
- <!-- https://cdn.help.ai/sdk/js/elements/1.9.0/docs/analytics.md -->
5572
+ <!-- https://cdn.help.ai/sdk/js/elements/1.11.0/docs/analytics.md -->
5268
5573
 
5269
5574
  # Analytics integration
5270
5575
 
@@ -5320,7 +5625,7 @@ event.
5320
5625
 
5321
5626
  Every interactive action emits one event with a typed payload. Subscribe
5322
5627
  via `chat.on(name, fn)` (instance) or `HelpAI.hook(widgetId, name, fn)`
5323
- (global, pre-boot-safe). Full schema in [Events & hooks](https://cdn.help.ai/sdk/js/elements/1.9.0/docs/events-and-hooks.md).
5628
+ (global, pre-boot-safe). Full schema in [Events & hooks](https://cdn.help.ai/sdk/js/elements/1.11.0/docs/events-and-hooks.md).
5324
5629
 
5325
5630
  | Category | Event | Payload |
5326
5631
  | ---------------- | --------------------- | -------------------------------------------------- |
@@ -5346,6 +5651,7 @@ via `chat.on(name, fn)` (instance) or `HelpAI.hook(widgetId, name, fn)`
5346
5651
  | | `soundToggle` | `{ muted }` |
5347
5652
  | | `sidebarToggle` | `{ collapsed }` (page mode) |
5348
5653
  | | `calloutDismiss` | `void` |
5654
+ | **Your page** | `hostEvent` | `{ name, data? }` (from `chat.track()`) |
5349
5655
  | **Lifecycle** | `error` | `unknown` (any unhandled error) |
5350
5656
  | | `handshake` | `HandshakeResponse` (full handshake payload) |
5351
5657
  | | `conversationRebound` | `{ previous, current }` |
@@ -5660,6 +5966,32 @@ chat.on('close', () => {
5660
5966
 
5661
5967
  ## Common patterns
5662
5968
 
5969
+ ### Your own events (`chat.track`)
5970
+
5971
+ Report what the visitor does on your site, outside the chat, with `chat.track(name, data)`:
5972
+
5973
+ ```ts
5974
+ chat.track('plan_viewed', { plan: 'pro' });
5975
+ chat.track('cart_updated', { items: 2, total: 48.5 });
5976
+ ```
5977
+
5978
+ Each call does two things:
5979
+
5980
+ - **Analytics.** It sends one hit to help.ai's Elements analytics as a `hostEvent`, with your event name and data,
5981
+ like the widget's own events. A deployment with tracking off (or a browser sending Global Privacy Control or Do
5982
+ Not Track) sends nothing.
5983
+ - **The agent.** The widget keeps your last 10 events and sends them with the visitor's next message, as
5984
+ `recentEvents` in the page context (`{ name, data?, secondsAgo }`, oldest first), so an answer can take into
5985
+ account what the visitor just did: "I see you were looking at the Pro plan." Like the rest of the page context, the
5986
+ agent treats them as information from your site, never as instructions. They live only in this page view.
5987
+
5988
+ The name is 1–64 characters. The data is flat: strings, numbers and booleans (other values are left out), up to 256
5989
+ characters as JSON (longer data is not sent; the name still is). Nothing personal should go in either: use ids and
5990
+ plan names, not emails. `track()` also fires the `hostEvent` event, so your own listeners see it.
5991
+
5992
+ Also `HelpAI('track', name, data)` with the script tag, `element.track(name, data)` on `<web-ai-chat>`, and
5993
+ `useHelpAI().track` in React.
5994
+
5663
5995
  ### Identify the visitor
5664
5996
 
5665
5997
  The widget mints a stable anonymous `visitorId` on first load and
@@ -5813,14 +6145,14 @@ yourself — see the snippets above.
5813
6145
 
5814
6146
  ## See also
5815
6147
 
5816
- - [Events & hooks](https://cdn.help.ai/sdk/js/elements/1.9.0/docs/events-and-hooks.md) — full event reference, payload shapes, pre-boot queue semantics
5817
- - [API reference](https://cdn.help.ai/sdk/js/elements/1.9.0/docs/api-reference.md) — `ChatWidgetInstance` shape
5818
- - [Recipes](https://cdn.help.ai/sdk/js/elements/1.9.0/docs/recipes.md) — other end-to-end snippets
5819
- - [Security & privacy](https://cdn.help.ai/sdk/js/elements/1.9.0/docs/security-privacy.md) — what data flows where
6148
+ - [Events & hooks](https://cdn.help.ai/sdk/js/elements/1.11.0/docs/events-and-hooks.md) — full event reference, payload shapes, pre-boot queue semantics
6149
+ - [API reference](https://cdn.help.ai/sdk/js/elements/1.11.0/docs/api-reference.md) — `ChatWidgetInstance` shape
6150
+ - [Recipes](https://cdn.help.ai/sdk/js/elements/1.11.0/docs/recipes.md) — other end-to-end snippets
6151
+ - [Security & privacy](https://cdn.help.ai/sdk/js/elements/1.11.0/docs/security-privacy.md) — what data flows where
5820
6152
 
5821
6153
  ---
5822
6154
 
5823
- <!-- https://cdn.help.ai/sdk/js/elements/1.9.0/docs/security-privacy.md -->
6155
+ <!-- https://cdn.help.ai/sdk/js/elements/1.11.0/docs/security-privacy.md -->
5824
6156
 
5825
6157
  # Security & privacy
5826
6158
 
@@ -6012,7 +6344,7 @@ unsent text values in addition to identity and UI state, so adapter code owns
6012
6344
  their storage destination, retention, and privacy behavior. Use cases include
6013
6345
  encrypted `localStorage`, `sessionStorage`, and in-memory consent fallbacks.
6014
6346
 
6015
- [Recipes § Custom storage](https://cdn.help.ai/sdk/js/elements/1.9.0/docs/recipes.md#custom-storage-adapter).
6347
+ [Recipes § Custom storage](https://cdn.help.ai/sdk/js/elements/1.11.0/docs/recipes.md#custom-storage-adapter).
6016
6348
 
6017
6349
  ---
6018
6350
 
@@ -6164,7 +6496,8 @@ the pinned version URL (`/v1.2.0/`) supports SRI — the floating URL
6164
6496
  ## Authentication
6165
6497
 
6166
6498
  Browser access is scoped by `aiAgentDeploymentId`; a `publicKey` adds
6167
- workspace authorization. There is **no per-end-user token.**
6499
+ workspace authorization. Visitors are anonymous unless your server signs a
6500
+ [user token](#verified-users-usertoken) for your logged-in user.
6168
6501
 
6169
6502
  ### public key (default)
6170
6503
 
@@ -6189,6 +6522,64 @@ What your public key does NOT grant:
6189
6522
  Omit `publicKey` but keep `aiAgentDeploymentId`; the widget connects to
6190
6523
  that public deployment as a guest without an auth header.
6191
6524
 
6525
+ ### Verified users (`userToken`)
6526
+
6527
+ To show a logged-in user their own conversations on any device, and to let the AI rely on who they are, your
6528
+ server signs a short-lived JWT for them with the deployment's **secret key** (on the deployment's Install page;
6529
+ never put it in the browser):
6530
+
6531
+ | Claim | Required | What it is |
6532
+ | ------- | -------- | ---------------------------------------------------------- |
6533
+ | `sub` | yes | Your own id for the user (a string, up to 255 characters) |
6534
+ | `exp` | yes | Expiry, in seconds since the epoch; keep it short (1 hour) |
6535
+ | `name` | no | Their name, given to the AI as a verified fact |
6536
+ | `email` | no | Their email, given to the AI as a verified fact |
6537
+
6538
+ Sign it with HS256:
6539
+
6540
+ ```js
6541
+ // Node (jose)
6542
+ import { SignJWT } from 'jose';
6543
+
6544
+ const secret = new TextEncoder().encode(process.env.HELPAI_SECRET_KEY);
6545
+ const userToken = await new SignJWT({ name: user.name, email: user.email }).setProtectedHeader({ alg: 'HS256' }).setSubject(String(user.id)).setExpirationTime('1h').sign(secret);
6546
+ ```
6547
+
6548
+ ```python
6549
+ # Python (PyJWT)
6550
+ import os, time, jwt
6551
+
6552
+ user_token = jwt.encode({"sub": str(user.id), "exp": int(time.time()) + 3600, "name": user.name, "email": user.email}, os.environ["HELPAI_SECRET_KEY"], algorithm="HS256")
6553
+ ```
6554
+
6555
+ ```php
6556
+ // PHP (firebase/php-jwt)
6557
+ use Firebase\JWT\JWT;
6558
+
6559
+ $userToken = JWT::encode(['sub' => (string) $user->id, 'exp' => time() + 3600, 'name' => $user->name, 'email' => $user->email], getenv('HELPAI_SECRET_KEY'), 'HS256');
6560
+ ```
6561
+
6562
+ Serve it from an endpoint only your signed-in user can reach, and hand the widget a function that fetches it:
6563
+
6564
+ ```ts
6565
+ const userToken = () => fetch('/api/help-ai-token').then((res) => res.text());
6566
+
6567
+ init({ publicKey: 'agent_pk_...', aiAgentDeploymentId: '01900000-0000-7000-8000-000000000000', userToken }); // signed in at load
6568
+ chat.login(userToken); // or after your sign-in (`HelpAI('login', userToken)`, `<HelpAI userToken={userToken} />`)
6569
+ chat.reset(); // on sign-out (`HelpAI('reset')`)
6570
+ ```
6571
+
6572
+ - The widget sends the token only to the agent API, as the `x-user-token` header. The function is called when a token
6573
+ is first needed and again when the server answers `401 USER_TOKEN_INVALID` (expired or rejected); the request is
6574
+ then sent once more. A fixed string can't be refreshed, so an expired one fails until you call `login()` again.
6575
+ - A token the server can't verify is refused; it never falls back to an anonymous visitor.
6576
+ - Signing in moves the visitor's conversations on that browser to the user. From then on they reach them on any device
6577
+ where they're signed in, and nobody else does, the signed-out browser included.
6578
+ - Signing out (`reset()`, or dropping the token) or switching to another user starts over as a new visitor: nothing of
6579
+ the previous user stays in the browser.
6580
+ - Keep the function's identity stable for one user (a module function, or `useCallback` keyed on your user id): a
6581
+ different function counts as a different user.
6582
+
6192
6583
  ### user / page context is NOT auth
6193
6584
 
6194
6585
  ```ts
@@ -6230,13 +6621,13 @@ flowchart TB
6230
6621
  direction TB
6231
6622
  B1["Authenticates the HOST's agent deployment<br/>(NOT the end user)"]
6232
6623
  B2["Treats userContext / pageContext as<br/>informational + untrusted"]
6233
- B3["Never registers / authenticates end users"]
6624
+ B3["Never registers end users; verifies a signed userToken when the host sends one"]
6234
6625
  end
6235
6626
 
6236
6627
  Host -->|"context (untrusted)"| Widget
6237
6628
  Widget -->|"HTTPS/TLS + headers + context field"| Backend
6238
6629
 
6239
- note["publicKey + aiAgentDeploymentId auth the host's agent, NOT the end user — no end-user token anywhere."]
6630
+ note["publicKey + aiAgentDeploymentId auth the host's agent; only a userToken signed by the host's server identifies the end user."]
6240
6631
  Backend -.-> note
6241
6632
  ```
6242
6633
 
@@ -6254,6 +6645,8 @@ and anyone can base64url-decode it. Never put a secret in context.
6254
6645
 
6255
6646
  - **public keys** — rotate from the dashboard. Old keys are deactivated
6256
6647
  instantly; update your embeds.
6648
+ - **secret key** — user tokens signed with a replaced secret key stop verifying, so every verified user is signed out
6649
+ until your server signs new ones with the new key.
6257
6650
 
6258
6651
  ---
6259
6652
 
@@ -6400,7 +6793,7 @@ We respond within 24 hours and coordinate disclosure on your schedule.
6400
6793
 
6401
6794
  ---
6402
6795
 
6403
- <!-- https://cdn.help.ai/sdk/js/elements/1.9.0/docs/browser-support.md -->
6796
+ <!-- https://cdn.help.ai/sdk/js/elements/1.11.0/docs/browser-support.md -->
6404
6797
 
6405
6798
  # Browser support
6406
6799
 
@@ -6707,7 +7100,7 @@ with:
6707
7100
 
6708
7101
  ---
6709
7102
 
6710
- <!-- https://cdn.help.ai/sdk/js/elements/1.9.0/docs/troubleshooting.md -->
7103
+ <!-- https://cdn.help.ai/sdk/js/elements/1.11.0/docs/troubleshooting.md -->
6711
7104
 
6712
7105
  # Troubleshooting
6713
7106
 
@@ -6803,7 +7196,7 @@ for (const k of Object.keys(localStorage)) {
6803
7196
  3. **Any CSP errors in the console?** — `"Refused to connect to
6804
7197
  https://help.ai/api/agent because it violates the following Content
6805
7198
  Security Policy…"` means you need to add `help.ai` to your
6806
- `connect-src`. See [Security § CSP](https://cdn.help.ai/sdk/js/elements/1.9.0/docs/security-privacy.md#content-security-policy).
7199
+ `connect-src`. See [Security § CSP](https://cdn.help.ai/sdk/js/elements/1.11.0/docs/security-privacy.md#content-security-policy).
6807
7200
 
6808
7201
  ---
6809
7202
 
@@ -6886,7 +7279,7 @@ first.
6886
7279
  ### Symptom: widget ignores my CSS
6887
7280
 
6888
7281
  That's by design. The widget lives inside a shadow root — your page
6889
- CSS can't reach inside. Use the [theming options](https://cdn.help.ai/sdk/js/elements/1.9.0/docs/theming.md)
7282
+ CSS can't reach inside. Use the [theming options](https://cdn.help.ai/sdk/js/elements/1.11.0/docs/theming.md)
6890
7283
  instead.
6891
7284
 
6892
7285
  For advanced customization, override CSS custom properties on the
@@ -7151,7 +7544,7 @@ font-src 'self' https:;
7151
7544
  media-src 'self' blob:; # For voice recording
7152
7545
  ```
7153
7546
 
7154
- Full CSP guide: [Security § CSP](https://cdn.help.ai/sdk/js/elements/1.9.0/docs/security-privacy.md#content-security-policy).
7547
+ Full CSP guide: [Security § CSP](https://cdn.help.ai/sdk/js/elements/1.11.0/docs/security-privacy.md#content-security-policy).
7155
7548
 
7156
7549
  ---
7157
7550
 
@@ -7216,7 +7609,7 @@ provide `i18n.availableLocales` and include `language` in `header.actions`.
7216
7609
 
7217
7610
  ## Getting more help
7218
7611
 
7219
- 1. **Read the [FAQ](https://cdn.help.ai/sdk/js/elements/1.9.0/docs/faq.md)** — most common questions answered
7612
+ 1. **Read the [FAQ](https://cdn.help.ai/sdk/js/elements/1.11.0/docs/faq.md)** — most common questions answered
7220
7613
  there.
7221
7614
 
7222
7615
  2. **Check our GitHub issues**: [github.com/help-ai/elements](https://github.com/help-ai/elements/issues).
@@ -7235,7 +7628,7 @@ provide `i18n.availableLocales` and include `language` in `header.actions`.
7235
7628
 
7236
7629
  ---
7237
7630
 
7238
- <!-- https://cdn.help.ai/sdk/js/elements/1.9.0/docs/faq.md -->
7631
+ <!-- https://cdn.help.ai/sdk/js/elements/1.11.0/docs/faq.md -->
7239
7632
 
7240
7633
  # FAQ
7241
7634
 
@@ -7275,7 +7668,7 @@ own builds. Your public key gates the backend, not the frontend.
7275
7668
  ### What browsers are supported?
7276
7669
 
7277
7670
  Chrome/Edge 100+, Safari 15+, Firefox 100+, iOS Safari 15+. No IE11.
7278
- See [Browser support](https://cdn.help.ai/sdk/js/elements/1.9.0/docs/browser-support.md).
7671
+ See [Browser support](https://cdn.help.ai/sdk/js/elements/1.11.0/docs/browser-support.md).
7279
7672
 
7280
7673
  ---
7281
7674
 
@@ -7294,11 +7687,11 @@ yourself) and serve it from your CDN. Point your `<script src>` at your hosted
7294
7687
  URL. Self-hosting is also what unlocks **chunked delivery** (only changed code
7295
7688
  re-downloads across releases) behind a single stable URL the customer never has
7296
7689
  to change — see
7297
- [Caching, versioning & self-hosting](https://cdn.help.ai/sdk/js/elements/1.9.0/docs/installation.md#caching-versioning--self-hosting).
7690
+ [Caching, versioning & self-hosting](https://cdn.help.ai/sdk/js/elements/1.11.0/docs/installation.md#caching-versioning--self-hosting).
7298
7691
 
7299
7692
  ### Can I use this with a tag manager (GTM)?
7300
7693
 
7301
- Yes. Use the async loader snippet ([Path B](https://cdn.help.ai/sdk/js/elements/1.9.0/docs/installation.md#path-b--async-loader-snippet))
7694
+ Yes. Use the async loader snippet ([Path B](https://cdn.help.ai/sdk/js/elements/1.11.0/docs/installation.md#path-b--async-loader-snippet))
7302
7695
  inside a Custom HTML tag. All `HelpAI(...)` calls queue until the
7303
7696
  bundle lands.
7304
7697
 
@@ -7306,7 +7699,7 @@ bundle lands.
7306
7699
 
7307
7700
  Yes — and there's an optional `presentation.iframe: true` flag that wraps the
7308
7701
  widget in its OWN iframe for extra isolation. See
7309
- [Configuration § presentation.iframe](https://cdn.help.ai/sdk/js/elements/1.9.0/docs/configuration.md#presentationiframe).
7702
+ [Configuration § presentation.iframe](https://cdn.help.ai/sdk/js/elements/1.11.0/docs/configuration.md#presentationiframe).
7310
7703
 
7311
7704
  ### Does it work in shadow DOM?
7312
7705
 
@@ -7316,15 +7709,15 @@ custom element on your page). Everything just works.
7316
7709
 
7317
7710
  ### Does it work with React / Next.js?
7318
7711
 
7319
- Yes. Full walkthrough: [Framework integrations § Next.js](https://cdn.help.ai/sdk/js/elements/1.9.0/docs/frameworks.md#nextjs).
7712
+ Yes. Full walkthrough: [Framework integrations § Next.js](https://cdn.help.ai/sdk/js/elements/1.11.0/docs/frameworks.md#nextjs).
7320
7713
 
7321
7714
  ### Does it work with Vue / Svelte / SolidJS / Angular?
7322
7715
 
7323
- Yes. See [Framework integrations](https://cdn.help.ai/sdk/js/elements/1.9.0/docs/frameworks.md).
7716
+ Yes. See [Framework integrations](https://cdn.help.ai/sdk/js/elements/1.11.0/docs/frameworks.md).
7324
7717
 
7325
7718
  ### Does it work with WordPress / Shopify / Webflow / Squarespace?
7326
7719
 
7327
- Yes. [Framework integrations § CMS](https://cdn.help.ai/sdk/js/elements/1.9.0/docs/frameworks.md#wordpress).
7720
+ Yes. [Framework integrations § CMS](https://cdn.help.ai/sdk/js/elements/1.11.0/docs/frameworks.md#wordpress).
7328
7721
 
7329
7722
  ---
7330
7723
 
@@ -7333,12 +7726,12 @@ Yes. [Framework integrations § CMS](https://cdn.help.ai/sdk/js/elements/1.9.0/d
7333
7726
  ### Can I change the launcher icon?
7334
7727
 
7335
7728
  Yes. Pick from presets (`chat`, `spark`, `message`, `help`, `wand`)
7336
- or pass raw SVG. See [Theming § Icons](https://cdn.help.ai/sdk/js/elements/1.9.0/docs/theming.md#icons).
7729
+ or pass raw SVG. See [Theming § Icons](https://cdn.help.ai/sdk/js/elements/1.11.0/docs/theming.md#icons).
7337
7730
 
7338
7731
  ### Can I match my brand colors?
7339
7732
 
7340
7733
  Yes. Set `theme.accent`, `theme.accentText`, `theme.radius`,
7341
- `theme.fontFamily`. See [Theming § Colors](https://cdn.help.ai/sdk/js/elements/1.9.0/docs/theming.md#color-overrides).
7734
+ `theme.fontFamily`. See [Theming § Colors](https://cdn.help.ai/sdk/js/elements/1.11.0/docs/theming.md#color-overrides).
7342
7735
 
7343
7736
  ### Can I change the font?
7344
7737
 
@@ -7348,7 +7741,7 @@ respects any CSS font stack you provide.
7348
7741
  ### Can I hide the launcher and open the widget from my own button?
7349
7742
 
7350
7743
  Yes. Set `launcher: { hidden: true }`, then call `chat.open()` from
7351
- your button's click handler. [Recipes § Custom launcher](https://cdn.help.ai/sdk/js/elements/1.9.0/docs/recipes.md#custom-launcher-button).
7744
+ your button's click handler. [Recipes § Custom launcher](https://cdn.help.ai/sdk/js/elements/1.11.0/docs/recipes.md#custom-launcher-button).
7352
7745
 
7353
7746
  ### Can I change the welcome message?
7354
7747
 
@@ -7357,24 +7750,24 @@ widget just renders what the backend sends.
7357
7750
 
7358
7751
  ### Can I override UI strings?
7359
7752
 
7360
- Yes, per-locale or flat. See [Theming § Strings](https://cdn.help.ai/sdk/js/elements/1.9.0/docs/theming.md#strings-overrides).
7753
+ Yes, per-locale or flat. See [Theming § Strings](https://cdn.help.ai/sdk/js/elements/1.11.0/docs/theming.md#strings-overrides).
7361
7754
 
7362
7755
  ### Can I have multiple widgets on one page?
7363
7756
 
7364
7757
  Yes — with distinct `widgetId` values. Each gets its own chat
7365
- thread, storage, and events. [Recipes § Multi-widget](https://cdn.help.ai/sdk/js/elements/1.9.0/docs/recipes.md#multiple-widgets-on-one-page).
7758
+ thread, storage, and events. [Recipes § Multi-widget](https://cdn.help.ai/sdk/js/elements/1.11.0/docs/recipes.md#multiple-widgets-on-one-page).
7366
7759
 
7367
7760
  ### Can I show the widget only on certain pages?
7368
7761
 
7369
7762
  Yes — just skip the `init()` call on pages where you don't want it.
7370
7763
  Or conditionally mount/unmount based on the URL.
7371
- [Recipes § Conditional show](https://cdn.help.ai/sdk/js/elements/1.9.0/docs/recipes.md#conditionally-show-based-on-url).
7764
+ [Recipes § Conditional show](https://cdn.help.ai/sdk/js/elements/1.11.0/docs/recipes.md#conditionally-show-based-on-url).
7372
7765
 
7373
7766
  ### Can I use it in a specific language?
7374
7767
 
7375
7768
  Yes. Force via `i18n.locale: 'fr-CA'`. Let users switch via
7376
7769
  `i18n.availableLocales: ['en', 'fr', 'es']`. Full details: [Theming §
7377
- Internationalization](https://cdn.help.ai/sdk/js/elements/1.9.0/docs/theming.md#internationalization).
7770
+ Internationalization](https://cdn.help.ai/sdk/js/elements/1.11.0/docs/theming.md#internationalization).
7378
7771
 
7379
7772
  ### Can I change the widget's position on mobile?
7380
7773
 
@@ -7411,7 +7804,7 @@ allowlisted event metadata through 1×1 pixel requests; it never sends message
7411
7804
  text or form values and can be disabled with `tracking.enabled: false`. GPC and
7412
7805
  DNT disable it automatically. No cookies or fingerprinting.
7413
7806
 
7414
- Full breakdown: [Security & privacy § data collected](https://cdn.help.ai/sdk/js/elements/1.9.0/docs/security-privacy.md#what-data-the-widget-collects).
7807
+ Full breakdown: [Security & privacy § data collected](https://cdn.help.ai/sdk/js/elements/1.11.0/docs/security-privacy.md#what-data-the-widget-collects).
7415
7808
 
7416
7809
  ### Does the widget use cookies?
7417
7810
 
@@ -7431,7 +7824,7 @@ Help AI API + your deployment's configured model provider.
7431
7824
  It stores data about identified users (when you pass `user.id`) or
7432
7825
  anonymous visitors. Your DPA (Data Processing Agreement) with Help
7433
7826
  AI covers the processing terms. For consent management, see
7434
- [Recipes § Gate behind consent](https://cdn.help.ai/sdk/js/elements/1.9.0/docs/recipes.md#gate-the-widget-behind-consent).
7827
+ [Recipes § Gate behind consent](https://cdn.help.ai/sdk/js/elements/1.11.0/docs/recipes.md#gate-the-widget-behind-consent).
7435
7828
 
7436
7829
  ### Can visitors delete their chat history?
7437
7830
 
@@ -7446,7 +7839,7 @@ Yes — pass a custom in-memory storage adapter. Adapter-managed identity,
7446
7839
  conversation, draft, preference, and UI state then evaporates on reload. The
7447
7840
  optional logger debug level is separate: calling `setDebug` persists
7448
7841
  `helpai.debug` directly in `localStorage` until the host clears it.
7449
- [Recipes § Custom storage adapter](https://cdn.help.ai/sdk/js/elements/1.9.0/docs/recipes.md#custom-storage-adapter).
7842
+ [Recipes § Custom storage adapter](https://cdn.help.ai/sdk/js/elements/1.11.0/docs/recipes.md#custom-storage-adapter).
7450
7843
 
7451
7844
  ### Does the widget track visitors across sites?
7452
7845
 
@@ -7471,7 +7864,7 @@ init({
7471
7864
  not an auth credential. Browser public access uses the matching
7472
7865
  `publicKey` + `aiAgentDeploymentId` pair, or the deployment ID alone for
7473
7866
  intentional guest mode.
7474
- See [Recipes § Logged-in user personalization](https://cdn.help.ai/sdk/js/elements/1.9.0/docs/recipes.md#logged-in-user-personalization).
7867
+ See [Recipes § Logged-in user personalization](https://cdn.help.ai/sdk/js/elements/1.11.0/docs/recipes.md#logged-in-user-personalization).
7475
7868
 
7476
7869
  ### How do I integrate with my analytics (GA / Segment / Mixpanel)?
7477
7870
 
@@ -7490,7 +7883,7 @@ One-line pre-boot hook forwards every event:
7490
7883
  </script>
7491
7884
  ```
7492
7885
 
7493
- Full examples: [Recipes § Analytics forwarding](https://cdn.help.ai/sdk/js/elements/1.9.0/docs/recipes.md#analytics-forwarding).
7886
+ Full examples: [Recipes § Analytics forwarding](https://cdn.help.ai/sdk/js/elements/1.11.0/docs/recipes.md#analytics-forwarding).
7494
7887
 
7495
7888
  ### How do I capture errors in Sentry / Datadog?
7496
7889
 
@@ -7675,7 +8068,7 @@ table.
7675
8068
 
7676
8069
  ---
7677
8070
 
7678
- <!-- https://cdn.help.ai/sdk/js/elements/1.9.0/docs/README.md -->
8071
+ <!-- https://cdn.help.ai/sdk/js/elements/1.11.0/docs/README.md -->
7679
8072
 
7680
8073
  # Help AI Elements — SDK Documentation
7681
8074
 
@@ -7704,7 +8097,7 @@ it → the panel opens → they can chat.
7704
8097
  Get the public key and deployment ID from [help.ai](https://help.ai) →
7705
8098
  **Dashboard → Deployments**.
7706
8099
 
7707
- [**Continue with the quickstart →**](https://cdn.help.ai/sdk/js/elements/1.9.0/docs/quickstart.md)
8100
+ [**Continue with the quickstart →**](https://cdn.help.ai/sdk/js/elements/1.11.0/docs/quickstart.md)
7708
8101
 
7709
8102
  ---
7710
8103
 
@@ -7712,19 +8105,20 @@ Get the public key and deployment ID from [help.ai](https://help.ai) →
7712
8105
 
7713
8106
  | You want to… | Read |
7714
8107
  | ----------------------------------------------------------- | --------------------------------------------- |
7715
- | Install the widget end-to-end | [**Quickstart**](https://cdn.help.ai/sdk/js/elements/1.9.0/docs/quickstart.md) |
7716
- | See every install method (NPM, Web Component, React) | [Installation](https://cdn.help.ai/sdk/js/elements/1.9.0/docs/installation.md) |
7717
- | Customize every option | [Configuration reference](https://cdn.help.ai/sdk/js/elements/1.9.0/docs/configuration.md) |
7718
- | Match my brand colors and typography | [Theming & customization](https://cdn.help.ai/sdk/js/elements/1.9.0/docs/theming.md) |
7719
- | Send chat events to my analytics | [Events & hooks](https://cdn.help.ai/sdk/js/elements/1.9.0/docs/events-and-hooks.md) |
7720
- | Wire GA4 / Mixpanel / Segment / multi-provider | [Analytics integration](https://cdn.help.ai/sdk/js/elements/1.9.0/docs/analytics.md) |
7721
- | Integrate with Next.js / Vue / Svelte / WordPress / Shopify | [Framework integrations](https://cdn.help.ai/sdk/js/elements/1.9.0/docs/frameworks.md) |
7722
- | Copy a working example | [Recipes](https://cdn.help.ai/sdk/js/elements/1.9.0/docs/recipes.md) |
7723
- | Diagnose "why isn't this working" | [Troubleshooting](https://cdn.help.ai/sdk/js/elements/1.9.0/docs/troubleshooting.md) |
7724
- | Quick answer to a common question | [FAQ](https://cdn.help.ai/sdk/js/elements/1.9.0/docs/faq.md) |
7725
- | Compact API reference for lookup | [API reference](https://cdn.help.ai/sdk/js/elements/1.9.0/docs/api-reference.md) |
7726
- | Understand what data the widget sees | [Security & privacy](https://cdn.help.ai/sdk/js/elements/1.9.0/docs/security-privacy.md) |
7727
- | Check browser compatibility | [Browser support](https://cdn.help.ai/sdk/js/elements/1.9.0/docs/browser-support.md) |
8108
+ | Install the widget end-to-end | [**Quickstart**](https://cdn.help.ai/sdk/js/elements/1.11.0/docs/quickstart.md) |
8109
+ | See every install method (NPM, Web Component, React) | [Installation](https://cdn.help.ai/sdk/js/elements/1.11.0/docs/installation.md) |
8110
+ | Customize every option | [Configuration reference](https://cdn.help.ai/sdk/js/elements/1.11.0/docs/configuration.md) |
8111
+ | Match my brand colors and typography | [Theming & customization](https://cdn.help.ai/sdk/js/elements/1.11.0/docs/theming.md) |
8112
+ | Send chat events to my analytics | [Events & hooks](https://cdn.help.ai/sdk/js/elements/1.11.0/docs/events-and-hooks.md) |
8113
+ | Wire GA4 / Mixpanel / Segment / multi-provider | [Analytics integration](https://cdn.help.ai/sdk/js/elements/1.11.0/docs/analytics.md) |
8114
+ | Integrate with Next.js / Vue / Svelte / WordPress / Shopify | [Framework integrations](https://cdn.help.ai/sdk/js/elements/1.11.0/docs/frameworks.md) |
8115
+ | Copy a working example | [Recipes](https://cdn.help.ai/sdk/js/elements/1.11.0/docs/recipes.md) |
8116
+ | Let the AI agent act on my page | [Page tools](https://cdn.help.ai/sdk/js/elements/1.11.0/docs/page-tools.md) |
8117
+ | Diagnose "why isn't this working" | [Troubleshooting](https://cdn.help.ai/sdk/js/elements/1.11.0/docs/troubleshooting.md) |
8118
+ | Quick answer to a common question | [FAQ](https://cdn.help.ai/sdk/js/elements/1.11.0/docs/faq.md) |
8119
+ | Compact API reference for lookup | [API reference](https://cdn.help.ai/sdk/js/elements/1.11.0/docs/api-reference.md) |
8120
+ | Understand what data the widget sees | [Security & privacy](https://cdn.help.ai/sdk/js/elements/1.11.0/docs/security-privacy.md) |
8121
+ | Check browser compatibility | [Browser support](https://cdn.help.ai/sdk/js/elements/1.11.0/docs/browser-support.md) |
7728
8122
 
7729
8123
  ---
7730
8124
 
@@ -7786,7 +8180,7 @@ Five ways to install. Pick whichever fits your site:
7786
8180
  | **ESM via CDN** | Plain HTML, sandboxes, MDX — no build, no NPM install | `import { mount } from 'https://cdn.jsdelivr.net/npm/@helpai/elements@<version>/elements.esm.js'` |
7787
8181
 
7788
8182
  All five use the same underlying library. Same options, same events,
7789
- same behavior. Full comparison: [Installation](https://cdn.help.ai/sdk/js/elements/1.9.0/docs/installation.md).
8183
+ same behavior. Full comparison: [Installation](https://cdn.help.ai/sdk/js/elements/1.11.0/docs/installation.md).
7790
8184
 
7791
8185
  ---
7792
8186
 
@@ -7841,14 +8235,14 @@ fuller example showing the most common options in one place:
7841
8235
  </script>
7842
8236
  ```
7843
8237
 
7844
- Every option explained in [Configuration](https://cdn.help.ai/sdk/js/elements/1.9.0/docs/configuration.md). Every
7845
- customization path in [Theming](https://cdn.help.ai/sdk/js/elements/1.9.0/docs/theming.md).
8238
+ Every option explained in [Configuration](https://cdn.help.ai/sdk/js/elements/1.11.0/docs/configuration.md). Every
8239
+ customization path in [Theming](https://cdn.help.ai/sdk/js/elements/1.11.0/docs/theming.md).
7846
8240
 
7847
8241
  ---
7848
8242
 
7849
8243
  ## Support
7850
8244
 
7851
- - **Questions?** [FAQ](https://cdn.help.ai/sdk/js/elements/1.9.0/docs/faq.md) — common answers first. [support@help.ai](mailto:support@help.ai) for anything else.
8245
+ - **Questions?** [FAQ](https://cdn.help.ai/sdk/js/elements/1.11.0/docs/faq.md) — common answers first. [support@help.ai](mailto:support@help.ai) for anything else.
7852
8246
  - **Found a bug?** File an issue at [github.com/help-ai/elements](https://github.com/help-ai/elements/issues).
7853
8247
  - **Need a feature?** Same place — we read every request.
7854
8248
  - **Status page:** [help.ai/status](https://help.ai/status).