From AI Chat to Live Agent: Build a Complete Customer Engagement Widget
AI chatbots are great at answering questions at 3 AM. But when a visitor asks about custom pricing, wants to negotiate a contract, or has a complaint that needs a human touch — you need a real person in the conversation. Fast.
Most platforms force you to choose: either a fully automated AI bot, or a traditional live chat tool. Orckai gives you both in a single widget. The AI handles the first line of support, and when a high-value moment happens, your team gets notified and can take over the conversation instantly — no page reload, no context lost, no separate tool.
This guide walks through how the entire system works, from the first AI response to a live agent reply.
The Full Picture: What You're Building
Here's the end-to-end flow your widget supports out of the box:
AI Responds
Visitor asks a question. AI answers using your knowledge base, tools, and agents.
Lead Captured
Visitor shares email, phone, or company — or AI extracts it mid-conversation.
Alert Triggered
Keyword match, lead data, or message count triggers an email notification.
Team Takes Over
Admin clicks the email link, finds the conversation, and takes over the chat.
Live Chat
Admin and visitor chat in real time. Release back to AI when done.
Let's break each layer down.
Layer 1: The AI Engine
Every widget is backed by a unified conversation engine that combines multiple AI capabilities in a single chat interface:
- Knowledge Base (RAG) — Upload your PDFs, docs, and spreadsheets. The AI retrieves relevant chunks and cites its sources inline, so visitors know where the answer came from.
- MCP Tools — Connect external APIs (your CRM, database, inventory system) so the AI can look up real data, not just static documents.
- Agent Capabilities — The AI can chain multiple tool calls, reason through complex queries, and execute multi-step workflows — all within the chat.
- Streaming Responses — Answers appear in real time, word by word, with tool activity indicators so the visitor sees what the AI is doing.
Prompt Templates: Each widget is powered by a configurable prompt template that controls which knowledge bases, MCP tools, and agent behaviors are available. Change the AI's personality, scope, and capabilities without touching code.
For most visitor questions — product info, pricing pages, documentation lookups — the AI handles everything automatically. But some conversations need a human.
Layer 2: Lead Capture
Before you can follow up with a visitor, you need to know who they are. The widget captures lead data in two ways:
Lead Form
An optional form appears at the start of the conversation asking for name, email, phone, and company. You control:
- Auto-show — Show the form immediately on chat open, or keep it collapsed (visitor sees a small dots icon to expand it).
- Re-prompt — If the visitor dismisses the form, it re-appears after a configurable number of messages (default: 3).
- Required fields — Choose which fields are required vs. optional.
Mid-Chat Extraction
Even without the lead form, the widget scans every message for email addresses and phone numbers. If a visitor types "reach me at sarah@acme.com", the system extracts and stores it automatically. No form needed.
Data handling: Lead data is sanitized, validated, and stored securely. Email and phone patterns are matched server-side. All data is organization-scoped — no cross-tenant access.
Layer 3: Smart Notifications
Lead capture is only useful if your team actually sees it. The notification system fires alerts through three independent triggers — whichever fires first wins:
| Trigger | Fires When | Default | Use Case |
|---|---|---|---|
| Lead Data | Visitor provides email, phone, or company | ON | Sales follow-up on identified leads |
| Message Count | Conversation reaches N messages (configurable) | OFF | Flag engaged visitors even without contact info |
| Keyword Match | Visitor message contains configured keywords | OFF | Instant alert on "pricing", "demo", "complaint", etc. |
Each trigger is independent. You can enable all three and the first one to match fires the notification. Server-side deduplication ensures each session only triggers once per day — no notification storms.
Notification Channels
- Email — HTML email with visitor info, conversation summary, PDF transcript attachment, geo-location from IP, and a "View Conversation & Take Over Chat" button that links directly to your admin dashboard.
- Webhook — JSON payload to any URL (Slack, Teams, Zapier, your CRM). Includes all visitor data, session info, and trigger reason.
- HubSpot — Auto-creates or updates a contact in HubSpot with lead data, logs an engagement note with conversation details.
Keyword example: Configure keywords like pricing, demo, cancel. When a visitor asks "Can you tell me about pricing for 500 users?", your sales team gets an email within seconds — with the full conversation attached as a PDF.
Layer 4: Live Agent Takeover
This is where it all comes together. Your team member receives the notification email, clicks the link, and lands on the Widget Management page. They find the conversation by its session ID, read the full chat history, and click "Take Over Chat".
What Happens When You Take Over
AI Paused
A flag is set. All new visitor messages bypass the AI engine completely.
Visitor Notified
Widget shows a green bar: "You're now chatting with a team member."
Real-Time Chat
Messages flow both ways in near real-time. Admin types in the dashboard, visitor sees it in the widget.
Release to AI
When done, click "Release to AI." The flag is cleared and the AI resumes.
From the Visitor's Perspective
The transition is seamless. They were chatting with the AI, and now they're chatting with a real person. The only visible change is a small green indicator at the top of the chat. When the agent releases, the indicator disappears and the AI picks up where it left off — with full conversation context.
From the Admin's Perspective
The conversation thread in the admin dashboard shows all messages in real time. A reply text field appears with a send button. Visitor messages show up automatically as they arrive. A status indicator shows whether the visitor is still on the page — if they've left, you'll see a "Visitor appears to have left" warning so you're not typing into the void.
Built-In Safety Nets
Live chat between humans and AI requires guardrails. Two things can go wrong: the visitor leaves, or the admin forgets to release the conversation.
Visitor Left Detection
The widget sends periodic heartbeats. If the visitor closes the tab, the heartbeat stops and the admin sees a warning shortly after. Replies are still saved — the visitor will see them if they return.
Auto-Release (3 Minutes)
If the admin stops polling (closed the tab, lost connection), the system auto-releases the conversation after a short timeout. The visitor gets the AI back without waiting or wondering.
Ownership Lock
Only the admin who took over can send replies. Other team members see the conversation is already claimed. No accidental double-replies or confused visitors.
Session Restore
If the visitor refreshes their browser during a takeover, the widget checks the conversation status on load and re-enters takeover mode automatically. No context lost.
How It Works Under the Hood
The takeover system uses a simple architecture with no WebSockets, no message queues, and no additional infrastructure:
| Component | How It Works |
|---|---|
| Takeover flag | An in-memory flag is checked on every chat request. If set, the AI is bypassed and the message is routed to the admin instead. |
| Persistence | Takeover state is durably stored in the database, surviving restarts and failovers. |
| Message delivery | Both sides poll for new messages over standard HTTPS. Works through all proxies, CDNs, and firewalls. |
| Heartbeats | Both admin and visitor send periodic heartbeats. If either side goes silent, the system detects it and responds accordingly. |
| Message storage | Admin replies are stored in the same conversation thread as AI messages — the visitor sees a seamless history. |
| Deduplication | Both widget and admin dashboard track which messages they've already rendered, preventing duplicates even under unstable network conditions. |
Why polling instead of WebSockets? Zero new infrastructure. Works through every proxy, CDN, and firewall. The latency is imperceptible for human conversation. And it uses the same HTTPS stack the widget already relies on — no new ports, protocols, or libraries.
How This Compares
Most AI platforms treat chatbot and live chat as separate products. Here's how the integrated approach stacks up:
| Capability | Orckai Widget | Typical AI Chatbot | Typical Live Chat Tool |
|---|---|---|---|
| AI-powered responses | ✓ | ✓ | — |
| Knowledge base / RAG | ✓ | ✓ | — |
| MCP tools & agents | ✓ | — | — |
| Lead capture | ✓ | Sometimes | ✓ |
| Smart notifications (keyword, lead, count) | ✓ | — | Basic |
| Live agent takeover | ✓ | — | ✓ |
| Seamless AI ↔ human transition | ✓ | — | — |
| Auto-release on inactivity | ✓ | — | Sometimes |
| CRM integration (HubSpot) | ✓ | — | ✓ |
| Self-hostable | ✓ | Rare | Rare |
The key differentiator: you don't need two tools. The AI handles volume, the notifications surface the important conversations, and the takeover lets your team step in exactly when it matters — all in one widget, one script tag, one dashboard.
Getting Started
Setting this up takes about 10 minutes:
- Create a widget — Go to Widget Management, create a new widget, assign a prompt template and knowledge base.
- Configure lead form — Enable the lead form in the widget's Theme tab. Choose which fields to show and whether it auto-opens.
- Set up notifications — In the Notifications tab, add email recipients and configure your triggers. Add keywords like
pricing,demo,support. - Embed on your site — Copy the script tag and paste it into your website's HTML. One line of code.
- Wait for the first notification — When a visitor triggers your criteria, you'll get an email with a link to take over.