LiveChat Admin — WeSellMachines (Demo)

Pangkalahatang-ideya ng Sistema ng LiveChat

128

Mga Paraan

Mga Aksyon ng AJAX

Mga Talahanayan ng DB

Mga Tab ng Admin

Mga Wika

Bersyon

Mga Pangunahing Tampok

Pagsubaybay sa Real-time
Live na pagsubaybay sa bisita na pinapagana ng SSE

Awtomatikong Pagsasalin
35-wika na bi-direksyon

Pagtuklas ng Bot
Batay sa padron + heuristiko

Mga Awtomatikong Trigger
Mga panuntunan sa mensaheng may kamalayan sa pahina

Malalim na Pagsusuri
5 ulat + mga heatmap

Sistema ng IP/Pagbabawal
Mga nakatakdang pagbabawal + mga pagharang sa IP

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

Arkitektura

Daloy ng Kahilingan

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

Komunikasyon sa Real-Time

Gumagamit ng Server-Sent Events (SSE) para sa mga live na update. Pinapanatili ng admin panel ang patuloy na koneksyon sa SSE para sa:

Bilang ng mga bisita at mga update sa katayuan nang live
Mga abiso ng bagong mensahe
Mga pagbabago sa pila
Mga tagapagpahiwatig ng pagta-type sa pamamagitan ng polling fallback

Pagpapatotoo

Pagpapatotoo ng admin sa pamamagitan ng session-based na PHP auth. Gumagamit ang widget ng fingerprinting ng bisita (browser hash + IP + cookie) para sa pagpapatuloy ng sesyon.

Iskema ng Database (12 Talahanayan)

mga bisitang_livechat

id, session_id, pangalan, email, kumpanya, telepono, ip, bansa, lungsod, device, browser, os, screen, wika, referrer, utm_source, utm_medium, first_seen, last_seen, is_bot, bot_score, mga tala, mga tag

mga mensahe sa livechat

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

mga patakaran sa livechat

id, pangalan, uri_ng_pahina, url_pattern, min_pages, pagkaantala, max_triggers, cooldown, return_only, prayoridad, mensahe, aktibo, nilikha_sa

mga_view_ng_pahina_ng_livechat

id, visitor_id, url, pamagat, uri_ng_pahina, referrer, tagal, nilikha_sa

mga kaganapan sa livechat

id, visitor_id, event_type, event_data, page_url, created_at

mga_naka-can_na_tugon_sa_livechat

id, shortcut, pamagat, mensahe, kategorya, used_count, created_at

mga setting ng livechat

id, setting_key, setting_value, updated_at

pila ng livechat

id, visitor_id, departamento, prayoridad, katayuan, nakatalaga_sa, nilikha_sa

mga tawag pabalik sa livechat

id, visitor_id, telepono, ginustong_oras, departamento, mga tala, katayuan, nilikha_sa

mga abiso sa livechat

id, admin_id, uri, pamagat, mensahe, nabasa, datos, nilikha_sa

mga profile ng admin sa livechat

id, admin_id, display_name, tungkulin, avatar_color, pagbati, lagda, magagamit, mga setting

livechat_ip_bans

id, ip_address, dahilan, tagal, pinagbawalan_ni, mag-e-expire_sa, nilikha_sa

Mga Paraan ng Klase (128)

AJAX API (55 Aksyon)

Mga Aksyon na Nakaharap sa Widget (18)

Aksyon	Paraan	Paglalarawan
`init_chat`	POST	Simulan ang sesyon ng bisita
`send_message`	POST	Magpadala ng mensahe ng bisita
`get_messages`	KUMUHA	Kunin ang kasaysayan ng pag-uusap
`track_page`	POST	Subaybayan ang pagtingin sa pahina
`typing_status`	POST	I-update ang tagapagpahiwatig ng pagta-type
`upload_file`	POST	Mag-upload ng kalakip na file
`request_callback`	POST	Magsumite ng kahilingan sa callback
`rate_chat`	POST	Isumite ang rating ng CSAT
`check_online`	KUMUHA	Suriin kung online ang mga ahente

Mga Aksyon na Kinakaharap ng Admin (37)

Aksyon	Paraan	Paglalarawan
`admin_get_conversations`	KUMUHA	Ilista ang lahat ng pag-uusap
`admin_get_messages`	KUMUHA	Kumuha ng mga mensahe para sa pag-uusap
`admin_send_reply`	POST	Magpadala ng mensahe ng admin
`admin_get_live_visitors`	KUMUHA	Kumuha ng mga aktibong bisita
`admin_advanced_analytics`	KUMUHA	Kumpletong datos ng analitika
`admin_get_rules`	KUMUHA	Mga panuntunan sa pag-trigger ng listahan
`admin_save_rule`	POST	Gumawa/mag-update ng panuntunan
`admin_toggle_rule`	POST	Paganahin/i-disable ang panuntunan
`admin_ban_visitor`	POST	Ipagbawal ang isang bisita
`admin_get_settings`	KUMUHA	Kunin ang mga setting ng system
`admin_save_setting`	POST	I-update ang isang setting
`admin_manage_bot`	POST	Markahan/alisin ang marka bilang bot

Pagsasama ng Widget

Kodigo ng Pagsasama

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

