> ## Documentation Index
> Fetch the complete documentation index at: https://docs.ticketcord.com/llms.txt
> Use this file to discover all available pages before exploring further.

# Web Chat Widget

> Embed a live chat widget on your website, powered by your Discord ticket system

The Web Chat Widget lets your website visitors open support tickets and chat with your team in real time — without ever leaving your site. Messages are relayed to a Discord channel where your staff responds as usual, and replies appear instantly in the visitor's browser.

<Info>
  The Web Chat Widget is a **Pro** feature and is currently in **beta**. [Upgrade your plan](https://ticketcord.net/pricing) to access the widget.
</Info>

## How It Works

<Steps>
  <Step title="Visitor opens the widget">
    A chat bubble appears on your website. Visitors click it, fill out a short form (name, email), and start typing.
  </Step>

  <Step title="Ticket is created in Discord">
    TicketCord creates a private channel in your server with the visitor's messages, file attachments, and online status.
  </Step>

  <Step title="Staff responds in Discord">
    Your team replies in the Discord channel. Messages, typing indicators, and read receipts are relayed back to the visitor in real time.
  </Step>

  <Step title="Visitor sees the response instantly">
    The widget updates live via server-sent events — no page refresh needed.
  </Step>
</Steps>

## Features

<CardGroup cols={2}>
  <Card title="Real-Time Messaging" icon="comments">
    Bidirectional chat with typing indicators, read receipts, and delivery confirmations
  </Card>

  <Card title="File Attachments" icon="paperclip">
    Visitors can upload images, PDFs, and documents directly through the widget
  </Card>

  <Card title="Voice Messages" icon="microphone">
    Built-in voice-to-text dictation for hands-free message input
  </Card>

  <Card title="Pre-Chat Form" icon="rectangle-list">
    Collect visitor name and email before the conversation starts
  </Card>

  <Card title="Theming" icon="palette">
    Match your brand with custom colors, positioning, and light/dark mode support
  </Card>

  <Card title="Domain Restriction" icon="shield-halved">
    Lock the widget to specific domains so only your websites can use it
  </Card>
</CardGroup>

## What's Next

<CardGroup cols={2}>
  <Card title="Setup Guide" icon="rocket" href="/integrations/webchat-setup">
    Enable the widget and embed it on your website
  </Card>

  <Card title="Developer Reference" icon="code" href="/integrations/webchat-developer">
    Pre-fill fields, configure CSP, and advanced embedding options
  </Card>
</CardGroup>