Tích hợp kênh thoại trên ứng dụng Web (Voice API)

Giải pháp tích hợp kênh thoại trên ứng dụng Web, bao gồm cả luồng gọi vào và gọi ra.

  • Hỗ trợ các loại ứng dụng web (web app) tích hợp tổng đài thoại CareSoft.

  • Người dùng (user) của doanh nghiệp có thể thực hiện việc tiếp nhận cuộc gọi hay gọi điện ra ra cho khách hàng thông qua số hotline CareSoft.

  • Popup thông tin khách hàng khi có cuộc gọi đến

  • Công nghệ sử dụng WebRTC không cần cài đặt thêm phần mềm nghe gọi điện.

  • Hỗ trợ tích hợp với các thiết bị nghe gọi như IP Phone, Softphone

Chuẩn bị thông tin

  1. Lấy mã xác thực từ giao diện admin CareSoft. Truy cập vào CareSoft bằng tài khoản admin mà CareSoft cấp cho khách hàng.

  2. Tại menu Admin --> Api --> Api Token. Ở dòng Token voice api hiện tại chọn Tạo token mới nếu chưa có hoặc Copy nếu đã có và lưu lại thành 1 cấu hình {{apiVoiceAccessToken}}

  1. Thư viện JWT phù hợp với ngôn ngữ lập trình của bạn để tạo mã token cho mỗi cuộc gọi. Xem thêm ở www.jwt.io

LƯU Ý: Khi bấm nút tạo mới hệ thống sẽ thay thế apiVoiceAccessTokencũ bằng apiVoiceAccessToken mới khiến các ứng dụng đang tích hợp sẽ mất quyền truy cập. Vui lòng cập nhật token ở các ứng dụng theo token mới nếu bạn bấm "Tạo token mới" để đảm bảo hệ thống hoạt động liền mạch

Cách thức tích hợp

  1. Chuẩn bị payload để tạo mã token cuộc gọi

{
  "ipphone": "{{agent_id}}",
  "expired": "2017-07-30 00:00:00"
}

Trong đó:

  • IpPhone Là số Iphone của Chuyên viên tương ứng (Xem thêm thông tin chuyên viên ở Chuyên viên)

  • expired Thời hạn hết hạn của token

  1. Lập trình với thư viện JWT để tạo ra chuỗi token trong hình dưới là cách thức gen token sử dụng trực tiếp từ trang web jwt.io. Xem các hướng dẫn và thư viện tương thích trong mục "Libraries" của JWT

Ví dụ: Tạo chuỗi token đăng nhập vào hệ thống Caresoft sử dụng giao diện JWT.io

Copy chuỗi token JWT lưu thành biến {{token}} Ví dụ ở trường hợp trên sẽ là eyJhbGciOiJIUzI1NiIsInR5cCI6IkpXVCJ9....e_ZYyfTxg3EDG6vrKxhbZXPx9tQXrLcB5o

  1. Sau khi gen token, CRM gọi API service bên dưới để login vào Caresoft để đăng ký token với hệ thống.

Payload body đăng nhập
 {
    "token": "eyJhbGciOiJIUzI1NiIsInR5cCI6IkpXVCJ9.....g3EDG6vrKxhbZXPx9tQXrLcB5o"
  }

Đăng nhập VoiceAPI

POST https://capi.caresoft.vn/{domain}/thirdParty/login

Request Body

{
    "code": "ok",
    "user": {
        "accountId": 1223,
        "account_id": 1223,
        "userId": "1",
        "email": "sample@gmail.com",
        "name": "Sale Department",
        "username": "Sale Department",
        "agentId": "5000",
        "agent_id": "5000",
        "phone_no": "0864894596",
        "ipAddress": "222.252.98.36",
        "groupId": "10001",
        "role": "1",
        "active": "1"
    }
}

Mẫu minh họa gọi hàm login từ postman

Lập trình tích hợp tiếp nhận cuộc gọi CareSoft vào CRM

