LiveChat Overview

LiveChat is a built-in website chat widget integrated with your Cloud-PBX:

Key Features:

• Real-time messaging on your website
• No third-party service required
• Fully customizable appearance
• Mobile-responsive design
• File sharing and rich media
• Typing indicators and read receipts
• Pre-chat forms for customer info
• Offline message capture
• Chatbot integration
• Conversation history

Use Cases:

• Website visitor support
• Sales inquiries and lead generation
• Product questions during shopping
• Technical support
• Appointment scheduling
• Instant customer engagement

Configuration

Quick Start

1. Enable LiveChat: Activate widget in Cloud-PBX
2. Configure General Settings: Set business hours, language in General Settings
3. Customize Appearance: Match your brand in Appearance
4. Configure Messages: Set up routing and auto-responses in Message Settings
5. Install Widget: Add code snippet to your website
6. Test: Verify chat works on your site
7. Launch: Start engaging with website visitors

LiveChat vs Other Channels

Widget Features

Visitor Experience:

• Chat button appears on website (bottom-right typically)
• Click button → Chat window opens
• Optional pre-chat form (name, email, question)
• Real-time messaging with agent
• See typing indicators
• Receive/send files and images
• Rate conversation after resolution
• Transcript emailed after chat

Agent Experience:

• Unified inbox with all messaging channels
• See visitor context (current page, referrer, location)
• View conversation history
• Transfer chats between agents
• Canned responses and templates
• File/image sharing
• Internal notes
• End chat when resolved

Proactive Features:

• Auto-trigger chat invite after X seconds on page
• Target specific pages (e.g., pricing page)
• Behavioral triggers (exit intent, scroll depth)
• Returning visitor recognition
• Custom messages per page/trigger

Widget Behavior

Online Status:

Agents Available (Green):
- Chat button: "Chat with us! 💬"
- Instant connection to available agent
- Fast response expected

Agents Busy (Yellow):
- Chat button: "Chat with us (all agents busy)"
- Message queued, customer waits
- Position in queue shown

Agents Offline (Red/Gray):
- Chat button: "Leave us a message"
- Offline message form shown
- Converted to ticket/email
- Response when agents return

Visitor Tracking:

• Current page URL
• Page title
• Time on page
• Referrer source (Google, Facebook ad, direct)
• Geographic location (city, country)
• Device type (desktop, mobile, tablet)
• Browser information
• Previous chats (returning visitor)

Chat States:

• New: Customer initiated, waiting for agent
• Active: Agent assigned, conversation ongoing
• Waiting: Customer hasn't responded (timeout warning)
• Resolved: Chat ended, issue resolved
• Abandoned: Customer left without resolution

Installation

Add Widget to Website:

<!-- Cloud-PBX LiveChat Widget -->
<script>
  (function(w,d,s,u) {
    w.CloudPBXChat = {
      widgetId: 'YOUR_WIDGET_ID',
      apiUrl: 'https://your-pbx-domain.com'
    };
    var h = d.getElementsByTagName(s)[0],
        j = d.createElement(s);
    j.async = true;
    j.src = u;
    h.parentNode.insertBefore(j,h);
  })(window,document,'script','https://your-pbx-domain.com/livechat.js');
</script>

Mobile Responsiveness

Mobile Behavior:

• Widget adapts to screen size automatically
• On mobile: Chat button bottom-right corner
• Tap button → Full-screen chat window
• Easy typing on mobile keyboard
• File upload from camera or gallery
• Swipe to close chat

Mobile Optimization:

• Large tap targets (44x44px minimum)
• Readable text size (16px+)
• Efficient data usage
• Fast load time (<1 second)
• Works on all devices (iOS, Android, tablets)

Performance Optimization

Fast Loading:

• Asynchronous loading (doesn't block page)
• Lazy load (loads after page content)
• Small file size (<50KB compressed)
• CDN delivery
• Browser caching

SEO-Friendly:

• No impact on search rankings
• Doesn't block content crawling
• Accessible (screen reader compatible)
• No intrusive interstitials

Privacy & Compliance

Data Collection:

• Chat transcripts stored encrypted
• Personal info (name, email) collected with consent
• IP address and location for context
• GDPR, CCPA compliant
• Data retention policy configurable

Cookie Usage:

• Session cookie for conversation continuity
• Visitor tracking cookie (optional)
• Consent banner integration
• Respect Do Not Track

GDPR Compliance:

• Privacy policy link in widget
• Data access requests honored
• Data deletion on request
• Consent before collecting personal info
• Data processed in EU (if applicable)

Use Case Examples

E-Commerce Support:

Visitor on product page → Widget: "Questions about [Product Name]?"
Visitor clicks → "Yes, what's the return policy?"
Agent: "Returns accepted within 30 days. Free return shipping!"
Visitor: "Great, I'll order now"
Agent: "Awesome! Need help with anything else?"
Conversion: Product purchased

Lead Generation:

Visitor on pricing page for 2 minutes → Proactive invite
Widget: "Hi! 👋 Need help choosing a plan?"
Visitor: "Yes, what's the difference between plans?"
Agent: [Explains differences, identifies needs]
Agent: "Would you like to schedule a demo?"
Visitor: "Sure!"
Agent: [Schedules demo, captures lead]

Technical Support:

Visitor on help page → Clicks chat
Visitor: "I can't log in to my account"
Agent: "I can help! What's your email address?"
Visitor: provides email
Agent: [Looks up account] "I see the issue. Try resetting your password: [link]"
Visitor: "It worked! Thanks!"
Agent: "Great! Anything else?"

Best Practices

Widget Placement:

• Bottom-right corner (standard)
• Always visible (fixed position)
• Not covering important content
• Mobile-friendly size and position

Response Times:

• Instant response ideal (<30 seconds)
• Auto-greeting within 5 seconds
• Don't keep visitors waiting
• Show typing indicator when composing

Proactive Engagement:

• Trigger after 30-60 seconds on page
• Target high-intent pages (pricing, checkout)
• Personalized messages per page
• Don't be too aggressive (avoid popup fatigue)

Agent Training:

• Fast typing skills
• Product knowledge
• Friendly, professional tone
• Multi-tasking (handle 3-5 chats simultaneously)
• Use canned responses efficiently

Troubleshooting

Widget Not Appearing:

• Verify code installed correctly (before </body>)
• Check Widget ID correct
• Confirm API URL correct
• Clear browser cache
• Check JavaScript console for errors
• Verify widget enabled in Cloud-PBX settings

Chat Not Connecting:

• Check agents online and available
• Verify routing configured
• Review firewall rules (allow websockets)
• Test with different browser
• Check for JavaScript conflicts

Slow Performance:

• Optimize script loading (async)
• Use CDN delivery
• Check server response time
• Reduce custom CSS/styling
• Test website speed overall

Messages Not Delivering:

• Verify websocket connection active
• Check network connectivity
• Review Cloud-PBX status
• Test from different location/network
• Check browser console for errors

Next Steps