ThinhDev Live Chat — v1.2.0

Plugin WordPress chat trực tuyến với khách hàng: khách phải để lại họ tên + số điện thoại mới được chat → dữ liệu khách lưu ngay trên website → quản trị viên nhận popup + âm thanh → bấm Chấp nhận để chat 2 chiều → khi khách rời trang, tin trả lời được gửi thông báo đẩy về trình duyệt Chrome của khách kèm logo + ảnh thương hiệu.

Phát triển bởi thinhdev.

Mới ở 1.2: popup “khách vừa chat tư vấn” hiển thị trên website (hình ảnh + tên + SĐT đã che + nội dung tự đặt), cài thời gian, vị trí, giao diện, xem trước trực tiếp.

Mới ở 1.1: xem khách đang chat ở trang nào (theo thời gian thực, từng tin nhắn, hành trình xem trang, nguồn truy cập) và trang Thống kê lượt truy cập website. Không cần dịch vụ bên ngoài (không Firebase, không OneSignal, không thư viện Composer).

1. Tính năng

2. Yêu cầu

• WordPress 6.6+ (đã chạy thử trên 7.2), PHP 7.4+ có OpenSSL (đường cong P-256, AES-128-GCM — hầu hết hosting có sẵn).
• HTTPS (Chrome chỉ cho thông báo đẩy trên HTTPS).
• Thông báo đẩy hoạt động trên Chrome, Edge, Cốc Cốc, Firefox, Opera (máy tính & Android). iPhone chỉ nhận khi khách Thêm vào Màn hình chính (giới hạn của Apple). Ảnh lớn hiển thị trên Windows/Android/ChromeOS; macOS chỉ hiện logo + chữ.

3. Cài đặt

1. Plugins → Add New → Upload thinhdev-live-chat.zip → Activate. Menu Live Chat xuất hiện (khóa VAPID cho Web Push được tạo tự động).
2. Live Chat → Cài đặt → Thương hiệu: tên, màu, logo vuông 192×192, ảnh thương hiệu 1350×675 (2:1), badge.
3. Cài đặt → Thông báo đẩy: bấm Bật thông báo cho trình duyệt này → Gửi thử.
4. Cài đặt → Thông báo quản trị: âm thanh, chu kỳ nhắc lại, email, câu trả lời nhanh.
5. Nên dùng cron thật (cho việc tự đóng hội thoại, dọn dữ liệu):

   define( 'DISABLE_WP_CRON', true );
   

   */10 * * * * wget -q -O - https://ten-mien.com/wp-cron.php?doing_wp_cron >/dev/null 2>&1
   

Lưu ý trình duyệt quản trị: Chrome chặn tự phát âm thanh khi chưa tương tác với trang — nếu thấy nút “🔔 Bấm để bật âm thanh”, bấm một lần. Bật Web Push cho máy quản trị để không bỏ lỡ khách khi đóng tab.

Popup khách đã chat: Cài đặt → Popup khách đã chat → tick Bật popup → Lưu (mặc định tắt). Popup hiển thị công khai nên nên sửa ô đồng ý ở tab Khung chat, ví dụ: “Tôi đồng ý để {brand} lưu trữ họ tên, số điện thoại để liên hệ tư vấn và hiển thị tên gọi, số điện thoại đã che trên website.” Danh sách được lấy qua /wp-json/tdlc/v1/proof (cache 5 phút, chỉ chứa tên rút gọn + SĐT đã che).

Thống kê: Cài đặt → Thống kê — bật/tắt, bỏ qua tài khoản nội bộ khi đăng nhập (mặc định bật), tôn trọng Do Not Track, số ngày giữ dữ liệu chi tiết (mặc định 180; số liệu theo ngày giữ vĩnh viễn). Đếm bằng ID ẩn danh trong localStorage (không cookie), IP làm mờ, bỏ qua bot. Thống kê vẫn chạy trên các trang đã ẩn khung chat.

