주요 특징

파일 구조

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

요청 흐름

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

실시간 통신

실시간 업데이트를 위해 서버 전송 이벤트(SSE)를 사용합니다. 관리자 패널은 다음과 같은 용도로 지속적인 SSE 연결을 유지합니다.

• 실시간 방문자 수 및 현황 업데이트
• 새 메시지 알림
• 대기열 변경
• 폴링을 통한 입력 표시기 제공

입증

관리자 인증은 세션 기반 PHP 인증을 통해 이루어집니다. 위젯은 세션 연속성을 위해 방문자 지문(브라우저 해시 + IP + 쿠키)을 사용합니다.

위젯 방향 동작(18)

관리자 대상 작업(37)

통합 코드

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

지원되는 언어(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

자바스크립트 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'});

날짜 범위

오늘, 7월 30일, 90일 기간을 지원합니다. 모든 데이터는 서버 측에서 캐싱을 통해 집계됩니다.

하위 탭

• 개요: 6가지 KPI, 추세선, 시간별 막대 그래프, 채널, 품질, 추천 소스, 퍼널, 신규/재방문 고객, 채팅 지표
• 대화: 채팅 누락 알림, 응답 시간 분포, 지속 시간, 고객 만족도 추세, 채팅 출처, 메시지 주제
• 방문객: 기기 유형, 언어, 국가, 피크 시간대 히트맵(7×24 격자)
• 성능: 브라우저, 운영체제, 화면 해상도별 막대 그래프
• 콘텐츠: 페이지 유형, 진입/종료 페이지, 채팅 생성 페이지, 정렬/필터/검색 기능이 있는 전체 페이지 표

데이터 필터

봇 트래픽은 기본적으로 제외됩니다. 내부 IP는 설정에서 구성할 수 있습니다. 모든 차트는 반응형 캔버스를 사용하는 Chart.js 기반입니다.

1. 파일 업로드 에게 modules/livechat/
2. 구성 config.php 데이터베이스 자격 증명을 사용하여
3. 실행 설정 — 첫 로드 시 자동으로 생성되는 테이블
4. 위젯 추가 - 포함하다 livechat.js 템플릿에서
5. SSE 구성 — 서버가 EventSource를 지원하는지 확인하십시오
6. 시험 — 관리자 패널을 열고 연결을 확인하세요

config.php 설정

V5 — 현재

• 5개의 하위 탭과 히트맵을 포함한 고급 분석 기능
• 실시간 번역 (35개 언어)
• 봇 관리 시스템
• 활동 부족으로 인한 악화 연쇄 반응
• 휴일 일정
• 시선을 사로잡는 위젯

V4

• 대화 컨텍스트 패널
• 검색 기능이 포함된 미리 작성된 답변
• 파일 공유 지원
• 대기열 관리
• 콜백 시스템

V3

• 자동 트리거 규칙 엔진
• 방문자 프로필 및 타임라인
• 고급 차단 시스템 (IP + 시간 제한)
• 아바타가 있는 관리자 프로필

V2

• SSE 실시간 업데이트
• 데스크톱 알림
• 소리 알림
• 타이핑 표시기

V1

• 기본 채팅 기능
• 방문자 추적
• 관리자 답글 인터페이스