# Nhúng live chat vào website

<figure><img src="https://2193274687-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2Fw9FEMPuWidjTVayVtnJj%2Fuploads%2FIhF617jcIzAIqfKUTpRb%2FTichhopLiveChat.png?alt=media&#x26;token=698b8d36-f448-4d0e-adbc-3698e9084475" alt=""><figcaption><p>Giao diện Live chat của Caresoft được nhúng trên trang chủ </p></figcaption></figure>

## Các bước chuẩn bị

* Tạo domain chat.
* Tạo dịch vụ &#x20;
* Chọn đúng domain chat cần lấy mã và copy mã
* Nhúng vào ứng dụng/website&#x20;

## Trình tự thực hiện&#x20;

{% hint style="info" %}
Các bước này cần tài khoản Admin truy cập vào CareSoft và thực hiện trên giao diện CareSoft
{% endhint %}

<figure><img src="https://2193274687-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2Fw9FEMPuWidjTVayVtnJj%2Fuploads%2FSZ152Em64Or2EZBsSqhK%2Fcauhinh.png?alt=media&#x26;token=0dce74c9-a7b3-4d58-8410-d9962a37d458" alt=""><figcaption></figcaption></figure>

#### Tạo domain chat

Thông thường mỗi website sẽ nhúng 1 box chat riêng (có định danh riêng) để nhận diện và cấu hình độc lập nhau. Caresoft có thể tạo nhiều box chat riêng dành cho nhiều website.

Các domain có tiền tố là domain gốc CareSoft cung cấp cho khách hàng, Admin khai báo hậu tố và submit thông tin.&#x20;

<figure><img src="https://2193274687-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2Fw9FEMPuWidjTVayVtnJj%2Fuploads%2FtO1AevAYwSQjs21isIZv%2Fchat_themmoi_domain.png?alt=media&#x26;token=db67ac7b-54b0-4f66-a37d-5e22294daf63" alt=""><figcaption></figcaption></figure>

Mặc định sẽ có một domain tương ứng với domain gốc của khách hàng.&#x20;

{% hint style="info" %}
Nên đặt các domain chat theo website/ứng dụng nơi nó được nhúng tới đảm bảo tính gợi nhớ thông tin dễ tra cứu sau này
{% endhint %}

#### Tạo dịch vụ chat để tiếp nhận yêu cầu.&#x20;

1 Box chat trên 1 website có thể điều hướng luồng chat tới nhiều bộ phận/chuyên viên tiếp nhận khác nhau. CareSoft gọi thành phần này là "Dịch vụ". Nếu bạn chỉ tạo 1 dịch vụ Hộp chat sẽ mặc định nhận dịch vụ đó và ẩn đi lựa chọn dịch vụ khi chat. Nếu bạn tạo nhiều hơn 1 dịch vụ. Thì trên giao diện khách hàng sẽ có thêm lựa chọn "Chọn dịch vụ".   Tương tự như tình huống vào 1 doanh nghiệp khách muốn gặp "Phòng Bán Lẻ" hay "Phòng CSKH".&#x20;

Dịch vụ là bắt buộc và cần tối thiểu 1 dịch vụ khi chat.  Dịch vụ không khởi tạo mặc định nên cần phải cấu hình.&#x20;

<figure><img src="https://2193274687-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2Fw9FEMPuWidjTVayVtnJj%2Fuploads%2F5bDyus29eLcqSc7aCX8o%2Fchat_them_dichvu.png?alt=media&#x26;token=1479c1e1-93cb-41c6-959d-7cdd4c1f58a1" alt=""><figcaption></figcaption></figure>

Sau khi tạo dịch vụ Thông qua tính năng gán độ ưu tiên, Admin có thể gán luồng chat cho chuyên viên tiếp nhận theo từng dịch vụ được tạo

<figure><img src="https://2193274687-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2Fw9FEMPuWidjTVayVtnJj%2Fuploads%2FSwcRr4DZIQoKEV29hG1q%2Fchat_danhsach_dichvu.png?alt=media&#x26;token=27f2cd06-abf7-46a7-8079-ab0bbaf5528c" alt=""><figcaption></figcaption></figure>

{% hint style="info" %}
Nên đặt tên dịch vụ gần với tên website/ứng dụng nơi hộp chat được nhúng vào&#x20;
{% endhint %}

#### Cấu hình hộp chat

Trong tab "Thông tin". Admin có thể tùy chỉnh thông tin hộp chat theo nhiều tùy chọn được cung cấp như "Logo", Màu Sắc, Vị trí,  Nội dung hiển thị.&#x20;

*Lưu ý chọn đúng domain chat cần cấu hình (Ô khoanh đỏ trong hình)*

<figure><img src="https://2193274687-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2Fw9FEMPuWidjTVayVtnJj%2Fuploads%2Fm6KDJnH5Wklj1IfR4OGG%2Fchat_cauhinh_box_chat.png?alt=media&#x26;token=e03c3415-6232-4d25-89a8-c0e7b9b4aa31" alt=""><figcaption></figcaption></figure>

#### Chọn mã nhúng và không gian nhúng (App hay Web)

Ở Tab Mã Nhúng, Admin lựa chọn không gian nhúng và các tùy chọn cụ thể với hộp chat sau đó copy code.&#x20;

*Cần lưu ý chọn đúng Domain cần nhúng (Phần khoanh đỏ) trong hình..*&#x20;

Copy đoạn code được CareSoft render và chuyển cho Lập trình viên thực hiện nhúng vào ứng dụng

Thông thường đoạn code nên đặt ở phần header  của giao diện trang web. Nơi được Include thông suốt vào các trang con của toàn trang web. Cần đảm bảo code nhúng được đặt vào vị trí có thể render ra giao diện HTML và có thể kiểm tra qua http request.

<figure><img src="https://2193274687-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2Fw9FEMPuWidjTVayVtnJj%2Fuploads%2Fw5b5Hduy9j7356PACFjt%2Fchat_code_nhung.png?alt=media&#x26;token=9ffbf122-183b-4a65-8af1-960b816fea71" alt=""><figcaption></figcaption></figure>

### Kiểm tra hoạt động&#x20;

Truy cập vào website/Ứng dụng đảm bảo hiển thị thông tin như mong muốn.

<figure><img src="https://2193274687-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2Fw9FEMPuWidjTVayVtnJj%2Fuploads%2FO83YaWJQmiPrpxTtr4yu%2Fchat_ketqua.png?alt=media&#x26;token=0dd5b4de-935b-4285-b012-eeea19a1acf5" alt=""><figcaption><p>Trong hình dưới đây Box chat được nhúng có sẵn phần chọn dịch vụ với 2 dịch vụ được tạo phía trên. </p></figcaption></figure>