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

# Chat Widget Overview

> Introduction to the Cosmo Chatbot widget - an embeddable AI-powered chat interface with 3D avatar support

## What is the Chat Widget?

The Chat Widget is an embeddable AI-powered chat interface that you can add to any website. It provides your visitors with instant access to a conversational AI assistant trained on your knowledge base.

## Key Features

<CardGroup cols={2}>
  <Card title="AI-Powered Conversations" icon="robot">
    Natural language conversations powered by your custom-trained AI agent.
  </Card>

  <Card title="3D Avatar" icon="user-robot">
    Interactive animated character with lip-sync for spoken responses.
  </Card>

  <Card title="Multi-Language Support" icon="globe">
    Support for multiple languages with real-time translation.
  </Card>

  <Card title="Customizable Design" icon="palette">
    Match your brand colors, fonts, and styling.
  </Card>
</CardGroup>

## How It Works

<Steps>
  <Step title="Create Your Agent">
    Set up an AI agent in your workspace and configure its personality and knowledge base.
  </Step>

  <Step title="Add Knowledge Sources">
    Train your agent with website content, documents, Q\&A pairs, or custom text.
  </Step>

  <Step title="Customize Appearance">
    Configure the widgets colors, avatar, welcome message, and suggested questions.
  </Step>

  <Step title="Embed on Your Website">
    Copy the embed code and add it to your website to make your agent live.
  </Step>
</Steps>

## Widget Components

The chat widget consists of several components that work together:

| Component             | Description                                          |
| --------------------- | ---------------------------------------------------- |
| **Chat Button**       | Floating button that visitors click to open the chat |
| **Chat Panel**        | Main conversation area with message input            |
| **Avatar Panel**      | 3D animated character (desktop only)                 |
| **Language Selector** | Interface for switching languages                    |
| **Header Controls**   | Reset, language, and avatar toggle buttons           |

## Platform Support

| Platform             | Support Level                              |
| -------------------- | ------------------------------------------ |
| **Desktop Browsers** | Full support including 3D avatar and audio |
| **Mobile Browsers**  | Full chat experience, no avatar panel      |
| **Tablets**          | Responsive design adapts to screen size    |

<Note>
  The 3D avatar panel is optimized for desktop screens (800px+ width) to ensure the best visual experience and performance.
</Note>

## Next Steps

<CardGroup cols={2}>
  <Card title="Embedding Guide" icon="code" href="/chat-widget/embedding">
    Learn how to add the widget to your website.
  </Card>

  <Card title="User Features" icon="sparkles" href="/chat-widget/user-features">
    Explore the interactive features available to visitors.
  </Card>

  <Card title="Styling" icon="palette" href="/customization/styling">
    Customize the widget appearance.
  </Card>

  <Card title="Widget Settings" icon="sliders" href="/customization/widget">
    Configure welcome messages and questions.
  </Card>
</CardGroup>