Hướng dẫn nhúng mã Script

Để chatbot Vielora hoạt động trên website của bạn, bạn cần nhúng một đoạn mã JavaScript nhỏ vào mã nguồn trang. Phần này hướng dẫn chi tiết cách thực hiện trên các nền tảng phổ biến.

Lấy mã nhúng

Mã nhúng duy nhất của chatbot được tạo tự động và có thể tìm thấy tại:

Bảng điều khiển > Chọn chatbot > Tab Tích hợp > Mã nhúng Script

Mỗi chatbot có một Bot ID riêng biệt được nhúng trong đoạn mã. Không chia sẻ mã nhúng này công khai ngoài phạm vi cần thiết.

Nhúng vào trang HTML thuần

Dán đoạn mã ngay trước thẻ đóng </body> của trang HTML:

<!DOCTYPE html>
<html lang="vi">
  <head>
    <meta charset="UTF-8" />
    <title>Website của tôi</title>
  </head>
  <body>
    <!-- Nội dung trang web -->

    <!-- Vielora Chatbot Widget -->
    <script
      src="https://app.vielora.ai/widget.js"
      data-bot-id="YOUR_BOT_ID"
      data-base-url="https://app.vielora.ai"
      id="vielora-script"
      defer
    ></script>
  </body>
</html>

Nhúng vào WordPress / PHP

Phương pháp 1: Qua giao diện quản trị WordPress (Khuyến nghị)

Đăng nhập vào WordPress Admin > Giao diện (Appearance) > Trình chỉnh sửa Theme (Theme Editor).
Mở tệp footer.php của theme đang sử dụng.
Dán đoạn mã Vielora ngay trước thẻ </body>:

<!-- Thêm trước </body> trong file layout chính -->
<script
  src="https://app.vielora.ai/widget.js"
  data-bot-id="<?php echo $botId; ?>"
  data-base-url="https://app.vielora.ai"
  id="vielora-script"
  defer
></script>

</body>

Nhấn Cập nhật tệp (Update File) để lưu thay đổi.

Phương pháp 2: Qua plugin Insert Headers and Footers

Nếu bạn không muốn chỉnh sửa tệp theme trực tiếp:

Cài đặt plugin Insert Headers and Footers (hoặc tương đương).
Điều hướng đến Cài đặt > Insert Headers and Footers.
Dán mã Vielora vào ô Scripts in Footer.
Lưu thay đổi.

Hướng dẫn thêm: Phương pháp plugin được ưu tiên trong môi trường WordPress được quản lý (Managed WordPress Hosting), nơi việc chỉnh sửa tệp theme trực tiếp có thể bị hạn chế.

Nhúng vào React / Vue / Các framework hiện đại

Đối với các ứng dụng Single Page Application (SPA) sử dụng React, Vue, Angular hoặc các framework tương đương, cách tiếp cận tối ưu là tải script một lần tại component gốc.

React (Next.js / Create React App)

Trong tệp _document.js (Next.js) hoặc public/index.html (Create React App), thêm thẻ script:

<script
  src="https://app.vielora.ai/widget.js"
  data-bot-id="YOUR_BOT_ID"
  data-base-url="https://app.vielora.ai"
  id="vielora-script"
  defer
></script>

Vue (Vue 3 / Nuxt.js)

Trong App.vue hoặc layout chính (layouts/default.vue cho Nuxt), thêm vào lifecycle hook onMounted:

<script setup>
import { onMounted } from "vue";

onMounted(() => {
  const script = document.createElement("script");
  script.src = "https://app.vielora.ai/widget.js";
  script.setAttribute("data-bot-id", "YOUR_BOT_ID");
  script.setAttribute("data-base-url", "https://app.vielora.ai");
  script.id = "vielora-script";
  script.defer = true;
  document.body.appendChild(script);
});
</script>

Lưu ý quan trọng: Trong các ứng dụng SPA, đảm bảo script chỉ được tải một lần duy nhất trong vòng đời ứng dụng. Việc tải script nhiều lần (ví dụ: khi điều hướng giữa các trang) có thể dẫn đến hiển thị nhiều widget chồng lên nhau.

Xác minh tích hợp thành công

Sau khi nhúng mã, hãy thực hiện kiểm tra sau:

Tải lại trang trên trình duyệt.
Quan sát góc dưới màn hình (theo vị trí bạn đã cấu hình) — nút mở chat của Vielora sẽ xuất hiện.
Nhấn vào nút để mở cửa sổ chat và gửi một tin nhắn kiểm tra.
Xác nhận rằng chatbot phản hồi chính xác.

Nếu widget không xuất hiện, hãy kiểm tra Console của trình duyệt (F12) để xem thông báo lỗi liên quan đến tải script hoặc xác minh domain.

Bước tiếp theo

Bảo mật & Giới hạn tin nhắn để đảm bảo chatbot được bảo vệ đúng cách.
Phân tích cuộc trò chuyện để theo dõi hiệu suất chatbot sau khi triển khai.

PreviousBảo mật & Giới hạn tin nhắn NextXem thống kê & Hoạt động

Last updated 12 days ago

Good morning

hashtagLấy mã nhúng

hashtagNhúng vào trang HTML thuần

hashtagNhúng vào WordPress / PHP

hashtagPhương pháp 1: Qua giao diện quản trị WordPress (Khuyến nghị)

hashtagPhương pháp 2: Qua plugin Insert Headers and Footers

hashtagNhúng vào React / Vue / Các framework hiện đại

hashtagReact (Next.js / Create React App)

hashtagVue (Vue 3 / Nuxt.js)

hashtagXác minh tích hợp thành công

hashtagBước tiếp theo