@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/docs/README.md +1 -0
- package/docs/analytics.md +27 -0
- package/docs/api-reference.md +69 -2
- package/docs/configuration.md +31 -0
- package/docs/events-and-hooks.md +13 -11
- package/docs/frameworks.md +7 -1
- package/docs/page-tools.md +194 -0
- package/docs/security-privacy.md +64 -3
- package/elements-web-component.esm.js +39 -39
- package/elements-web-component.esm.js.map +4 -4
- package/elements.cjs.js +39 -39
- package/elements.cjs.js.map +4 -4
- package/elements.esm.js +39 -39
- package/elements.esm.js.map +4 -4
- package/elements.js +39 -39
- package/elements.js.map +4 -4
- package/index.d.ts +108 -3
- package/index.mjs +14 -14
- package/jsx-react.d.ts +2 -1
- package/jsx-svelte.d.ts +2 -1
- package/jsx-vue.d.ts +3 -2
- package/llms-full.txt +541 -147
- package/llms.txt +22 -18
- package/package.json +1 -1
- package/react.d.ts +124 -3
- package/react.mjs +32 -32
- package/style.css +1 -1
- package/web-component.d.ts +109 -3
- package/web-component.mjs +14 -14
package/llms-full.txt
CHANGED
|
@@ -1,6 +1,6 @@
|
|
|
1
|
-
# Help AI Elements: the full SDK docs (@helpai/elements@1.
|
|
1
|
+
# Help AI Elements: the full SDK docs (@helpai/elements@1.11.0)
|
|
2
2
|
|
|
3
|
-
<!-- https://cdn.help.ai/sdk/js/elements/1.
|
|
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.
|
|
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.
|
|
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.
|
|
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.
|
|
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.
|
|
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.
|
|
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.
|
|
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.
|
|
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.
|
|
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.
|
|
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.
|
|
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.
|
|
275
|
-
- Emit the same [events](https://cdn.help.ai/sdk/js/elements/1.
|
|
276
|
-
- Respect the same [isolation guarantees](https://cdn.help.ai/sdk/js/elements/1.
|
|
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.
|
|
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.
|
|
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.
|
|
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.
|
|
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.
|
|
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.
|
|
862
|
-
- [Theming & customization](https://cdn.help.ai/sdk/js/elements/1.
|
|
863
|
-
- [Framework integrations](https://cdn.help.ai/sdk/js/elements/1.
|
|
864
|
-
- [Troubleshooting](https://cdn.help.ai/sdk/js/elements/1.
|
|
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.
|
|
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.
|
|
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.
|
|
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.
|
|
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.
|
|
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.
|
|
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.
|
|
1508
|
-
- [Events & hooks](https://cdn.help.ai/sdk/js/elements/1.
|
|
1509
|
-
- [Configuration](https://cdn.help.ai/sdk/js/elements/1.
|
|
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.
|
|
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.
|
|
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.
|
|
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.
|
|
1739
|
-
the framework recipes in [`frameworks.md`](https://cdn.help.ai/sdk/js/elements/1.
|
|
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.
|
|
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.
|
|
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.
|
|
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.
|
|
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.
|
|
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.
|
|
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.
|
|
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.
|
|
2513
|
-
- **Theming deep-dive** → [Theming](https://cdn.help.ai/sdk/js/elements/1.
|
|
2514
|
-
- **Framework-specific wiring** → [Frameworks](https://cdn.help.ai/sdk/js/elements/1.
|
|
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.
|
|
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.
|
|
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.
|
|
2853
|
-
and [Events & hooks](https://cdn.help.ai/sdk/js/elements/1.
|
|
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.
|
|
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.
|
|
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.
|
|
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.
|
|
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.
|
|
3468
|
-
- [Events & hooks](https://cdn.help.ai/sdk/js/elements/1.
|
|
3469
|
-
- [Recipes](https://cdn.help.ai/sdk/js/elements/1.
|
|
3470
|
-
- [Troubleshooting](https://cdn.help.ai/sdk/js/elements/1.
|
|
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.
|
|
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
|
|
3497
|
-
| ----------------- |
|
|
3498
|
-
| `open` | Panel opens (floating mode)
|
|
3499
|
-
| `close` | Panel closes
|
|
3500
|
-
| `message` | User sends a message + assistant finishes a reply
|
|
3501
|
-
| `error` | Transport error or mid-stream error
|
|
3502
|
-
| `expand` | Expanded tier toggled (⤢)
|
|
3503
|
-
| `fullscreen` | Fullscreen tier toggled (⛶)
|
|
3504
|
-
| `handshake` | Widget finishes booting (once per mount)
|
|
3505
|
-
| `localeChange` | User picks a different language
|
|
3506
|
-
| `messageFeedback` | User rates a reply 👍/👎 (or clears it)
|
|
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.
|
|
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.
|
|
3956
|
-
- [Recipes](https://cdn.help.ai/sdk/js/elements/1.
|
|
3957
|
-
- [API reference § events](https://cdn.help.ai/sdk/js/elements/1.
|
|
3958
|
-
- [Configuration § callbacks](https://cdn.help.ai/sdk/js/elements/1.
|
|
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.
|
|
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.
|
|
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.
|
|
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.
|
|
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.
|
|
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.
|
|
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.
|
|
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.
|
|
5262
|
-
- [Configuration](https://cdn.help.ai/sdk/js/elements/1.
|
|
5263
|
-
- [Troubleshooting](https://cdn.help.ai/sdk/js/elements/1.
|
|
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.
|
|
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.
|
|
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.
|
|
5817
|
-
- [API reference](https://cdn.help.ai/sdk/js/elements/1.
|
|
5818
|
-
- [Recipes](https://cdn.help.ai/sdk/js/elements/1.
|
|
5819
|
-
- [Security & privacy](https://cdn.help.ai/sdk/js/elements/1.
|
|
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.
|
|
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.
|
|
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.
|
|
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
|
|
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
|
|
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.
|
|
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.
|
|
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.
|
|
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.
|
|
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.
|
|
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.
|
|
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.
|
|
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.
|
|
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.
|
|
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.
|
|
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.
|
|
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.
|
|
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.
|
|
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.
|
|
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.
|
|
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.
|
|
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.
|
|
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.
|
|
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.
|
|
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.
|
|
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.
|
|
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.
|
|
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.
|
|
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.
|
|
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.
|
|
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.
|
|
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.
|
|
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.
|
|
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.
|
|
7716
|
-
| See every install method (NPM, Web Component, React) | [Installation](https://cdn.help.ai/sdk/js/elements/1.
|
|
7717
|
-
| Customize every option | [Configuration reference](https://cdn.help.ai/sdk/js/elements/1.
|
|
7718
|
-
| Match my brand colors and typography | [Theming & customization](https://cdn.help.ai/sdk/js/elements/1.
|
|
7719
|
-
| Send chat events to my analytics | [Events & hooks](https://cdn.help.ai/sdk/js/elements/1.
|
|
7720
|
-
| Wire GA4 / Mixpanel / Segment / multi-provider | [Analytics integration](https://cdn.help.ai/sdk/js/elements/1.
|
|
7721
|
-
| Integrate with Next.js / Vue / Svelte / WordPress / Shopify | [Framework integrations](https://cdn.help.ai/sdk/js/elements/1.
|
|
7722
|
-
| Copy a working example | [Recipes](https://cdn.help.ai/sdk/js/elements/1.
|
|
7723
|
-
|
|
|
7724
|
-
|
|
|
7725
|
-
|
|
|
7726
|
-
|
|
|
7727
|
-
|
|
|
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.
|
|
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.
|
|
7845
|
-
customization path in [Theming](https://cdn.help.ai/sdk/js/elements/1.
|
|
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.
|
|
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).
|