# Web Chat

> Engage website visitors with a customizable live chat widget — AI agents, action buttons, preset questions, and calendar booking.

Source: https://docs.graph8.com/engage/web-chat/

Web Chat adds a live chat widget to your website. Assign AI agents to handle conversations, configure action buttons, suggest questions to visitors, and let prospects book meetings — all without leaving your site.

## Chat Agents

Chat agents are AI-powered assistants that handle conversations on your website. You can assign different agents to different pages.

| Setting | What It Controls |
|---------|-----------------|
| **Agent name** | Which AI agent handles conversations on matched pages |
| **URL filter** | URL paths where this agent is active (e.g., `/pricing`, `/product`) |
| **Active** | Enable or disable the agent |
| **Default** | Used when no URL-specific agent matches |

### How Agent Routing Works

1. A visitor opens the chat widget on a page
2. graph8 checks the page URL against all configured agents' URL filters
3. The matching agent handles the conversation
4. If no URL filter matches, the default agent responds

You can configure multiple agents — for example, a product-focused agent on `/product` pages and a support agent on `/help` pages.

## Chat Buttons

Add action buttons to the chat widget for quick visitor actions:

| Action Type | What It Does |
|-------------|-------------|
| **Link** | Opens a URL (e.g., documentation, pricing page) |
| **Question** | Sends a preset question to the AI agent |
| **Calendar** | Opens a booking page for scheduling a meeting |

Each button has:
- **Label** — display text
- **Action and value** — what happens when clicked (URL, question text, or calendar slug)
- **Icon** — optional icon
- **Category** — group related buttons together
- **Paths** — URL paths where the button appears (show different buttons on different pages)

## Preset Questions

Suggest conversation starters to visitors so they know what to ask:

- Set questions per category
- Target specific pages with URL path filters (or show on all pages)
- Toggle individual questions on or off

Preset questions appear when the visitor first opens the chat, reducing friction and guiding the conversation toward topics your AI agent handles well.

## Widget Design

Customize the widget's look and feel to match your brand:

### Colors & Layout

| Setting | Default |
|---------|---------|
| **Primary color** | #7E2DF3 |
| **Secondary color** | #f8fafc |
| **Font family** | Inter |
| **Border radius** | 0.5rem |
| **Widget width** | 350px |
| **Dark mode** | Off |

### Message Styling

| Setting | What It Controls |
|---------|-----------------|
| **User message background** | Color behind visitor messages |
| **User message text** | Text color for visitor messages |
| **Assistant message background** | Color behind AI responses |
| **Assistant message text** | Text color for AI responses |

### Header & Button

| Setting | What It Controls |
|---------|-----------------|
| **Assistant name** | Name shown in the chat header |
| **Show header** | Toggle the header bar |
| **Header text color** | Color of the header text |
| **Floating button icon** | Icon style for the chat trigger button |
| **Floating button color** | Color of the trigger button |

## Calendar Integration

Visitors can book meetings directly from the chat widget using the calendar action button. Prospects can pick a time without leaving the conversation.

## Attachments, Voice Notes & Emoji

The chat composer supports rich media so visitors can share context that text alone can't convey.

### File Attachments

Visitors can attach files directly in the chat composer:

- **Images** — JPG, PNG, GIF, WebP
- **Documents** — PDF and common document formats
- **Size limits** — enforced server-side to prevent abuse
- **SSRF protection** — uploads are validated and isolated; remote URLs are not fetched on the server

Once uploaded, the attachment is rendered inline in the conversation and persists across history reloads — if a visitor returns later, their previous attachments still display correctly.

### Voice Notes

Visitors (and your support team) can send voice notes from the composer:

- Click the microphone icon to start recording
- Click again to stop and send
- Voice notes appear in the conversation with a built-in player (play, pause, scrub)
- Codec-flexible: graph8 accepts codec-parameterized voice MIME types from any modern browser
- Voice notes are transcribed and fed to the AI agent so it can respond in context

### Emoji Picker

The composer includes an emoji picker for quick reactions and lighter conversational tone — useful for support agents handling friendly support flows.

## Support Avatars

When a human support agent joins a conversation, their avatar appears in the chat header so visitors know they're talking to a real person. If no custom avatar is set, graph8 falls back to the agent's initials. This applies in both the public widget and the internal-support widget view.

## Hiding the Chat Widget

Visitors can collapse the chat whenever they want. Click the **arrow** tab on the edge of the open chat panel to hide it. The floating chat button stays on the page, so visitors can reopen the conversation any time.

![Click the arrow tab to hide the chat widget — the floating button stays so visitors can reopen it](https://docs.graph8.com/images/engage/web-chat-hide-widget.png)

> **Tip:**
> Set up URL-specific agents for your highest-traffic pages. A pricing page agent trained on your pricing and packaging will convert better than a generic assistant. Use preset questions to guide visitors toward booking a demo.

## Next Steps

- [Web Chat Install and Verified Login →](https://docs.graph8.com/engage/web-chat-install/) — Snippet, Sales and Support, signed logins, logout and key rotation
- [Appointments →](https://docs.graph8.com/engage/appointments/) — Manage booked meetings and CRM sync
- [Inbox →](https://docs.graph8.com/engage/inbox/) — View chat conversations alongside email and LinkedIn
- [Connections →](https://docs.graph8.com/engage/connections/) — Connect your CRM for contact sync