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

# Quick Start

> Get Vaile running on your dealership website in under 5 minutes

## Overview

This guide will walk you through the fastest way to add Vaile's AI-powered chat widget to your dealership website. By the end, you'll have a fully functional chat assistant capturing leads 24/7.

## Prerequisites

Before you begin, make sure you have:

<CardGroup cols={2}>
  <Card title="Vaile Account & Organization" icon="user">
    Complete account setup at [app.vaile.ai](https://app.vaile.ai) including creating your dealership organization
  </Card>

  <Card title="Website Access" icon="globe">
    Access to add HTML code to your website
  </Card>
</CardGroup>

<Note>
  **New to Vaile?** Follow our [Account Setup Guide](/account-setup) first to create your dealership organization and invite team members.
</Note>

## Step 1: Get Your Widget Key

1. Log in to your [Vaile Dashboard](https://app.vaile.ai)
2. Navigate to **Setup** → **Installation**
3. Copy your unique widget key

<Note>
  Your widget key looks like: `wk_1234567890abcdef`
</Note>

## Step 2: Add the Widget Script

Add this script just before the closing `</body>` tag on every page where you want the chat widget to appear:

```html theme={null}
<!-- Vaile Chat Widget -->
<script src="https://embed.vaile.ai/chat-widget-magic.iife.js"></script>
<script>
  initChatWidgetMagic({
    widget_key: 'YOUR_WIDGET_KEY',
    apiUrl: 'https://api.vaile.ai/api/assistant'
  });
</script>
```

<Warning>
  Replace `YOUR_WIDGET_KEY` with the actual widget key from your dashboard
</Warning>

### Example Implementation

Here's how it looks in a typical HTML page:

```html theme={null}
<!DOCTYPE html>
<html>
<head>
    <title>Your Dealership</title>
</head>
<body>
    <!-- Your website content -->

    <!-- Vaile Chat Widget -->
    <script src="https://embed.vaile.ai/chat-widget-magic.iife.js"></script>
    <script>
      initChatWidgetMagic({
        widget_key: 'wk_1234567890abcdef',
        apiUrl: 'https://api.vaile.ai/api/assistant'
      });
    </script>
</body>
</html>
```

## Step 3: Verify Installation

After adding the script:

1. **Refresh your website** - The chat widget should appear in the bottom-right corner
2. **Click the chat icon** - The chat interface should open
3. **Send a test message** - You should receive an AI-powered response

<Tip>
  If the widget doesn't appear, check your browser's console for any error messages
</Tip>

## Step 4: Customize Your Widget

Head to your dashboard's Setup section in the left-hand panel to customize:

* **Dealership Info**: Your dealership details and business information
* **Locations**: Manage your dealership locations
* **AI Playbook**: Configure your AI assistant's knowledge and resources
* **Widget Styling**: Colors, position, and greeting message

Navigate to **Setup** in the left-hand panel to access these options.

## What's Next?

<CardGroup cols={2}>
  <Card title="Widget Customization" icon="paint-brush" href="/widget/customization">
    Learn how to match the widget to your brand
  </Card>

  <Card title="Managing Leads" icon="users" href="/dashboard/managing-leads">
    Discover how to track and convert captured leads
  </Card>

  <Card title="Chat Settings" icon="cog" href="/dashboard/chat-settings">
    Configure advanced chat behavior and responses
  </Card>

  <Card title="Getting Help" icon="life-ring" href="/widget/troubleshooting">
    Find answers to common questions
  </Card>
</CardGroup>

## Need Help?

If you encounter any issues:

* Check our [Troubleshooting Guide](/widget/troubleshooting)
* Contact support at [support@vaile.ai](mailto:support@vaile.ai)
* Visit your [Dashboard](https://app.vaile.ai) for live chat support
