AstroAPI

Appearance

Thêm Widget vào Website của Bạn ​

Hướng dẫn này chỉ cho bạn cách thêm widget hoặc chatbot AstroAPI vào website của mình — không cần kiến thức lập trình. Bạn chỉ cần sao chép một đoạn mã từ bảng điều khiển và dán vào trình dựng website của bạn.

Hướng dẫn bao gồm các bước chi tiết cho WordPress, Wix, Squarespace, Shopify và Webflow, cùng một phương pháp chung áp dụng được cho mọi website.

Bạn đang tìm API widget kỹ thuật?

Hướng dẫn này nói về việc dán mã nhúng có sẵn vào trang của bạn. Để tạo và cấu hình widget qua API, xem Widget Nhúng. Về API chatbot, xem Chatbot AI.

Bước 1: Lấy mã nhúng của bạn ​

  1. Đăng nhập vào bảng điều khiển AstroAPI.
  2. Vào mục Widgets (hoặc Chatbots đối với chatbot AI) và mở widget bạn muốn nhúng.
  3. Dùng tab Preview để kiểm tra widget hiển thị đúng ý bạn. Màu sắc, phông chữ và bố cục được cấu hình tại đây trong bảng điều khiển — không phải trong mã — nên sau này bạn có thể thay đổi giao diện widget mà không cần chạm vào website.
  4. Mở tab Embed và sao chép mã nhúng. Mã trông giống như sau:
html
<script
  src="https://api.astroapi.cloud/widgets/sdk.js"
  data-widget-id="wgt_abc123"
  data-api-key="your-api-key"
  data-api-url="https://api.astroapi.cloud"
></script>
<div id="astro-widget-wgt_abc123"></div>

Mã nhúng chatbot là một thẻ script duy nhất, không có <div>:

html
<script
  src="https://api.astroapi.cloud/widget.js"
  data-chatbot-id="your-chatbot-id"
  data-api-key="your-api-key"
></script>

Đó là toàn bộ mã bạn cần. Các phần tiếp theo sẽ chỉ cho bạn nơi dán mã, theo từng nền tảng.

Bảo vệ API key của bạn

Mã nhúng chứa một API key. Hãy dùng key chỉ có quyền widget hoặc chatbot — đừng bao giờ dùng API key chính của bạn. Bạn có thể tạo key giới hạn quyền trong mục API Keys của bảng điều khiển, và giới hạn chatbot chỉ hoạt động trên các tên miền của bạn trong Chatbots → Security.

WordPress ​

Cách A: Khối Custom HTML (khuyến nghị) ​

  1. Chỉnh sửa trang hoặc bài viết nơi widget sẽ xuất hiện.
  2. Nhấn nút + để thêm khối và tìm Custom HTML.
  3. Dán mã nhúng vào khối.
  4. Nhấn Preview để kiểm tra kết quả, rồi nhấn Update hoặc Publish.

Cách B: Toàn trang web (dành cho chatbot) ​

Để hiển thị chatbot trên mọi trang:

  1. Cài một plugin header/footer gọn nhẹ như WPCode, hoặc dùng tùy chọn "custom scripts" của theme — không cần chỉnh sửa file theme.
  2. Dán mã nhúng chatbot vào phần Footer (trước </body>).
  3. Lưu lại. Bong bóng chatbot giờ sẽ xuất hiện trên mọi trang.

Elementor

Bạn dùng Elementor? Hãy thêm widget HTML vào trang và dán mã nhúng vào đó.

Wix ​

  1. Trong trình chỉnh sửa Wix, nhấn Add Elements (nút +) ở thanh bên trái.
  2. Chọn Embed Code → Embed HTML.
  3. Nhấn Enter Code và dán mã nhúng.
  4. Nhấn Apply rồi kéo/thay đổi kích thước khung cho vừa với widget.
  5. Nhấn Publish.

Chatbot trên Wix

Wix hiển thị HTML nhúng bên trong một khung (frame), khiến bong bóng chatbot bị giới hạn trong khung đó. Để có chatbot trên toàn trang web, hãy dùng Settings → Custom Code thay thế (yêu cầu gói Wix trả phí): dán mã nhúng chatbot, đặt tải trên All pages, và đặt vị trí ở Body - end.

