Cách chat mặc định được tích hợp

• Thêm CSS của EzyChat vào trang.
• Thêm JavaScript chính của EzyChat.
• Thêm thư viện Markdown.
• Thêm socket client nếu chat qua socket được bật.
• Đưa các thiết lập giao diện và hành vi vào value map của trang.

sequenceDiagram
    actor User as Người dùng
    participant Web as Web runtime
    participant Decorator as EzyChat view decorator
    participant Setting as Cấu hình EzyChat
    participant Page as Trang HTML

    User->>Web: Mở một trang
    Web->>Decorator: Trang chuẩn bị được render
    Decorator->>Setting: Kiểm tra hiển thị chat

    alt Đã bật chat
        Setting-->>Decorator: Cấu hình chat mặc định
        Decorator->>Page: Thêm CSS
        Decorator->>Page: Thêm JavaScript
        Decorator->>Page: Thêm biến cấu hình
    end

    Page-->>User: Trang có giao diện chat

Bật chat mặc định

Hiển thị trên web: Bật

Chọn phương thức giao tiếp

Sử dụng socket

• Socket server đang hoạt động.
• Socket application của EzyChat đã được cài đặt.
• Trình duyệt có thể kết nối tới WebSocket URL.
• Reverse proxy hỗ trợ WebSocket upgrade.
• Danh tính người dùng được gắn với phiên socket.

Sử dụng HTTP

Cấu hình thông tin người dùng

• Yêu cầu thông tin người dùng trước khi chat.
• Yêu cầu email.
• Yêu cầu số điện thoại.
• Cho phép đính kèm tệp.

Cấu hình giao diện

Nút mở chat

• Kiểu nút: hình tròn, vuông bo góc hoặc hình vuông.
• Vị trí: bên trái hoặc bên phải.
• Kích thước: nhỏ, trung bình hoặc lớn.
• Màu nền.
• Ảnh launcher.
• Hiệu ứng thu hút chú ý.

Kiểu nút: circle
Vị trí: right
Kích thước: medium
Màu: #ff7675

Ảnh nhân viên hỗ trợ

/ezychat/images/supporter.png

JavaScript và CSS

/ezychat/js/main.js
/ezychat/css/style.css

Giới hạn tin nhắn

3000 ký tự

Cách tạo kênh mặc định

sequenceDiagram
    actor User as Người dùng
    participant UI as Giao diện chat mặc định
    participant API as Web API
    participant Channel as Dịch vụ kênh
    participant Supporter as Nhân viên hỗ trợ chung

    User->>UI: Bắt đầu chat
    UI->>API: Tạo hoặc lấy kênh hỗ trợ
    Note over UI,API: Không gửi embed key

    API->>Channel: Tìm kênh gần nhất của người dùng

    alt Chưa có kênh
        Channel->>Channel: Tạo kênh SUPPORT
        Channel->>Channel: Thêm người dùng
        Channel->>Supporter: Thêm nhân viên hỗ trợ chung
    end

    API-->>UI: Thông tin kênh

• Không tìm chat profile.
• Không gắn chatProfileId vào kênh.
• Không thêm thành viên từ chat profile.
• Không áp dụng cấu hình giao diện của profile.
• Không kiểm tra allowed origin của profile.

Nhân viên hỗ trợ

1. Thêm người dùng vào kênh.
2. Lấy danh sách quản trị viên hỗ trợ.
3. Thêm các quản trị viên đó vào kênh.
4. Kiểm tra lại danh sách này khi xử lý tin nhắn và bổ sung thành viên còn thiếu nếu cần.

Chatbot mặc định

1. Đọc chatbot service mặc định.
2. Kiểm tra xem có default profile riêng của service hay không.
3. Nếu có, sử dụng profile đó làm cấu hình chatbot.
4. Nếu không, gọi trực tiếp chatbot service mặc định với cấu hình chung.

• Một chatbot service đã được đăng ký.
• Danh tính chatbot đã được khởi tạo.
• Chatbot được thêm vào kênh.
• Chatbot đang được bật cho kênh.
• Người dùng chưa vượt quá hạn mức phản hồi.

Cấu hình chatbot

Cấu hình kênh

• Chọn một secret dài và ngẫu nhiên.
• Không đưa secret xuống frontend.
• Không thay đổi secret sau khi đã có mật khẩu kênh đang sử dụng.

Cấu hình đề xuất

Hiển thị trên web: Bật
Chat qua socket: Tắt
Yêu cầu thông tin người dùng: Bật
Yêu cầu email: Bật
Yêu cầu số điện thoại: Tắt
Cho phép đính kèm: Tắt
Độ dài tin nhắn tối đa: 3000

Kiểu nút: circle
Vị trí: right
Kích thước: medium
Màu: #ff7675

Chatbot service: Để trống

1. Gán vai trò hỗ trợ cho một quản trị viên.
2. Mở một trang web được render bởi EzyPlatform.
3. Kiểm tra nút chat xuất hiện.
4. Đăng nhập hoặc nhập thông tin người dùng.
5. Tạo cuộc hội thoại.
6. Kiểm tra kênh xuất hiện trong trang quản trị.
7. Gửi và nhận tin nhắn qua HTTP.
8. Chỉ bật socket, tệp đính kèm hoặc chatbot sau khi luồng cơ bản hoạt động.

Phân biệt với chat profile

• Nhúng widget vào một website khác.
• Cần một khóa nhúng riêng.
• Cần giới hạn allowed origin.
• Cần giao diện riêng cho từng website.
• Cần nhóm nhân viên hỗ trợ riêng.
• Cần chatbot hoặc system message riêng.
• Cần chọn phương thức truyền tải riêng cho từng widget.

flowchart TD
    Need["Cần hiển thị chat"]

    Need --> Question{"Chat nằm trong web EzyPlatform?"}
    Question -->|Có| Default["Dùng chat mặc định<br/>Cấu hình toàn cục"]
    Question -->|Không| Profile["Tạo chat profile<br/>Dùng khóa nhúng"]

    Default --> NoProfile["Không cần profile"]
    Profile --> Embed["Nhúng embed.js hoặc iframe"]