Gắn khung chat "Chăm sóc bạn đọc" vào web của bạn

Chỉ cần một thẻ script. Không cài thư viện, không đổi gì ở phần còn lại của trang; khung chat tự chạy trong vùng riêng nên CSS của trang không làm vỡ nó và nó cũng không đè kiểu lên trang.

Bước 1 — Thêm thẻ script vào layout chung

Đặt ngay trước </body> của layout dùng chung cho mọi trang. Cùng một thẻ cho mọi loại web:

ASP.NET Core / MVC: Views/Shared/_Layout.cshtml.
MVC 5 (.NET Framework): Views/Shared/_Layout.cshtml (cùng thẻ, không cần gói NuGet).
HTML tĩnh: từng trang, hoặc tệp mẫu chung nếu có.

<script src="http://trolychamsocbandoc.toasoan.vn/tro-ly-ban-doc.js" defer></script>

Địa chỉ http://trolychamsocbandoc.toasoan.vn là địa chỉ cổng trợ lý của môi trường này; ở web thật dùng địa chỉ cổng của máy chủ chính thức. Khung chat tự lấy địa chỉ cổng từ chính thẻ script, nên web tích hợp không phải khai thêm gì.

Tuỳ chọn duy nhất ở bản đầu — đổi tiêu đề khung bằng data-tieu-de (mặc định "Chăm sóc bạn đọc"):

<script src="http://trolychamsocbandoc.toasoan.vn/tro-ly-ban-doc.js" data-tieu-de="Hỏi đáp cùng Lao Động" defer></script>

Bước 2 — Đăng ký tên miền của web với cổng

Cổng chỉ nhận câu hỏi từ các tên miền đã đăng ký. Thêm nguồn gốc (origin) của web vào TroLyBanDoc:TenMienDuocPhep trong cấu hình của cổng:

"AppConfiguration": {
  "TroLyBanDoc": {
    "TenMienDuocPhep": [ "https://laodong.vn", "https://www.laodong.vn" ]
  }
}

Hoặc bằng biến môi trường ở máy chủ:

AppConfiguration__TroLyBanDoc__TenMienDuocPhep__0=https://laodong.vn
AppConfiguration__TroLyBanDoc__TenMienDuocPhep__1=https://www.laodong.vn

Mỗi mục có giao thức và tên miền, không có đường dẫn, không dấu / cuối: https://laodong.vn, không phải https://laodong.vn/tin-tuc.
https://laodong.vn và https://www.laodong.vn là hai nguồn gốc khác nhau — đăng ký cả hai nếu web chạy ở cả hai.
Cổng đọc cấu hình một lần lúc khởi động: sửa xong phải khởi động lại cổng.

Bước 3 — Nếu web có Content-Security-Policy

Thêm địa chỉ cổng vào ba chỉ thị (không thêm thì trình duyệt chặn script, CSS hoặc lời gọi hỏi):

Content-Security-Policy:
  script-src  'self' http://trolychamsocbandoc.toasoan.vn;
  style-src   'self' http://trolychamsocbandoc.toasoan.vn;
  connect-src 'self' http://trolychamsocbandoc.toasoan.vn;

Kiểm tra

Tải lại trang: nút "Chăm sóc bạn đọc" hiện ở góc dưới bên phải (điện thoại: nút tròn).
Bấm nút, hỏi một câu: danh sách bài nguồn hiện trong khoảng 2 giây, câu trả lời chảy dần, [1], [2] bấm được tới bài nguồn.
Mở tab Network của trình duyệt: có lời gọi POST http://trolychamsocbandoc.toasoan.vn/api/tin-tuc/tro-ly-ban-doc và không có khoá nào trong tiêu đề hay mã nguồn trang — khoá nằm hoàn toàn ở cổng.

Khi có sự cố

Hiện tượng	Nguyên nhân thường gặp
Không thấy nút	Địa chỉ trong thẻ script sai hoặc cổng chưa chạy (mở thẳng `http://trolychamsocbandoc.toasoan.vn/tro-ly-ban-doc.js` phải ra mã JavaScript); CSP chặn `script-src`; thẻ script nằm ngoài layout chung.
Khung hiện nhưng báo "Không kết nối được"	Tên miền của web chưa đăng ký ở Bước 2 (tab Console báo CORS); hoặc cổng/Api tắt; hoặc CSP chặn `connect-src`.
"Bạn gửi hơi nhanh, vui lòng đợi một chút."	Một địa chỉ IP chỉ được gửi 5 câu mỗi phút. Sau cổng/CDN mà mọi bạn đọc cùng bị chặn: cổng chưa được cấu hình `DiaChiProxyTinCay` nên thấy mọi người cùng một IP của proxy.
"Hệ thống đang bận, vui lòng thử lại."	Máy chủ AI đang bận (GPU chỉ trả lời một câu một lúc) hoặc Api phía sau lỗi; xem nhật ký của cổng — nguyên nhân thật chỉ ghi ở đó, không hiện cho bạn đọc.

Lưu ý

Khung chat không dùng nội dung trang đang xem: mọi câu hỏi tìm trên toàn bộ kho bài đã nạp, và mỗi câu hỏi độc lập (không nhớ câu trước).
Nút nằm ở góc dưới bên phải, cách mép 20 px. Nếu web đã có thành phần cố định ở góc đó (quảng cáo dính đáy, nút lên đầu trang) thì sẽ chồng nhau — tuỳ chọn khoảng cách sẽ bổ sung ở bản sau.
Sửa tệp nhúng xong, mọi web nhận bản mới trong tối đa 5 phút (trình duyệt đệm tệp theo Cache-Control: max-age=300).
Không bao giờ đặt khoá Api vào trang web hay JavaScript của web: chỉ cổng giữ khoá.