Live Support Overview#

Live Support enables your team to provide real-time customer assistance directly on your website. Convert visitors into customers with instant, personalized support.

Key Features#

Embeddable Chat Widget#

Add live chat to any website with a simple code snippet:

<script>
  window.CommFlowConfig = {
    workspaceId: 'YOUR_WORKSPACE_ID'
  };
</script>
<script src="https://app.commflow.io/widget.js" async></script>

Find your workspace ID in Settings > Live Support > Widget Setup.

Customization Options#

Match the widget to your brand in Settings > Live Support:

• Colors: Primary color, background, text
• Position: Bottom-right or bottom-left
• Launcher: Icon, text, or custom image
• Greeting: Custom welcome message
• Team name: Display your support team name
• Agent photos: Show or hide agent avatars

Visitor Information#

See who you're talking to in real-time:

• Current page URL and navigation history
• Browser and device information
• Geographic location (city, country)
• Referral source
• Previous visit history
• Custom fields (if provided via widget config)

Conversation Management#

Real-Time Messaging#

• Instant message delivery via WebSocket
• Typing indicators show when visitors are composing
• Read receipts confirm message delivery
• Rich text formatting support
• File and image sharing (up to 25MB)

Assignment & Routing#

• Auto-assignment: Distribute chats evenly across available agents
• Manual assignment: Route to specific team members
• Transfer: Hand off conversations between agents
• Business hours: Set availability schedules

Canned Responses#

Save time with pre-written replies. Create shortcuts in Settings > Live Support > Canned Responses:

/thanks
→ "Thank you for contacting us! Is there anything else I can help you with?"

/hours
→ "Our support hours are Monday-Friday, 9am-6pm EST."

/pricing
→ "You can view our pricing plans at commflow.io/pricing"

Type the shortcut (e.g., /thanks) and it expands to the full response.

Conversation Tags#

Organize and track conversations:

• Add tags during or after chats
• Filter conversations by tag
• Generate reports by category
• Common tags: sales, support, bug-report, feature-request

Real-Time Capabilities#

Live Typing Preview#

See what visitors are typing before they send, allowing you to:

• Prepare thoughtful responses
• Anticipate questions
• Reduce response time

Message Status#

• Sent: Message delivered to server
• Delivered: Message received by visitor's browser
• Read: Visitor has seen the message

File Sharing#

Exchange files securely:

• Images (PNG, JPG, GIF, WebP)
• Documents (PDF, Word, Excel)
• Maximum 25MB per file
• Image thumbnails with lightbox preview
• Drag-and-drop upload support

Integration with Team Chat#

Live Support conversations integrate seamlessly with Team Chat:

• Discuss customer issues with colleagues privately
• @mention team members for assistance
• Escalate complex problems to specialists
• Share context without switching tools
• Create internal notes visible only to your team

Analytics & Reporting#

Track your team's performance in the Live Support dashboard:

Notifications#

Stay informed about new conversations:

• Browser notifications: Appear when you're on another tab
• Sound alerts: Audio notification for new messages
• Desktop notifications: Even when browser is minimized
• Mobile push: Via CommFlow mobile apps

Configure notification preferences in Profile > Notifications.

Best Practices#

1. Respond quickly - Aim for under 30 seconds for first response
2. Be proactive - Use the Visitors module to see who's on your site
3. Personalize - Use visitor info to tailor your responses
4. Use canned responses wisely - Start with templates, then personalize
5. Follow up - Send conversation transcripts via email
6. Tag consistently - Use tags to track common issues
7. Collaborate - Don't hesitate to involve teammates on complex issues

Widget Configuration Reference#

Full configuration options:

<script>
  window.CommFlowConfig = {
    // Required
    workspaceId: 'YOUR_WORKSPACE_ID',
 
    // Appearance
    primaryColor: '#10b981',      // Brand color
    position: 'bottom-right',      // 'bottom-right' or 'bottom-left'
 
    // Content
    greeting: 'Hi! How can we help?',
    teamName: 'Support Team',
    showAgentPhotos: true,
 
    // Behavior
    autoOpen: false,               // Auto-open widget on page load
    openDelay: 5000,               // Delay before auto-open (ms)
 
    // Pre-fill visitor data
    visitor: {
      name: 'John Doe',
      email: 'john@example.com',
      phone: '+1234567890',
      customFields: {
        plan: 'Professional',
        accountId: 'acct_123'
      }
    }
  };
</script>
<script src="https://app.commflow.io/widget.js" async></script>

Next Steps#

• Chat Widget Setup - Detailed installation guide
• Visitor Tracking - Understanding your visitors
• Inbox Overview - Managing support tickets