Fitur Utama

Struktur File

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

Request Flow

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

Komunikasi Waktu Nyata

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
• Mengetik indikator melalui fallback polling

Autentikasi

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

Widget-Facing Actions (18)

Admin-Facing Actions (37)

Kode Integrasi

<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>

Bahasa yang Didukung (35)

en, de, fr, es, saya t, nl, pl, pt, ja, zh, ko, ru, ar, tr, sv, tidak, fi, da, cs, hu, ro, bg, el, hr, sk, sl, lt, lv, et, uk, sr, dia, 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'});

Date Ranges

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

Sub-tab

• Overview: 6 KPIs, trend line, hourly bars, channels, quality, referrers, funnel, new/returning, chat metrics
• Percakapan: 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: Tipe halaman, halaman masuk/keluar, halaman penghasil obrolan, tabel halaman penuh dengan pengurutan/filter/pencarian

Data Filters

Lalu lintas bot dikecualikan secara default. IP internal dapat dikonfigurasi di Pengaturan. Semua grafik menggunakan Chart.js dengan kanvas responsif.

1. Unggah file to modules/livechat/
2. Configure config.php with database credentials
3. Jalankan pengaturan — tables auto-created on first load
4. Tambahkan widget — include livechat.js in your template
5. Konfigurasi SSE — ensure server supports EventSource
6. Tes — open admin panel and verify connection

Pengaturan config.php

V5 — Saat Ini

• 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

• Panel konteks percakapan
• Jawaban standar dengan fungsi pencarian.
• Dukungan berbagi file
• Manajemen antrian
• Sistem panggilan balik

V3

• Auto trigger rules engine
• Profil dan riwayat pengunjung
• Sistem pemblokiran tingkat lanjut (IP + waktu)
• Profil admin dengan avatar

V2

• Pembaruan waktu nyata SSE
• Desktop notifications
• Peringatan suara
• Indikator pengetikan

V1

• Basic chat functionality
• Pelacakan pengunjung
• Antarmuka balasan admin