> ## Documentation Index
> Fetch the complete documentation index at: https://docs.intellixent.ai/llms.txt
> Use this file to discover all available pages before exploring further.
# Web widget
> Embed your AI assistant on your website with voice, chat, or hybrid capabilities.
Add your AI assistant to any website with a customisable widget that supports voice calls, text chat, or both.
Web Widget is a premium feature. Confirm your plan includes web widget access before configuring.
## Widget modes
Choose how visitors interact with your assistant:
Users can switch seamlessly between voice and text during a conversation.
**Best for:** Maximum flexibility, accessibility across devices, and complex interactions that may benefit from both modes.
Text-based messaging interface only.
**Best for:** Customer support and FAQs, environments where voice isn't appropriate, lead capture forms.
Real-time voice conversations only.
**Best for:** Phone-like experience on the web, voice-first use cases, hands-free interactions.
## Accessing widget configuration
Navigate to your assistant's edit page.
Click the **Web widget** button. The configuration panel opens with a live preview.
## Configuration options
### General tab
* **Widget mode:** Voice, Chat, or Voice & Chat.
* **Widget size:**
* *Standard* — compact floating widget suitable for most use cases.
* *Extra large* — half-screen panel on desktop, full-screen on mobile; ideal for detailed conversations.
* **Position:** Choose from 8 positions (bottom-right, bottom-left, bottom-center, middle-right, middle-left, top-right, top-left, top-center).
* **Primary colour:** Brand colour for buttons and accents.
* **Toggle button size:** Small or Normal.
* **Toggle button style:** Animated (glass morphism) or Simple (flat design).
* **Auto-open on page load:** When enabled, the widget expands automatically when the page loads — no click required.
### Button tab
* **Custom avatar:** Upload your own avatar image (max 512 KB, 1:1 square aspect ratio) to replace the default widget icon.
* **Button main text** (default: "Need help?")
* **Button sub text** (default: "Chat with us") — hidden when using the small button size.
* **Tab labels (Voice & Chat mode):**
* Voice tab label (default: "Voice")
* Chat tab label (default: "Chat")
### Header and modal tab
* **Header title** (default: "AI Assistant")
* **Header subtitle** (default: "Ready to help you ✨")
* **Modal title** (default: "Ready to chat?")
* **Start button text** (default: "Start Voice Chat")
* **Modal description** (default: "Click below to start your conversation")
### Chat settings tab
This tab is only visible when the widget mode includes chat (Chat Only or Voice & Chat).
* **Chat placeholder** (default: "Type your message...")
* **Send button label** (default: "Send message")
* **Show function calls:** When disabled (default), tool calls such as calendar lookups are hidden from the chat, keeping the conversation clean for visitors. Enable to show tool usage details.
**Clickable links in chat**
The chat widget supports markdown formatting. To include clickable URLs, use markdown link syntax in your assistant's prompt or initial message:
```
Check out our [latest offers](https://example.com/offers) or visit our [help centre](https://example.com/help).
```
Add an instruction to your assistant's prompt: "When sharing links or URLs, always format them as clickable markdown links" — this ensures the AI consistently outputs clickable links.
### Voice settings tab
This tab is only visible when the widget mode includes voice (Voice Only or Voice & Chat).
* **Connecting text** (default: "Connecting...")
* **Disconnect text** (default: "Disconnect")
* **Error text** (default: "Connection failed. Please try again.")
### Pre-chat form
Collect information from visitors before starting the conversation.
**Form configuration:**
* Pre-form title (default: "Before we start...")
* Pre-form description
* Submit button text (default: "Continue")
**Form fields:**
Add custom fields to collect visitor data:
| Setting | Description |
| ----------------- | ----------------------------------------------------------------------------------- |
| **Variable name** | Maps to your assistant's variables. Letters, numbers, dashes, and underscores only. |
| **Field label** | The label shown to visitors |
| **Field type** | Text, Email, Phone, or Textarea |
| **Required** | Makes the field mandatory |
| **Placeholder** | Placeholder text shown in the field |
| **Helper text** | Optional description below the field |
Form field names automatically map to your assistant's variables, making collected data available during conversations.
### AI response settings
**AI enabled:** When on (default), the AI assistant automatically responds to incoming messages. Turn this off to collect messages without AI replies — useful for manual-only workflows.
### Conversation webhook
**Webhook URL:** Enter a URL to receive a webhook notification whenever a new conversation starts via the widget. Use this to trigger automation flows, log events to your CRM, or notify your team in real time.
### Widget display
**Enable widget:** Master toggle that controls whether the widget loads on your website. When disabled, the widget won't appear even if the embed script is installed. Use this to temporarily hide the widget without removing code from your site.
## Live preview
At the top of the configuration panel, a live preview shows exactly how your widget will look and behave. The preview updates in real time as you change settings.
* **Copy preview URL** — copy the URL to open in a separate tab or share with your team.
* **Reset data** — clear stored conversation history, form submissions, and preferences to simulate a first-time visitor experience.
The preview is fully interactive. Click the widget button, fill out the pre-chat form, and start a real conversation to test your configuration before deploying.
## Installing the widget
Set up your widget options and click **Save**.
In the **Embed Code** section, click **Copy**.
Paste the script tag before the closing `` tag on every page where you want the widget to appear:
```html theme={null}