Cách Thêm Chatbot AI Asyntai vào Bất kỳ Trang web Nào

Hướng dẫn chung cho HTML, các trang web tùy chỉnh và trình tạo tĩnh

Nền tảng:

Bước 1: Lấy Mã Nhúng của Bạn

First, go to your Asyntai Dashboard and scroll down to the "Embed Code" section. Copy your unique embed code which will look like this:

<script>(function(){var l=function(){var s=document.createElement("script");s.src="https://widget.asyntai.com/static/js/chat-widget.js";s.async=true;s.setAttribute("data-asyntai-id","YOUR_WIDGET_ID");document.head.appendChild(s)};if(document.readyState==="complete"){l()}else{window.addEventListener("load",l)}})();</script>

Lưu ý: Mã ở trên chỉ là ví dụ. Bạn phải sao chép mã nhúng duy nhất của riêng mình từ Bảng điều khiển vì nó chứa ID tiện ích cá nhân của bạn.

Bước 2: Thêm vào Tệp HTML

Cách đơn giản nhất để thêm chatbot là dán mã nhúng trực tiếp vào tệp HTML:

Mở tệp HTML trong trình biên tập văn bản
Tìm thẻ đóng </body>
Dán mã nhúng Asyntai ngay trước thẻ </body>
Lưu tệp

<!DOCTYPE html>
<html>
<head>
  <title>My Website</title>
</head>
<body>
  <!-- Your website content -->

  <!-- Asyntai Chatbot - Add before closing body tag -->
  <script>(function(){var l=function(){var s=document.createElement("script");s.src="https://widget.asyntai.com/static/js/chat-widget.js";s.async=true;s.setAttribute("data-asyntai-id","YOUR_WIDGET_ID");document.head.appendChild(s)};if(document.readyState==="complete"){l()}else{window.addEventListener("load",l)}})();</script>
</body>
</html>

Mẹo: Thêm script trước thẻ đóng </body> đảm bảo nó tải sau nội dung trang, tối ưu cho hiệu suất và sẽ không làm chậm trang.

Dành cho Trang web Nhiều Trang

Nếu trang web có nhiều trang HTML, bạn có một số lựa chọn:

Lựa chọn A: Thêm vào Mỗi Trang

Thêm mã nhúng vào mỗi tệp HTML nơi bạn muốn chatbot xuất hiện.

Lựa chọn B: Sử dụng Footer Include Chung

Nếu bạn đang sử dụng server-side includes (SSI), PHP includes hoặc tương tự:

Tạo tệp footer.html (hoặc footer.php)
Thêm mã nhúng Asyntai vào tệp này
Bao gồm tệp chân trang này trong tất cả các trang:
 <?php include 'footer.php'; ?>

Lựa chọn C: Tải JavaScript Động

Tạo một tệp JavaScript duy nhất tải chatbot trên tất cả các trang:

Tạo tệp có tên asyntai-loader.js:
(function() { var script = document.createElement('script'); script.async = true; script.src = 'https://asyntai.com/static/js/chat-widget.js'; script.setAttribute('data-asyntai-id', 'YOUR_WIDGET_ID'); document.body.appendChild(script); })();
Thay thế YOUR_WIDGET_ID bằng ID tiện ích thực tế của bạn
Bao gồm script này trong tất cả các trang:
<script src="/js/asyntai-loader.js"></script>

Dành cho Trình tạo Trang Tĩnh

Nếu bạn sử dụng trình tạo trang tĩnh, thêm mã nhúng vào bố cục cơ sở hoặc mẫu:

Jekyll

Thêm vào _includes/footer.html hoặc _layouts/default.html

Hugo

Thêm vào layouts/partials/footer.html hoặc layouts/_default/baseof.html

Gatsby

Thêm vào gatsby-browser.js hoặc sử dụng gatsby-ssr.js

Next.js

Thêm vào pages/_document.js hoặc sử dụng thành phần next/script

Nuxt.js

Thêm vào nuxt.config.js dưới head.script

Eleventy (11ty)

Thêm vào bố cục cơ sở trong _includes/

Astro

Thêm vào src/layouts/Layout.astro trước </body>

VuePress

Thêm vào .vuepress/config.js dưới head

Dành cho Ứng dụng React / Vue / Angular

Cho ứng dụng trang đơn (SPA), bạn có thể thêm script vào index.html hoặc tải động:

React (phương pháp index.html)

<!-- In public/index.html, before </body> -->
<script>(function(){var l=function(){var s=document.createElement("script");s.src="https://widget.asyntai.com/static/js/chat-widget.js";s.async=true;s.setAttribute("data-asyntai-id","YOUR_WIDGET_ID");document.head.appendChild(s)};if(document.readyState==="complete"){l()}else{window.addEventListener("load",l)}})();</script>

React (phương pháp useEffect)

// In your App.js or a component
useEffect(() => {
  const script = document.createElement('script');
  script.src = 'https://asyntai.com/static/js/chat-widget.js';
  script.async = true;
  script.setAttribute('data-asyntai-id', 'YOUR_WIDGET_ID');
  document.body.appendChild(script);
  return () => document.body.removeChild(script);
}, []);

Vue (trong main.js hoặc App.vue)

// In mounted() or onMounted()
const script = document.createElement('script');
script.src = 'https://asyntai.com/static/js/chat-widget.js';
script.async = true;
script.setAttribute('data-asyntai-id', 'YOUR_WIDGET_ID');
document.body.appendChild(script);

Angular (trong index.html)

<!-- In src/index.html, before </body> -->
<script>(function(){var l=function(){var s=document.createElement("script");s.src="https://widget.asyntai.com/static/js/chat-widget.js";s.async=true;s.setAttribute("data-asyntai-id","YOUR_WIDGET_ID");document.head.appendChild(s)};if(document.readyState==="complete"){l()}else{window.addEventListener("load",l)}})();</script>

Bước 3: Xác minh Cài đặt

Sau khi thêm mã, mở trang web trong tab trình duyệt mới hoặc cửa sổ ẩn danh. Bạn sẽ thấy nút tiện ích trò chuyện ở góc dưới bên phải. Nhấp vào nó để đảm bảo nó mở và hoạt động chính xác.

Không thấy tiện ích? Kiểm tra script được đặt đúng trước thẻ </body>. Đảm bảo không có lỗi JavaScript trong bảng điều khiển trình duyệt (nhấn F12 để mở công cụ nhà phát triển). Thử xóa bộ nhớ đệm trình duyệt hoặc xem trong cửa sổ ẩn danh.

Quan trọng: Chatbot yêu cầu trang web được phục vụ qua HTTP hoặc HTTPS (không mở trực tiếp dưới dạng tệp). Nếu bạn đang thử nghiệm cục bộ, hãy sử dụng máy chủ phát triển cục bộ.

Tài liệu