AI Bot Widget Real-Time Chat & Live Handover (AI बॉट विजेट रियल-टाइम एडमिन चैट)

The platform employs a dual-channel real-time pipeline:

1. Visitor-Facing Pub/Sub (Ably Realtime):

   • The embeddable widget (chatbot-widget.js) dynamically renders an isolated sandboxed iframe.
   • The client subscribes to an encrypted Ably channel: chat:[chatbotId]:[sessionId].
   • When an admin sends a reply from the dashboard, it is pushed directly to this channel and renders in the visitor's widget within under 80ms without polling or page refreshes.

2. Internal Staff Real-Time Mesh (Socket.io):

   • Admin dashboards connect to the primary WebSocket server (NEXT_PUBLIC_SOCKET_URL).
   • Each admin joins their personal authenticated room (user_[adminUserId]).
   • When a visitor requests an agent or sends a message, the server emits receive-message and conversation-updated events.
   • The frontend hook (useSocketHandlers.ts) plays an immediate audio chime, requests desktop push notification, and moves the chat thread to the top of the queue.

+------------------+         REST POST          +-----------------------+
|  Website Visitor | -------------------------> |  Backend API Server   |
|  (Widget Iframe) | <------------------------- | (Express + MongoDB)   |
+------------------+     Ably Realtime Pub      +-----------------------+
        ^                 chat:botId:sessionId              |
        |                                                   | Socket.io
        |                                                   | user_[adminId]
        |                                                   v
        |           POST /agent/conversation/reply      +-----------------------+
        +---------------------------------------------- | Admin Live Dashboard  |
                                                        | (/ai-live-agent)      |
                                                        +-----------------------+

Step 1: Configure Escalation in AI Bot Studio

1. Open AI Bot Studio (/ai-bot-studio) and select your chatbot.
2. Go to the Configure tab and set Interaction Type to Hybrid (AI + Human Handover).
3. Specify your Escalation Keywords:
   • Default triggers: human, agent, support, representative, talk to someone, help.
   • Add custom triggers: pricing, manager, refund, urgent, custom quote.
4. Set your AI Handoff Message:
   • e.g., "Connecting you with a senior product specialist now. Please hold on for a moment."
5. Set your Fallback Message for times when no human agents are currently online.

Step 2: Embed the Universal Widget

1. Open the Embed tab in AI Bot Studio.
2. Copy the snippet and paste it right before the </body> tag on your website:

   <script 
     src="https://siegfriedoutreach.com/js/chatbot-widget.js" 
     data-chatbot-uuid="YOUR_CHATBOT_ID" 
     data-position="bottom-right" 
     async>
   </script>

Step 3: Monitor Inbound Requests in AI Live Agent (/ai-live-agent)

1. Navigate to AI Live Agent (/ai-live-agent) or the Shared Inbox (/social-media/shared-inbox).
2. When a visitor triggers escalation:
   • An audible chime alert plays immediately.
   • A browser notification displays the visitor's first message and location.
   • The conversation row highlights in real time with an Online pulse indicator.

Step 4: Live Messaging & Takeover

1. Select the conversation to review the visitor's full dialogue history with the AI bot.
2. Type your message in the reply input box.
3. Send Attachments: Click the paperclip icon to send product brochures, invoices, screenshots, or PDF guides.
4. AI Copilot Suggestions: Click the ✨ AI Suggest button to generate an instant context-aware smart response draft, review it, edit if necessary, and dispatch.
5. Internal Team Notes: Toggle the composer to Note to leave private internal comments (marked with 🔒) visible only to your staff.

Step 5: Resolve and Hand Back to AI

1. Once the customer's query is fulfilled, click Resolve Chat.
2. The system sends a resolution confirmation notice and switches isHandedOffToHuman back to false.
3. Future inquiries by the visitor will once again be handled automatically by the AI bot unless escalated again.

🛍️ 1. D2C E-Commerce Brand (High-Ticket Fashion & Luxury Watches)

• Challenge: Visitors browsing luxury watches ($1,500+) abandoned cart when having doubts about warranty, sizing, or international shipping.
• Solution: The AI Bot handled standard catalog queries. If a customer spent more than 3 minutes on checkout or typed "discount on bulk purchase", the bot handed off the chat to an online sales manager.
• Impact: Increased checkout conversions by 42% and recovered $28,000 in abandoned cart revenue within the first 30 days.

🏥 2. Multi-Specialty Hospital & Dental Clinic (Critical Patient Triage)

• Challenge: Patients asking about post-surgical pain or urgent appointment slots needed immediate human attention instead of generic bot answers.
• Solution: Configured keywords like "pain", "emergency", "doctor unavailable", and "bleeding" to instantly bypass AI and ring the emergency nursing desk.
• Impact: Patient response time dropped from 18 minutes to 12 seconds, achieving a 99.4% patient satisfaction rating.

🏢 3. Real Estate Agency (Luxury Villas & Commercial Office Leasing)

• Challenge: High-net-worth buyers required confidential pricing, customized payment schedules, and private weekend site visit bookings.
• Solution: The AI Bot collected buyer budget, preferred locality, and phone number. Once qualified as an accredited buyer, the senior property broker took over the live widget chat in real time.
• Impact: Closed 7 commercial lease agreements worth $180,000 ARR directly through the live chat widget takeover.

💻 4. B2B Enterprise SaaS Platform (Security & Custom SLAs)

• Challenge: Enterprise buyers asked bespoke compliance questions (SOC2 Type II, HIPAA, Dedicated VPC hosting) that standard knowledge bases couldn't answer conclusively.
• Solution: Hybrid handoff routed compliance queries directly to the solutions architect on duty, with AI Copilot drafting answers from the internal technical handbook.
• Impact: Shortened enterprise sales cycle from 45 days down to 14 days.