# WebDialogAI Documentation — Complete Reference

> Technical documentation for WebDialogAI — the AI-powered customer support chat widget.

## Quick Start Guide

Get your AI-powered chat widget live on your website in under 5 minutes.

### Step 1: Create Your Account
Sign up at webdialogai.com using Google, GitHub, or Microsoft account — or create an account with email and password.

### Step 2: Set Up Your Knowledge Base
1. Navigate to Knowledge Base in the dashboard
2. Enter your website URL
3. Click Add & Crawl — the AI indexes your site content
4. Wait for the crawl to complete (usually 1-2 minutes)

### Step 3: Embed the Widget
Copy the embed code from your Dashboard and paste it before the closing </body> tag:

```html
<script
  src="https://cdn.webdialogai.com/widget.js"
  data-tenant-id="YOUR_TENANT_ID"
  async>
</script>
```

### Step 4: Test It Out
Visit your website and click the chat button. Ask a question — the AI responds using your website content.

## Widget Installation Methods

### Method 1: Script Tag (Recommended)
```html
<script
  src="https://cdn.webdialogai.com/widget.js"
  data-tenant-id="YOUR_TENANT_ID"
  async>
</script>
```

### Method 2: npm Package
```bash
npm install @webdialogai/widget
```
```javascript
import { ChatWidget } from '@webdialogai/widget';
ChatWidget.init({ tenantId: 'YOUR_TENANT_ID', position: 'bottom-right' });
```

### Method 3: React Component
```bash
npm install @webdialogai/react
```
```jsx
import { ChatWidget } from '@webdialogai/react';
function App() {
  return <ChatWidget tenantId="YOUR_TENANT_ID" position="bottom-right" />;
}
```

## Widget Customization

Customize your widget from the dashboard Settings > Widget page:
- **Colors:** Primary color, text color, background
- **Position:** Bottom-right or bottom-left
- **Branding:** Custom logo and avatar
- **Messages:** Welcome message, suggested questions, offline message
- **Behavior:** Auto-open, business hours display, pre-chat form
- **Topic Guard:** Block off-topic conversations

## Knowledge Base Setup

Your knowledge base powers the AI responses. Sources include:
- **Website Crawl:** Enter your URL and the AI indexes all pages
- **PDF Upload:** Upload product manuals, policy documents, etc.
- **Q&A Pairs:** Add custom question-answer pairs for specific topics
- **Product Catalog:** Import products for inline recommendations

### Similarity Threshold
Configure how closely a question must match your knowledge base content (0.0 to 1.0). Lower values return more results but may be less accurate.

## Agent Console

The agent console is a web-based dashboard for your support team:
- **Conversation List:** Real-time list with status indicators (AI handling, pending, assigned)
- **Live Chat:** Send messages with typing indicators and read receipts
- **Canned Responses:** Pre-written reply templates with keyboard shortcuts
- **Customer Context:** View visitor information, conversation history, and CSAT ratings
- **Queue Management:** See queue position, reassign conversations, transfer between agents
- **Notifications:** Email and push alerts for new conversations

## Platform Integration Guides

### WordPress
1. Log in to WordPress admin
2. Go to Appearance > Theme File Editor
3. Select header.php
4. Paste the widget script tag before </head>
5. Save changes

### React
1. Install: `npm install @webdialogai/react`
2. Import ChatWidget component
3. Add to your app layout with tenantId prop

### Next.js
1. Install: `npm install @webdialogai/react`
2. Create a client component wrapper
3. Add to your root layout

### Order Tracking
1. Enable order tracking in Dashboard > Settings
2. Configure your order API endpoint
3. The widget automatically shows order status to visitors

## Glossary of Terms

- **AI Chatbot:** An automated conversational agent powered by artificial intelligence that can understand and respond to user questions
- **RAG (Retrieval-Augmented Generation):** A technique that retrieves relevant documents from a knowledge base and uses them as context for AI-generated responses
- **CSAT (Customer Satisfaction Score):** A metric measuring customer satisfaction, typically on a 1-5 star scale collected after conversations
- **Handover:** The process of transferring a conversation from the AI chatbot to a human support agent
- **Knowledge Base:** A collection of documents, FAQs, and content that the AI uses to answer questions
- **Embeddings:** Mathematical vector representations of text that enable semantic similarity search
- **Semantic Search:** Search that understands meaning and context rather than just matching keywords
- **Tenant:** An isolated workspace in WebDialogAI, typically representing one business or website
- **Widget:** The embeddable chat interface that appears on your website
- **Pre-Chat Form:** A form shown to visitors before starting a conversation to collect contact information
- **Topic Guard:** A feature that blocks off-topic questions to keep conversations focused on your business
- **Queue Management:** System for managing visitor wait times when all agents are busy
- **Canned Response:** Pre-written reply templates that agents can use with keyboard shortcuts
- **SSE (Server-Sent Events):** A technology for streaming real-time AI responses to the chat widget

## Analytics

WebDialogAI provides analytics including:
- Total conversations and resolution rates
- Average CSAT scores with feedback
- Knowledge gap detection (questions the AI couldn't answer)
- Agent performance metrics
- Daily trend charts

## Legal

- Privacy Policy: https://docs.webdialogai.com/docs/legal/privacy-policy
- Terms of Service: https://docs.webdialogai.com/docs/legal/terms-of-service
- Cookie Policy: https://docs.webdialogai.com/docs/legal/cookie-policy
- Data Processing Agreement: https://docs.webdialogai.com/docs/legal/dpa

## Links

- Website: https://webdialogai.com
- Documentation: https://docs.webdialogai.com
- Contact: https://docs.webdialogai.com/contact
- ROI Calculator: https://docs.webdialogai.com/tools/roi-calculator