Case Study Thực Tế 1: Tích Hợp Caresoft CRM (CPS)

Caresoft (CPS) là nền tảng quản trị quan hệ khách hàng và tổng đài chăm sóc đa kênh (Omni-channel Contact Center) hàng đầu tại Việt Nam. Nhằm trợ lực cho hàng ngàn nhân viên hỗ trợ (Support Agents) và tư vấn viên bán hàng (Telemarketing), Caresoft đã hợp tác với Pango AI để nhúng Pango Chat Widget (CPS AI Assistant) trực tiếp vào màn hình xử lý ticket của tổng đài viên.

1. Mục Tiêu & Kịch Bản Nghiệp Vụ Tại Caresoft

Trợ lý Agent thời gian thực (Copilot Mode): Khi tư vấn viên đang chat với khách hàng trên Zalo, Facebook Messenger hoặc LiveChat của Caresoft, trợ lý AI trên Widget sẽ lắng nghe ngữ cảnh và gợi ý ngay câu trả lời mẫu chuẩn quy trình.
Đồng bộ ngữ cảnh vé hỗ trợ (lastTicket): Tự động nạp mã ticket, độ ưu tiên (Priority), tiêu đề yêu cầu và nguồn kênh để AI hiểu ngay vấn đề mà không cần tư vấn viên giải thích lại.
Chuyển đổi đa tab đàm thoại mượt mà (Multi-tab Switch): Khi nhân viên chuyển đổi qua lại giữa nhiều tab khách hàng trên giao diện Caresoft, widget tự động cập nhật lại conversationId tức thời bằng phương thức setPayload từng phần.

2. Endpoint SDK Script

Môi Trường Staging:

<script
  type="module"
  src="https://pango-chat-widget.pages.dev/widget.js"
></script>

Môi Trường Production:

<script
  type="module"
  src="https://cps-ai-widget.mydatalakes.com/widget.js"
></script>

3. Cấu Trúc Payload Mở Rộng Dành Cho CRM

Hệ thống Caresoft đẩy dữ liệu phong phú vào Widget để tối ưu hóa năng lực phân tích của AI:

{
  "conversation": {
    "conversationId": "CPS_CONV_908234"
  },
  "account": {
    "id": 254665607,
    "username": "hoang.nam",
    "mainEmail": "nam.hoang@caresoft.vn",
    "mainPhone": "0988123456",
    "groupId": 1042,
    "groupName": "Đội Hỗ Trợ Kỹ Thuật Cấp 1"
  },
  "admin": {
    "id": "ADMIN_VNG_01",
    "username": "Lead Supervisor"
  },
  "userInfo": {
    "id": "CUST_ZALO_8841",
    "username": "Trần Thanh Thảo",
    "mainEmail": "thao.tran@gmail.com",
    "mainPhone": "0912345678",
    "channelInfo": "Zalo OA"
  },
  "lastTicket": {
    "ticketId": 748291,
    "ticketPriority": "High",
    "ticketSource": "Zalo",
    "ticketStatus": "Processing",
    "ticketSubject": "Khách hàng khiếu nại chưa nhận được mã kích hoạt dịch vụ",
    "createdAt": "2026-09-06T09:15:00Z",
    "updatedAt": "2026-09-06T09:30:00Z",
    "groupName": "Chăm Sóc Khách Hàng VIP"
  }
}

Ý Nghĩa Các Nhóm Thông Tin:

conversation: Định danh phiên làm việc hiện tại trên màn hình CRM.
account: Thông tin của tư vấn viên / tổng đài viên Caresoft đang đăng nhập thao tác.
admin: Thông tin người quản lý ca trực để phục vụ truy vết kiểm toán.
userInfo: Thông tin khách hàng đang cần hỗ trợ (Tên, số điện thoại, kênh giao tiếp).
lastTicket: Dữ liệu phiếu sự vụ gần nhất liên quan đến khách hàng, giúp AI đưa ra tư vấn phù hợp với tiến độ giải quyết sự vụ.

4. Mã Nguồn Triển Khai Thực Tế Trên Caresoft

1. Tích Hợp Trên Vanilla JavaScript / HTML

// Bước 1: Khởi tạo widget khi trang Caresoft đã sẵn sàng
window.addEventListener('DOMContentLoaded', () => {
  if (window.pcw) {
    window.pcw.init();
    console.log("CPS AI Widget initialized.");
  }
});

// Bước 2: Khi agent nhấp mở một Ticket cụ thể trên CRM
function onTicketSelected(ticketData, customerData, agentData) {
  if (!window.pcw) return;

  // Đẩy đầy đủ ngữ cảnh vào widget
  window.pcw.setPayload({
    conversation: {
      conversationId: `TICKET_${ticketData.id}`
    },
    account: {
      id: agentData.id,
      username: agentData.username,
      mainEmail: agentData.email,
      groupId: agentData.groupId,
      groupName: agentData.groupName
    },
    userInfo: {
      id: customerData.id,
      username: customerData.fullName,
      mainPhone: customerData.phone,
      channelInfo: ticketData.channel
    },
    lastTicket: {
      ticketId: ticketData.id,
      ticketPriority: ticketData.priority,
      ticketSubject: ticketData.title,
      ticketStatus: ticketData.status
    }
  });
}

// Bước 3: Khi agent chuyển tab chat giữa các khách hàng (Partial Update)
function onChatTabSwitched(newConversationId) {
  if (window.pcw) {
    window.pcw.setPayload({
      conversation: {
        conversationId: newConversationId
      }
    });
  }
}

2. Tích Hợp Dạng React / Next.js Component

import React, { useEffect } from 'react';

interface CaresoftWidgetProps {
  currentTicketId: string;
  agentAccount: {
    id: number;
    username: string;
    email: string;
  };
}

export const CaresoftAIWidget: React.FC<CaresoftWidgetProps> = ({
  currentTicketId,
  agentAccount
}) => {
  useEffect(() => {
    // 1. Tải script SDK
    const script = document.createElement('script');
    script.type = 'module';
    script.src = 'https://cps-ai-widget.mydatalakes.com/widget.js';
    script.async = true;

    script.onload = () => {
      if (window.pcw) {
        window.pcw.init();
        
        // Gán ngữ cảnh khởi tạo
        window.pcw.setPayload({
          conversation: { conversationId: currentTicketId },
          account: {
            id: agentAccount.id,
            username: agentAccount.username,
            mainEmail: agentAccount.email
          }
        });
      }
    };

    document.body.appendChild(script);

    // Cleanup khi component unmount
    return () => {
      if (window.pcw) {
        window.pcw.destroy();
      }
      document.body.removeChild(script);
    };
  }, []);

  // Khi currentTicketId thay đổi, chỉ cập nhật lại conversationId
  useEffect(() => {
    if (window.pcw && currentTicketId) {
      window.pcw.setPayload({
        conversation: { conversationId: currentTicketId }
      });
    }
  }, [currentTicketId]);

  return null; // Widget render thông qua Iframe độc lập ở góc màn hình
};

5. Kết Quả Sau Triển Khai Tại Caresoft

Thời gian phản hồi ticket trung bình (First Response Time): Giảm 42% nhờ AI gợi ý câu trả lời chính xác có sẵn.
Độ hài lòng của tổng đài viên: Đạt 94% đánh giá tích cực nhờ giao diện widget gọn gàng, không che khuất các trường dữ liệu trên màn hình CRM.

Case Study Thực Tế 1: Tích Hợp Caresoft CRM (CPS)

On this page