# Tích hợp gọi ra sử dụng Click to call trên web

Trên CRM/ERP khi phát sinh nhu cầu cần gọi  điện cho khách hàng qua tổng đài CareSoft. Giúp giảm thiểu rủi ro do thao thác nhập liệu giữa các ứng dụng. Lập trình viên có thể sử dụng Click to call của CareSoft để thực hiện nghiệp vụ này.

## Các bước chuẩn bị&#x20;

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. Tại menu Admin --> Api --> Api Token.&#x20;

<figure><img src="https://2193274687-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2Fw9FEMPuWidjTVayVtnJj%2Fuploads%2FB1jLabwd54SvgAuhDweM%2FAPI_VOICE_TOKEN.png?alt=media&#x26;token=25a903fa-0415-4031-bbf5-94a19661bb1e" alt=""><figcaption></figcaption></figure>

2. Ở 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}}`&#x20;

{% hint style="info" %}
**LƯU Ý:** Khi  bấm nút tạo mới hệ thống sẽ thay thế `apiVoiceAccessToken`cũ 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&#x20;
{% endhint %}

3. 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](https://jwt.io/)
4. Liên kết để mở ra khi thực hiện cuộc gọi \
   `https://c2c.caresoft.vn/{{domain}}/c2call?token={{token}}&number={{phoneNo}}&device={{deviceId}}`\
   Trong đó `deviceId` là Id của thiết bị để gọi ra `1`: web, `2`: IPPhone

## Cách thức thực hiện.

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

<pre class="language-json" data-title="Mẫu Payload"><code class="lang-json">{
    "ipphone": "{{agent_id}}",
    "expired": "2017-07-30 00:00:00",
    "callout_id":"<a data-footnote-ref href="#user-content-fn-1">{{callOutId}}</a>"
  }

</code></pre>

**Trong đó:**&#x20;

* `IpPhone` Là số Iphone của Chuyên viên tương ứng (Xem thêm thông tin chuyên viên  ở [chuyen-vien](https://docs.caresoft.vn/danh-muc/restful-api-cua-caresoft/chuyen-vien "mention"))
* `expired` Thời hạn hết hạn của token
* `callout_id` ID của đầu số muốn gọi ra, nếu không truyền vào sẽ lấy đầu số default được gán cho agent để gọi ra. (Liên hệ với bộ phận hỗ trợ của CareSoft để có danh sách ID đầu số gọi ra đã tích hợp vào hệ thống)&#x20;

2. 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](https://jwt.io/libraries)" của JWT

*Ví dụ minh họa: Sử dụng giao diện web jwt.io để gen token*

<figure><img src="https://2193274687-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2Fw9FEMPuWidjTVayVtnJj%2Fuploads%2FMNFRnq5IA0GGFNVNHaMJ%2FJWT.png?alt=media&#x26;token=0ff1dcc3-010d-47cc-bee7-5edf628ec4fa" alt=""><figcaption></figcaption></figure>

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

2. Nhúng link theo từng số điện thoại cần thực hiện gọi\
   Lập trình viên thực hiện gép các chuỗi thông tin lại  thành 1 liên kết  cấu trúc như mục 1.4  và thay thế các biến thông tin thành các chuỗi giá trị liên quan. Ở đây phoneNo là số điện thoại của khách hàng cần thực hiện gọi ra. \
   `https://c2c.caresoft.vn/{{domain}}/c2call?token={{token}}&number={{phoneNo}}&device={{deviceId}}`\
   \
   Sử dụng popup để mở ra cửa sổ mới với link trên. &#x20;
3. Tham khảo code html&#x20;

{% code title="Code html tham khảo " %}

```html
<!DOCTYPE html>
<html>
<body>
<h1>CRM</h1>
<button onclick="makeCsCall()">Gọi điện</button>
<script>
function makeCsCall() {
var url="https://c2c.caresoft.vn/{{domain}}/c2call?token={{token}}&number={{phoneNo}}" 
  window.open(url,"csCall","width=400,height=600");
}

function displayMessage(evt) {
             try {
                 console.log(evt);
             } catch (err) {
                 log(err);
             }
         }
        
         if (window.addEventListener) {
             // For standards-compliant web browsers
             window.addEventListener("message", displayMessage, false);
         } else {
             window.attachEvent("onmessage", displayMessage);
         }
</script>
</body>
</html>

```

{% endcode %}

Cửa sổ mở ra đường link trên sẽ có dạng&#x20;

<figure><img src="https://2193274687-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2Fw9FEMPuWidjTVayVtnJj%2Fuploads%2FcUwZhnAyoUeCyHaYnKOu%2FCS_CALL.png?alt=media&#x26;token=5b251c31-efd8-4571-99f3-3125a13a311e" alt=""><figcaption></figcaption></figure>

{% hint style="info" %}
**GỢI Ý:**\
Lập trình viên có thể bổ sung callback để lưu thông tin cuộc gọi lại phục vụ các nghiệp vụ khác
{% endhint %}

Mẫu dữ liệu callback CareSoft sẽ trả lại cửa sổ chính sau khi cuộc gọi kết thúc và cửa sổ cuộc gọi bị đóng lại.

<pre class="language-json" data-overflow="wrap"><code class="lang-json">{
  "id": 8,
  "type": "<a data-footnote-ref href="#user-content-fn-2">call_ended</a>",
  "data": {
    "customer_phone": "<a data-footnote-ref href="#user-content-fn-3">09xxxxxx</a>",
    "call_id": "<a data-footnote-ref href="#user-content-fn-4">20230412120428-OUTHJAMC-47</a>"
  },
  "origin": "caresoft",
  "queryString": "?token=eyJhbGciOiJIUz....mLNv54j34jZR7-baoSfEWqzlMxwyrcX_Ec&#x26;number=09xxxxxx"
}
</code></pre>

[^1]: null hoặc Liên hệ với bộ phận hỗ trợ của CareSoft để có danh sách ID đầu số gọi ra đã tích hợp vào hệ thống

[^2]: call\_ended: Kết thúc\
    call\_starting: Bắt đầu

[^3]: Số điện thoại gọi đến

[^4]: ID cuộc gọi