Mga Sinusuportahang Wika (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'});

Mga Tab at Tampok ng Admin

1. Dashboard
Mga istatistika sa real-time, tsart ng mga trend, mga device, funnel, mga referrer, mga pahina

2. Mga Live na Bisita
Pagsubaybay sa totoong oras, pagtatago ng bot, pag-filter/pag-uri-uriin, pagharang, pagmamarka sa bot

3. Mga Pag-uusap
Hatiin ang pane, pagsasalin, panel ng konteksto, pag-upload ng file, naka-can, i-ban

4. Pila
Pila ng prayoridad, pagtatalaga, paglutas, pagruruta ng departamento

5. Mga Callback
Mga tawag pabalik sa telepono, mga ginustong oras, pamamahala ng katayuan

6. Lahat ng Bisita
Makasaysayang datos, paghahanap, pagsala, pag-uuri, pagbilang ng pahina, modal ng profile

7. Pagsusuri
5 sub-tab, heatmap, funnel, CSAT, mga paksa, pagsusuri ng nilalaman

8. Mga Awtomatikong Trigger
Panuntunan CRUD, pag-target sa pahina, pagkaantala, cooldown, mga template

9. Mga Setting
Profile, naka-kahong, sistema, pagsasalin, pamamahala ng bot

10. Gabay at mga Dokumento
Arkitektura, iskema ng DB, mga pamamaraan, API, talaan ng pagbabago

Gabay sa Pagsusuri

Mga Saklaw ng Petsa

Sinusuportahan ang Ngayon, 7/30/90 araw na saklaw. Pinagsama-sama ang lahat ng data sa server-side na may caching.

Mga sub-tab

Pangkalahatang-ideya: 6 na KPI, trend line, oras-oras na bar, mga channel, kalidad, mga referrer, funnel, bago/bumabalik, mga sukatan ng chat
Mga Pag-uusap: Alerto sa mga hindi nasagot na chat, distribusyon ng oras ng pagtugon, tagal, trend ng CSAT, mga pinagmumulan ng chat, mga paksa ng mensahe
Mga Bisita: Mga uri ng device, wika, bansa, heatmap ng mga oras ng peak hours (7×24 grid)
Pagganap: Mga browser, OS, mga resolusyon ng screen na may mga bar chart
Nilalaman: Mga uri ng pahina, mga pahina ng pagpasok/paglabas, mga pahinang bumubuo ng chat, talahanayan ng buong pahina na may uri/filter/paghahanap

Mga Filter ng Datos

Hindi kasama ang trapiko ng bot bilang default. Maaaring i-configure ang mga internal na IP sa Mga Setting. Gumagamit ang lahat ng chart ng Chart.js na may responsive canvas.

Gabay sa Pag-install

Mag-upload ng mga file sa modules/livechat/
I-configure config.php may mga kredensyal sa database
Patakbuhin ang pag-setup — mga talahanayan na awtomatikong nalilikha sa unang pag-load
Magdagdag ng widget — isama livechat.js sa iyong template
I-configure ang SSE — tiyaking sinusuportahan ng server ang EventSource
Pagsubok — buksan ang admin panel at i-verify ang koneksyon

Konpigurasyon

Mga Setting ng config.php

Susi	Default	Paglalarawan
`DB_HOST`	lokal na host	Taga-host ng database
`DB_NAME`	—	Pangalan ng database
`SSE_INTERVAL`	3	Pagitan ng pagtulak ng SSE (segundo)
`MAX_IDLE_TIME`	300	Timeout ng idle ng bisita (segundo)
`TYPING_TIMEOUT`	5	Timeout ng tagapagpahiwatig ng pagta-type
`TRANSLATION_API`	google	Tagapagbigay ng serbisyo sa pagsasalin
`MAX_FILE_SIZE`	10	Pinakamataas na laki ng pag-upload (MB)

Talaan ng Pagbabago

V5 — Kasalukuyan

Advanced analytics na may 5 sub-tab at heatmap
Pagsasalin sa totoong oras (35 na wika)
Sistema ng pamamahala ng bot
Kadena ng pagtaas ng kawalan ng aktibidad
Pag-iiskedyul ng bakasyon
Widget na nakakaakit ng pansin

V4

Panel ng konteksto ng pag-uusap
Mga naka-kahong tugon gamit ang paghahanap
Suporta sa pagbabahagi ng file
Pamamahala ng pila
Sistema ng pagtawag pabalik

V3

Mga panuntunan sa awtomatikong pag-trigger ng makina
Profile at timeline ng bisita
Advanced na sistema ng pagbabawal (IP + naka-oras)
Mga profile ng admin na may mga avatar

V2

Mga real-time na update ng SSE
Mga notification sa desktop
Mga alerto sa tunog
Mga tagapagpahiwatig ng pagta-type

V1

Pangunahing functionality ng chat
Pagsubaybay sa bisita
Interface ng tugon ng admin

LiveChat

Dashboard

Mga Live na Bisita

Mga Pag-uusap

—

—

Makipag-ugnayan

Aparato at Teknolohiya

Pakikipag-ugnayan

Takdang Panahon

Mga Tala

Mga Tag

Mga Aksyon

Pila

Mga Callback

Lahat ng Bisita

Analitika

Mga Panuntunan sa Awtomatikong Pag-trigger

Mga Setting

John Doe

Mga Naka-kahong Tugon

Pagsasalin sa Real-Time

Pagtuklas ng Mensahe

Bi-direksyon

Naka-cache

Pagsubok sa Pagsasalin