LiveChat Admin — WeSellMachines (Demo)

LiveChat System Overview

128

Methods

AJAX Actions

DB Tables

Admin Tabs

Languages

Version

Key Features

Real-time Monitoring
SSE-powered live visitor tracking

Auto Translation
35-language bi-directional

Bot Detection
Pattern-based + heuristic

Auto Triggers
Page-aware message rules

Deep Analytics
5 reports + heatmaps

IP/Ban System
Timed bans + IP blocks

File Structure

modules/livechat/
├── LiveChat.php          (Main class - 128 methods)
├── admin-livechat.php    (Admin panel - this file)
├── livechat.tpl          (Widget template)
├── livechat.js           (Widget JS - visitor facing)
├── config.php            (Configuration)
└── assets/
    ├── notification.mp3
    └── widget.css

Architecture

Request Flow

┌─────────────┐     ┌──────────────┐     ┌─────────────┐
│  Widget JS   │────▶│  AJAX Handler │────▶│  LiveChat   │
│  (Browser)   │◀────│  (PHP)       │◀────│  Class      │
└─────────────┘     └──────────────┘     └──────┬──────┘
                                                 │
┌─────────────┐     ┌──────────────┐            │
│  Admin Panel │────▶│  SSE Stream  │◀───────────┘
│  (This page) │◀────│  (Real-time) │     ┌──────┴──────┐
└─────────────┘     └──────────────┘     │  Database    │
                                          │  (12 tables) │
                                          └─────────────┘

Real-Time Communication

Uses Server-Sent Events (SSE) for live updates. Admin panel maintains persistent SSE connection for:

Live visitor count & status updates
New message notifications
Queue changes
Typing indicators via polling fallback

Authentication

Admin authentication via session-based PHP auth. Widget uses visitor fingerprinting (browser hash + IP + cookie) for session continuity.

Database Schema (12 Tables)

livechat_visitors

id, session_id, name, email, company, phone, ip, country, city, device, browser, os, screen, language, referrer, utm_source, utm_medium, first_seen, last_seen, is_bot, bot_score, notes, tags

livechat_messages

id, visitor_id, sender_type, sender_id, message, translated_message, original_lang, target_lang, attachment, read_at, created_at

livechat_rules

id, name, page_type, url_pattern, min_pages, delay, max_triggers, cooldown, return_only, priority, message, active, created_at

livechat_page_views

id, visitor_id, url, title, page_type, referrer, duration, created_at

livechat_events

id, visitor_id, event_type, event_data, page_url, created_at

livechat_canned_responses

id, shortcut, title, message, category, used_count, created_at

livechat_settings

id, setting_key, setting_value, updated_at

livechat_queue

id, visitor_id, department, priority, status, assigned_to, created_at

livechat_callbacks

id, visitor_id, phone, preferred_time, department, notes, status, created_at

livechat_notifications

id, admin_id, type, title, message, read, data, created_at

livechat_admin_profiles

id, admin_id, display_name, role, avatar_color, greeting, signature, available, settings

livechat_ip_bans

id, ip_address, reason, duration, banned_by, expires_at, created_at

Class Methods (128)

AJAX API (55 Actions)

Widget-Facing Actions (18)

Action	Method	Description
`init_chat`	POST	Initialize visitor session
`send_message`	POST	Send visitor message
`get_messages`	GET	Fetch conversation history
`track_page`	POST	Track page view
`typing_status`	POST	Update typing indicator
`upload_file`	POST	Upload file attachment
`request_callback`	POST	Submit callback request
`rate_chat`	POST	Submit CSAT rating
`check_online`	GET	Check if agents online

Admin-Facing Actions (37)

Action	Method	Description
`admin_get_conversations`	GET	List all conversations
`admin_get_messages`	GET	Get messages for conversation
`admin_send_reply`	POST	Send admin message
`admin_get_live_visitors`	GET	Get active visitors
`admin_advanced_analytics`	GET	Full analytics data
`admin_get_rules`	GET	List trigger rules
`admin_save_rule`	POST	Create/update rule
`admin_toggle_rule`	POST	Enable/disable rule
`admin_ban_visitor`	POST	Ban a visitor
`admin_get_settings`	GET	Get system settings
`admin_save_setting`	POST	Update a setting
`admin_manage_bot`	POST	Mark/unmark as bot