Plugin cache (LiteSpeed, WP Rocket, FlyingPress…): cấu hình khung chat không chứa dữ liệu riêng nên cache trang thoải mái; chỉ cần loại trừ ?tdlc_sw= khỏi cache và không gộp/hoãn assets/js/widget.js nếu thấy lỗi. Cloudflare: không cache /wp-json/tdlc/*. Mỗi lượt xem trang gửi 1 yêu cầu nhỏ tới /wp-json/tdlc/v1/collect (+ 1 nhịp mỗi 45 giây khi tab đang mở) — với website rất đông khách có thể tắt thống kê và dùng Google Analytics.

4. Cách hoạt động

Khách mở khung chat ─► nhập Tên + SĐT (+ đồng ý) ─► lưu khách hàng ─► hội thoại "Chờ"
        │                                                    │
        │                         popup + âm thanh + Web Push cho quản trị viên
        ▼                                                    ▼
  "Đang kết nối…" ◄────────── Chấp nhận (1 người) ─► "Đang chat" ◄─► chat 2 chiều
        │ quá N phút                                         │
        ▼                                     khách rời trang → Web Push về Chrome khách
   "Nhỡ" + hẹn gọi lại                      (tin nhắn + logo + ảnh thương hiệu)

• Kết nối bằng REST API + hỏi định kỳ (khách 3 giây khi mở khung, nhân viên 2,5–4 giây) — chạy được trên mọi hosting chia sẻ, không cần WebSocket.
• Khách được coi là “đang xem trang” nếu trình duyệt hỏi tin trong 15 giây gần nhất; ngoài khoảng đó tin trả lời sẽ được gửi Web Push.
• Gửi Web Push chạy sau khi đã trả phản hồi (fastcgi_finish_request) nên không làm chậm chat; chiến dịch gửi song song 50 thiết bị/lượt.
• Service worker phục vụ tại /?tdlc_sw=… với phạm vi riêng /tdlc-push/ → không xung đột với PWA/OneSignal/service worker khác của website.

5. Mở khung chat từ nút bất kỳ

Gắn link #tdlc-open hoặc class tdlc-open cho nút trong Flatsome UX Builder (vd. nút “Tư vấn ngay”), hoặc gọi TDLCWidget.open() bằng JavaScript. Thêm ?tdlc_open=1 vào URL để tự mở khung chat.

6. Cấu trúc mã nguồn

thinhdev-live-chat/
├── thinhdev-live-chat.php   Khởi động, autoload
├── uninstall.php            Xóa dữ liệu (chỉ khi bật tùy chọn)
├── assets/
│   ├── js/widget.js         Khung chat khách (Shadow DOM)
│   ├── js/sw.js             Service worker nhận thông báo đẩy
│   ├── js/admin-pulse.js    Popup + âm thanh trên mọi trang quản trị
│   ├── js/admin-console.js  Hộp thoại chat của nhân viên
│   ├── js/admin-stats.js    Bảng khách đang online
│   ├── js/proof.js          Popup "khách vừa chat tư vấn" (Shadow DOM)
│   ├── js/admin-proof.js    Xem trước popup trong cài đặt
│   ├── css/, sounds/ding.wav
├── src/
│   ├── Plugin, Installer (8 bảng, quyền, khóa VAPID), Settings, Util
│   ├── Repo (dữ liệu), Chat (nghiệp vụ), Tracker (truy cập & thống kê), Proof (popup khách đã chat), Rest (API), Frontend, Admin, Pages
│   └── Push/WebPush (VAPID ES256 + mã hóa aes128gcm thuần PHP), Push/Sender
└── tests/integration.php    145 kiểm thử trên WordPress thật

Bảng: wp_tdlc_customers, wp_tdlc_conversations, wp_tdlc_messages, wp_tdlc_push_subs, wp_tdlc_campaigns, wp_tdlc_visitors (khách truy cập ẩn danh), wp_tdlc_pageviews (lượt xem chi tiết), wp_tdlc_daily (tổng theo ngày).

7. Hook cho lập trình viên

8. Kiểm thử

php tests/integration.php /duong-dan/wordpress   # CHỈ chạy trên site thử: test xóa dữ liệu Live Chat

Bao phủ: kích hoạt/bảng/quyền/khóa VAPID, chuẩn hóa & kiểm tra SĐT, form bắt buộc tên + SĐT + đồng ý, honeypot, lưu khách không trùng, popup quản trị (pulse), nhận nguyên tử (người thứ 2 bị từ chối), chat 2 chiều, lọc HTML/JS, đang nhập, chưa đọc, ghi chú, Web Push tới quản trị viên & khách (giải mã payload kiểm tra tiêu đề, nội dung, logo, ảnh thương hiệu, link), chiến dịch, 410 tự xóa thiết bị, hết giờ → nhỡ, đóng/mở lại, quyền REST (401/403), bảo trì, xóa dây chuyền, hiển thị mọi trang quản trị, mã hóa + chữ ký ES256 40/40 lần, ghi lượt xem / bỏ bot / phân loại nguồn (Google, Facebook Ads, UTM, trực tiếp) / phiên 30 phút / online / gắn khách truy cập với khách hàng / trang của từng tin nhắn / hành trình / báo cáo / cộng dồn ngày sau khi xóa dữ liệu chi tiết, không phát sinh warning PHP. Ngoài ra đã chạy thử trình duyệt thật (Chromium): khách điền form → popup + âm thanh ở trang quản trị → Chấp nhận → chat 2 chiều → tải lại trang giữ lịch sử; khách vào từ quảng cáo Google → xem 3 trang → chat → chuyển trang, quản trị viên thấy thanh “Khách đang xem” và hành trình tự cập nhật.

9. Lưu ý

• Đổi khóa VAPID (Cài đặt → Thông báo đẩy → Tạo lại khóa) sẽ hủy toàn bộ đăng ký cũ; khách bật lại khi chat lần sau.
• Ảnh chat lưu ở uploads/tdlc/YYYY/MM (không vào Thư viện), tối đa 5MB, chỉ JPG/PNG/WebP/GIF.
• Xóa khách = xóa luôn hội thoại, tin nhắn, thiết bị nhận thông báo. “Tự xóa hội thoại sau N ngày” giữ lại thông tin khách hàng.
• Hosting rất yếu có nhiều khách đồng thời: tăng chu kỳ hỏi bằng cách sửa hằng số trong widget.js hoặc dùng object cache (Redis) để transient nhanh hơn.

10. Lộ trình v1.1

• Đồng bộ khách sang ThinhDev CRM (tạo khách + nguồn “Live Chat”) bằng 1 nút
• Giờ làm việc, phân chia nhân viên theo lượt (round-robin), chuyển hội thoại
• Kết nối Zalo OA / Messenger vào cùng hộp thoại
• Đánh giá sao sau khi kết thúc, báo cáo thời gian phản hồi
• Element/shortcode cho Flatsome UX Builder