Squarespace ​

  1. Chỉnh sửa trang nơi widget sẽ xuất hiện.
  2. Nhấn vào một điểm chèn và chọn khối Code.
  3. Dán mã nhúng (giữ nguyên chế độ HTML mặc định).
  4. Lưu trang.

Để có chatbot trên toàn trang web, vào Settings → Advanced → Code Injection và dán mã nhúng chatbot vào trường Footer.

WARNING

Khối code và code injection yêu cầu gói Squarespace Business trở lên.

Shopify ​

  1. Trong trang quản trị Shopify, vào Online Store → Themes.
  2. Nhấn Customize trên theme hiện tại của bạn.
  3. Thêm một section Custom Liquid (hoặc khối HTML, tùy theo theme) vào trang nơi widget sẽ xuất hiện.
  4. Dán mã nhúng và nhấn Save.

Để có chatbot trên toàn trang web:

  1. Vào Online Store → Themes → ⋯ → Edit code.
  2. Mở layout/theme.liquid.
  3. Dán mã nhúng chatbot ngay trước thẻ đóng </body>.
  4. Nhấn Save.

Webflow ​

  1. Trong trình thiết kế Webflow, kéo một phần tử Embed (từ Add Elements → Components) vào trang của bạn.
  2. Dán mã nhúng vào trình soạn mã và nhấn Save & Close.
  3. Xuất bản trang web. Mã tùy chỉnh chỉ chạy trên trang đã xuất bản, không chạy trong bản xem trước của trình thiết kế.

Để có chatbot trên toàn trang web, vào Site Settings → Custom Code và dán mã nhúng chatbot vào trường Footer Code.

WARNING

Mã tùy chỉnh trong Webflow yêu cầu gói trang web trả phí.

Bất kỳ website nào khác ​

Nếu bạn (hoặc lập trình viên web của bạn) quản lý HTML trực tiếp:

  1. Mở file HTML hoặc template của trang.
  2. Dán mã nhúng widget vào vị trí widget sẽ xuất hiện trên trang.
  3. Đối với chatbot, dán mã nhúng của nó ngay trước thẻ đóng </body> — chatbot hiển thị dưới dạng bong bóng nổi, nên vị trí của nó trong HTML không quan trọng.

Khắc phục sự cố ​

Vùng widget vẫn trống. Kiểm tra xem cả hai phần của mã nhúng đã được dán chưa: thẻ <script> và thẻ <div> bên dưới. Một số trình dựng trang lược bỏ một trong hai phần.

"Invalid API key" hoặc không có gì tải lên. API key trong mã nhúng có thể đã bị thu hồi hoặc thiếu quyền phù hợp. Hãy sao chép mã nhúng mới từ tab Embed trong bảng điều khiển.

Chatbot không xuất hiện trên trang đã xuất bản. Nếu bạn đã giới hạn chatbot cho các tên miền cụ thể (Chatbots → Security → Allowed domains), hãy đảm bảo tên miền website của bạn có trong danh sách — bao gồm cả biến thể www. nếu trang của bạn dùng nó.

Widget trông khác với bản xem trước. Giao diện đến từ cấu hình trong bảng điều khiển và được tải cùng widget. Nếu bạn vừa thay đổi thiết kế gần đây, hãy tải lại trang mạnh (Ctrl+Shift+R / Cmd+Shift+R) để bỏ qua bộ nhớ đệm của trình duyệt.

Hoạt động trên máy tính nhưng không hoạt động trong webview của ứng dụng. Mã nhúng cần chạy JavaScript từ astroapi.cloud. Hãy đảm bảo chính sách bảo mật (CSP) của ứng dụng hoặc trang web cho phép script từ tên miền đó.

Bước tiếp theo ​

  • Widget Nhúng — tạo và cấu hình widget qua API
  • Chatbot AI — cấu hình hành vi, plugin và bảo mật của chatbot
  • Xác thực — tạo API key với quyền giới hạn

AstroAPI Documentation

Copyright © 2026 AstroAPI