`

That's it! The script automatically finds elements with data-webchat-token-url and renders a chat widget.

Features

- Zero JavaScript required - Configure everything via HTML data attributes
- Floating chat bubble - Starts minimized with a customizable button
- Auto-inherits styles - Picks up your site's CSS variables and fonts
- Restart conversation - Built-in button to start fresh
- Fully customizable - Control colors, fonts, and WebChat styleOptions

Getting Your Token Endpoint (Copilot Studio)

1. In the navigation menu under Settings, select Channels
2. Select Email - the configuration panel appears
3. Next to Token Endpoint, select Copy

Use this URL as the data-webchat-token-url value.

Limitations

This library currently only supports Copilot Studio agents with no authentication. It does not support:

- Direct Line secrets
- Authenticated agents (Entra ID, etc.)

For agents requiring authentication, use the BotFramework WebChat SDK directly.

Supported Attributes

$3

| Attribute | Description |
|-----------|-------------|
| data-webchat-token-url | URL to fetch Direct Line token |

$3

| Attribute | Default | Description |
|-----------|---------|-------------|
| data-webchat-title | "Chat" | Header title text |
| data-webchat-bubble-text | (icon only) | Text on the floating bubble button |
| data-webchat-minimized | true | Start minimized (show bubble) |
| data-webchat-preload | false | Load conversation on page load (even if minimized) |
| data-webchat-send-start-event | true | Send startConversation event to trigger welcome message |

$3

| Attribute | Description |
|-----------|-------------|
| data-webchat-user-id | User ID for conversation |
| data-webchat-username | Display name for user |
| data-webchat-locale | Language locale (e.g., en-US) |

$3

| Attribute | Description |
|-----------|-------------|
| data-webchat-header-background | Header/bubble background color |
| data-webchat-header-color | Header/bubble text color |
| data-webchat-style-options | Reference to global styleOptions object |
| data-webchat-style-* | Any WebChat styleOption (kebab-case) |

Style Inheritance

The widget automatically inherits styles from your page:

$3

`css
:root {
--primary-color: #0078d4; / Used for header/accent /
--border-radius: 12px; / Used for bubble roundness /
}
`

Checked variable names (in order): --primary-color, --accent-color, --brand-color, --color-primary, --theme-primary

$3

The widget inherits font-family from its container element automatically.

$3

For advanced styling, reference a global object:

`html



Override specific styles with data-webchat-style-* attributes:

`html
data-webchat-style-accent-color="#ff0000"
data-webchat-style-bubble-border-radius="8"
data-webchat-style-hide-upload-button="true"
...>