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

# ClientX Chat Widget: AI Agent for Your Website

> The ClientX chat widget is an AI agent that answers visitor questions, captures leads, and books demos — powered by your own knowledge base.

The ClientX widget is an AI-powered chat agent that lives on your website as a floating launcher bar at the bottom of every page. When a visitor clicks it, the widget opens a full chat panel that draws answers directly from your knowledge base — giving each visitor instant, accurate responses without a human in the loop. Behind the scenes, the widget also captures leads, books demos, and proactively engages high-intent visitors before they bounce.

## Key capabilities

<CardGroup cols={2}>
  <Card title="AI Q&A from your knowledge base" icon="sparkles">
    The widget answers any question a visitor asks by searching your connected knowledge base — docs, URLs, uploaded files, and more. Answers stream in real time and include source citations.
  </Card>

  <Card title="Lead capture" icon="user-plus">
    When a visitor shares their email or phone, ClientX captures it as a lead automatically. Leads appear in your dashboard instantly with conversation context attached.
  </Card>

  <Card title="Demo booking" icon="calendar">
    Visitors can book a demo directly inside the widget. ClientX finds available slots from your calendar and confirms the booking — no redirect required.
  </Card>

  <Card title="Proactive engagement (SmartBar)" icon="bell">
    The SmartBar proactively surfaces a contextual message after a configurable delay — catching high-intent visitors before they leave. On mobile it injects into the launcher placeholder to keep the UI clean.
  </Card>

  <Card title="Conversation history" icon="clock-rotate-left">
    Returning visitors can resume previous conversations using the caret dropdown in the widget header. The last four sessions are stored locally and displayed with relative timestamps.
  </Card>

  <Card title="File attachments" icon="paperclip">
    Visitors can attach images and PDFs directly in the chat. Attachments are uploaded to your server and passed to the AI alongside the message for context-aware responses.
  </Card>
</CardGroup>

## How the widget works

When a visitor lands on your page, the widget script loads and immediately opens a real-time connection to the ClientX server. The server fetches your workspace configuration — including branding, CTAs, SmartBar settings, and suggested questions — and delivers it to the widget before the first interaction.

From there, every message the visitor sends is streamed back as a response from your AI agent, which searches your knowledge base in real time. The entire conversation is stored server-side so you can review it in the **Conversations** dashboard.

```
Visitor types a message
        ↓
Widget sends message to ClientX server
        ↓
Server searches knowledge base + runs AI
        ↓
Server streams response back token by token
        ↓
Widget renders streamed text in real time
        ↓
Server delivers CTAs + follow-up suggestions
```

Suggested questions can be generated automatically by the AI based on the visible page content — the widget scrapes headings, paragraphs, and meta descriptions and sends them to the ClientX server. In **manual** mode you supply a fixed list instead.

## Widget UI

The widget renders in a Shadow DOM element fixed to the bottom of the viewport — completely isolated from your page's CSS. It has two states:

**Collapsed (launcher bar)**
A white pill bar sitting at the bottom-center of the page. It displays an animated rotating placeholder (your suggested questions or a fallback), a ✦ spark icon in your brand color, and a send button. On desktop, hovering over any `h1`–`h3` heading on your page triggers a floating **"Ask \[Agent]"** badge that opens the widget with that heading as the first message.

**Open (chat panel)**
A frosted-glass panel that appears above the launcher. It shows:

* A header with your agent avatar, name, and an online status indicator
* A welcome message and up to four suggested question chips
* The chat message thread with streamed AI responses
* A floating input pill below the panel for typing new messages
* An optional CTA button bar above the input

<Note>
  The widget does not use any cookies. Conversation history and dismissed-state flags are stored in the visitor's `localStorage` under keys prefixed with `cx_`.
</Note>

## Next steps

<CardGroup cols={3}>
  <Card title="Configuration" icon="sliders" href="/widget/configuration">
    Customize colors, agent name, welcome message, SmartBar, and suggested questions.
  </Card>

  <Card title="CTAs" icon="arrow-pointer" href="/widget/ctas">
    Add call-to-action buttons for booking, sales chat, and embedded forms.
  </Card>

  <Card title="Campaigns" icon="bullhorn" href="/widget/campaigns">
    Create targeted conversation flows that auto-open on specific pages.
  </Card>
</CardGroup>