Live Chat System Overview

The Live Chat system supports AI-assisted chat through an embeddable web widget, with every message saved into the same conversation timeline you use for SMS, email, and voice.

Key Features

Web Widget

• Embeddable Chat Widget: Embed it on your website
• Customizable Branding: Match your website's design
• Mobile Responsive: Works on all devices
• Session Management: Persistent conversations across page loads
• Proactive Messaging (Optional): Show a friendly “Need help?” message based on time, scroll, idle, and more (when enabled)

Real-Time Communication

• Live Dashboard Updates: The admin dashboard receives real-time updates over WebSockets
• Multi-Client Support: Multiple dashboard tabs and teammates stay in sync

AI-assisted responses

• AI-assisted Replies: Context-aware assistant replies
• Conversation History: Maintains context across messages
• Handoff Support: Route to specialized assistants
• Intent Detection: Automatic intent classification

Conversation Management

• Unified View: All channels in one place
• Search and Filter: Find conversations quickly
• Export Functionality: Export conversations to CSV
• Real-Time Updates: Live conversation status

How It Works

1. Widget Initialization: Widget loads on customer's website
2. Session Creation: Unique session ID generated
3. Information Collection: Customer provides name and email (required before first message)
4. Message Sending: Customer sends message via widget
5. Conversation Creation: System creates or resumes conversation
6. AI Processing: Assistant generates response
7. Response Delivery: Response is returned to the widget immediately (HTTP request/response)
8. Dashboard Updates: The dashboard receives real-time updates (WebSocket)

Contact Information Collection

Required Information

Before customers can send their first message, the chat widget collects:

• Name: Customer's full name (required)
• Email: Email address (required)

Collection Process

1. Widget Opens: Customer clicks chat widget
2. Information Form: Widget displays form requesting name and email
3. Validation: System validates email format
4. Client Creation: Once both fields are collected, system automatically:
   • Creates or links to client record
   • Links conversation to client
   • Enables messaging

Automatic Extraction

The system also automatically extracts contact information from messages:

• Email: Detected from message content
• Phone: Extracted if mentioned in conversation
• Name Updates: Updates name if customer provides more complete information

Client Record Management

• Automatic Creation: Client records created when name and email are collected
• Cross-Channel Linking: Chat conversations linked to client records
• Duplicate Prevention: System matches by email to prevent duplicates
• Information Merging: Additional information from conversations merged into client record

Integration Points

The Live Chat system integrates with:

• Assistants + Routing Rules: Choose the best assistant per conversation
• Content Safety + Escalation: Guardrails for sensitive or high-risk situations
• SMS System: Shared conversation tracking
• Email System: Cross-channel context
• WebSocket Service: Real-time dashboard updates
• Billing System: Usage tracking

Widget Integration

Basic Integration

<script type="module">
  import { renderWebWidget } from "https://app.autoch.at/web-widget.js";
  renderWebWidget({
    tenantId: "your-tenant-id",
    apiUrl: "https://api.yourdomain.com",
    token: "your-widget-token",
    primaryColor: "#3B82F6",
    companyName: "Your Company",
    position: "bottom-right"
  });
</script>

React Integration

import { WebWidget } from './components/WebWidget';

<WebWidget
  tenantId="your-tenant-id"
  apiUrl="https://api.yourdomain.com"
  token="widget-token"
  primaryColor="#3B82F6"
  companyName="Your Company"
  position="bottom-right"
/>

Next Steps

• Setup Guide - Integrate the widget
• Widget Configuration - Customize the widget
• Conversations Guide - Manage chat conversations
• API Reference - Complete API documentation
• Troubleshooting - Common issues and solutions
• WebSocket Integration - Real-time communication details