Widget Integration

Integration Code

<script src="/modules/livechat/livechat.js"></script>
<script>
  WeSellMachines.LiveChat.init({
    position: 'bottom-right',
    primaryColor: '#3498db',
    greeting: 'Need help? Chat with us!',
    offlineMessage: 'We are offline. Leave a message!'
  });
</script>

Supported Languages (35)

en, de, fr, es, it, nl, pl, pt, ja, zh, ko, ru, ar, tr, sv, no, fi, da, cs, hu, ro, bg, el, hr, sk, sl, lt, lv, et, uk, sr, he, th, vi, id

JavaScript API

// Open chat programmatically
WeSellMachines.LiveChat.open();

// Send automatic message  
WeSellMachines.LiveChat.sendMessage('How can I help?');

// Track custom event
WeSellMachines.LiveChat.trackEvent('viewed_listing', {id: 1234});

// Set visitor info
WeSellMachines.LiveChat.setVisitor({name: 'John', email: 'john@example.com'});

Admin Tabs & Features

1. Dashboard
Real-time stats, trends chart, devices, funnel, referrers, pages

2. Live Visitors
Real-time tracking, bot hide, filter/sort, block, mark bot

3. Conversations
Split pane, translation, context panel, file upload, canned, ban

4. Queue
Priority queue, assign, resolve, department routing

5. Callbacks
Phone callbacks, preferred times, status management

6. All Visitors
Historical data, search, filter, sort, pagination, profile modal

7. Analytics
5 sub-tabs, heatmaps, funnels, CSAT, topics, content analysis

8. Auto Triggers
Rule CRUD, page targeting, delay, cooldown, templates

9. Settings
Profile, canned, system, translation, bot management

10. Guide & Docs
Architecture, DB schema, methods, API, changelog

Analytics Guide

Date Ranges

Supports Today, 7/30/90 day ranges. All data aggregated server-side with caching.

Sub-tabs

Overview: 6 KPIs, trend line, hourly bars, channels, quality, referrers, funnel, new/returning, chat metrics
Conversations: Missed chats alert, response time distribution, duration, CSAT trend, chat sources, message topics
Visitors: Device types, languages, countries, peak hours heatmap (7×24 grid)
Performance: Browsers, OS, screen resolutions with bar charts
Content: Page types, entry/exit pages, chat-generating pages, full page table with sort/filter/search

Data Filters

Bot traffic excluded by default. Internal IPs configurable in Settings. All charts use Chart.js with responsive canvas.

Installation Guide

Upload files to modules/livechat/
Configure config.php with database credentials
Run setup — tables auto-created on first load
Add widget — include livechat.js in your template
Configure SSE — ensure server supports EventSource
Test — open admin panel and verify connection

Configuration

config.php Settings

Key	Default	Description
`DB_HOST`	localhost	Database host
`DB_NAME`	—	Database name
`SSE_INTERVAL`	3	SSE push interval (seconds)
`MAX_IDLE_TIME`	300	Visitor idle timeout (seconds)
`TYPING_TIMEOUT`	5	Typing indicator timeout
`TRANSLATION_API`	google	Translation service provider
`MAX_FILE_SIZE`	10	Max upload size (MB)

Changelog

V5 — Current

Advanced analytics with 5 sub-tabs and heatmaps
Real-time translation (35 languages)
Bot management system
Inactivity escalation chain
Holiday scheduling
Eye-catcher widget

V4

Conversation context panel
Canned responses with search
File sharing support
Queue management
Callback system

V3

Auto trigger rules engine
Visitor profile & timeline
Advanced ban system (IP + timed)
Admin profiles with avatars

V2

SSE real-time updates
Desktop notifications
Sound alerts
Typing indicators

V1

Basic chat functionality
Visitor tracking
Admin reply interface

LiveChat

Dashboard

Live Visitors

Conversations

—

—

Contact

Device & Tech

Engagement

Timeline

Notes

Tags

Actions

Queue

Callbacks

All Visitors

Analytics

Auto Trigger Rules

Settings

John Doe

Canned Responses

Real-Time Translation

Message Detection

Bi-directional

Cached

Test Translation