> ## Documentation Index
> Fetch the complete documentation index at: https://documentation.uponai.com/llms.txt
> Use this file to discover all available pages before exploring further.
# Website Widget
> Embed a chat or callback widget on your website with a single script tag.
The UponAI website widget is a production-ready, customizable widget for any website, powered by the UponAI API. Embed it with a single `
```
### Chat Widget Attributes
**Required:**
| Attribute | Description |
| ----------------- | ---------------------- |
| `data-public-key` | Your UponAI public key |
| `data-agent-id` | Your chat agent ID |
**Optional:**
| Attribute | Description |
| ------------------------- | ---------------------------------------------------- |
| `data-agent-version` | Agent version (defaults to latest) |
| `data-title` | Custom chat window title |
| `data-logo-url` | URL of your logo image |
| `data-color` | Hex color for widget theme (e.g. `#FFA07A`) |
| `data-bot-name` | Bot name shown in popup messages |
| `data-popup-message` | Popup message shown before the user opens chat |
| `data-show-ai-popup` | Set to `"true"` to enable popup messages |
| `data-show-ai-popup-time` | Seconds to delay before showing popup (default: `0`) |
| `data-auto-open` | Set to `"true"` to auto-open on page load |
| `data-dynamic` | JSON string with dynamic variables for the agent |
| `data-recaptcha-key` | Google reCAPTCHA v3 site key for bot protection |
### Full Example
```html theme={null}
Chat Widget Example
```
## Callback Widget
Collects the user's phone number and initiates an outbound call from your agent instead of a chat session.
### Setup
```html theme={null}
```
### Callback Widget Attributes
**Required:**
| Attribute | Description |
| ------------------- | ---------------------------------------------------------- |
| `data-public-key` | Your UponAI public key |
| `data-agent-id` | Your **voice** agent ID |
| `data-widget` | Must be `"callback"` |
| `data-phone-number` | Your UponAI phone number that will place the outbound call |
**Optional:**
| Attribute | Description |
| -------------------- | -------------------------------------------------------------------------- |
| `data-title` | Custom widget title |
| `data-color` | Hex color for widget theme |
| `data-countries` | Comma-separated country codes for the country selector (e.g. `"US,CA,GB"`) |
| `data-tc` | URL to your terms and conditions page |
| `data-recaptcha-key` | Google reCAPTCHA v3 site key |
### How It Works
1. User clicks the floating phone icon (bottom right)
2. A form appears collecting first name, last name, phone number, and privacy agreement
3. On submit, the widget creates an outbound call via the UponAI API
4. The user receives a call from your specified number
5. The conversation is handled by your configured voice agent
### Full Example
```html theme={null}
Callback Widget Example
```
## reCAPTCHA Protection
Both widgets support Google reCAPTCHA v3 for bot protection.
Only reCAPTCHA **v3** is supported. v2 is not compatible.
Include this in your HTML ``:
```html theme={null}
```
Add `data-recaptcha-key="YOUR_RECAPTCHA_SITE_KEY"` to your widget script tag.
Enable reCAPTCHA protection for your public key in the UponAI Public Keys settings.