Chú ý: Nếu bạn lập trình trên localhost, cài extension "Allow Cross Domain" trên Chrome để không bị lỗi Cross Domain.

  • Import các lib javascript đã được CareSoft cung cấp sẵn vào CRM (trong đó custom.js là file js chứa các hàm CareSoft định nghĩa sẵn để hỗ trợ thông báo, xử lý giao diện, tương tác tuỳ theo nhu cầu của từng CRM)

    	<script src="https://capi.caresoft.vn/js/embed/jquery.min.js" type="text/javascript"></script>    
    	<script src="https://capi.caresoft.vn/js/embed/jssip-3.2.10.js" type="text/javascript"></script>
    	<script src="https://capi.caresoft.vn/js/embed/init-3.0.7.js" type="text/javascript"></script>
    	<script src="https://capi.caresoft.vn/js/embed/web.push.js" type="text/javascript"></script>
    	<script src="https://capi.caresoft.vn/js/embed/cs_const.js" type="text/javascript"></script>
    	<script src="https://capi.caresoft.vn/js/embed/cs_voice.js" type="text/javascript"></script>
    	<script src="custom.js" type="text/javascript"></script>
  • Copy dòng sau giữa thẻ body:

    	<video id="my-video" style="display: none;" autoplay playsinline muted></video>
    	<video id="peer-video" style="display: none;" autoplay playsinline></video>
  • Thực hiện việc kết nối với tổng đài CareSoft qua hàm sau:

      csInit(token, domain);

Trong đó token là token đã được tạo ra ở bước 1

  • Tại một thời điểm, chỉ 1 tab có quyền gọi và tiếp nhận cuộc gọi. Để cho 1 tab bật quyền tiếp nhận cuộc gọi, gọi hàm csEnableCall();

  • Hệ thống hỗ trợ 2 loại thiết bị nghe gọi:

  • Nghe gọi trên trình duyệt

  • Nghe gọi qua softphone, IP Phone

Tuỳ thuộc vào loại thiết bị sẽ sử dụng mà chọn thiết bị bằng cách gọi hàm sau:

         changeDevice(type);

Trong đó: - type = 1: nghe gọi trên trình duyệt - type = 2: nghe gọi qua softphone, IP Phone

Trong trường hợp muốn tắt trình duyệt đi mà vẫn tiếp nhận được cuộc gọi qua ipphone/softphone, chuyển type = 4.

Trong trường hợp muốn tắt trình duyệt đi mà vẫn tiếp nhận được cuộc gọi qua GSM, chuyển type = 3 và truyền vào số điện thoại di động sẽ tiếp nhận cuộc gọi.

           changeDevice(3, '093xxxxxxxx');

Sau khi F5, hoặc đăng xuất, không sử dụng nữa thì phải huỷ đăng ký gọi và chuyển về thiết bị gọi mặc định để có thể tiếp tục sử dụng bình thường bằng cách sử dụng đoạn code sau:

          $(window).bind('unload', function () {
             csUnregister();
                 if (csVoice.enableVoice) {
                         reConfigDeviceType();
                 }
            });

Sau khi kết nối thành công với tổng đài, ngay lúc này đã có thể nhận và gọi điện tới khách hàng. Các hàm dùng để tương tác với hệ thống:

Ngoài ra, khi muốn thay đổi giao diện hoặc xử lý thông tin mỗi khi có một sự kiện của cuộc gọi, CareSoft hỗ trợ các hàm sau

Chú ý: Tất cả các hàm dưới đây đều phải được implement để đảm bảo tính đúng đắn của chương trình

Chú ý: csTransferCallError,csTransferCallSuccess,csNewCallTransferRequest chỉ áp dụng cho cuộc gọi chuyển từ agent sang agent , không áp dụng cho cuộc gọi chuyển nhánh, cuộc gọi chuyển nhánh sẽ hoạt động như 1 cuộc gọi vào bình thường

Các hàm này đã được để trong file custom.js

Phụ lục: Bảng mã lỗi khi gọi ra

Bảng mã lỗi khi chuyển cuộc gọi

Các thuộc tính trong csVoice

Last updated