Hướng Dẫn Nhúng Mã Chatbot

💡 1. Quy Trình Tổng Quan

Để bắt đầu chăm sóc khách hàng tự động trên website, bạn cần sao chép đoạn mã script nhúng được cung cấp từ trang Admin HanelBot và chèn vào mã nguồn website của bạn.

Mã nhúng của HanelBot là mã tải bất đồng bộ (asynchronous), cam kết không gây ảnh hưởng đến tốc độ tải trang (Page Speed) và hiệu năng SEO của website.

🌐 2. Tích hợp trên Web tĩnh (HTML/PHP)

Cách đơn giản nhất là chèn mã trực tiếp vào file giao diện HTML chung của website.

Mở file template hoặc trang chính của website bạn (ví dụ: index.html, footer.php, hoặc layouts.html).
Sao chép mã nhúng của website của bạn từ trang Admin Panel.
Tìm thẻ đóng </body> (thường nằm ở cuối file).
Dán đoạn mã nhúng ngay trước thẻ đóng </body> đó.

Ví dụ minh họa cấu trúc vị trí dán mã:

<html>
  <head>
    <title>Trang web của tôi</title>
  </head>
  <body>
    <!-- Nội dung trang web của bạn -->
    <h1>Xin chào!</h1>

    <!-- DÁN MÃ NHÚNG HANELBOT VÀO ĐÂY -->
    <script>!function(s,u,b,i,z){s[i]=s[i]||function(){(s[i].q=s[i].q||[]).push(arguments)};var t=u.createElement(b),n=u.getElementsByTagName(b)[0];t.async=1;t.src=z;n.parentNode.insertBefore(t,n)}(window,document,"script","hanelbot","http://localhost/hanelnet.vn/hanelbot/chatbot/widget.js?site_key=web_xyz")</script>
  </body>
</html>

📝 3. Cài đặt trên WordPress

Bạn có hai cách để thực hiện nhúng mã vào website WordPress:

Cách 1: Sử dụng Plugin Insert Headers and Footers (Khuyên dùng)

Truy cập vào trang quản trị WordPress của bạn, chọn Plugins (Gói mở rộng) > Add New (Cài mới).
Tìm kiếm plugin mang tên WPCode - Insert Headers and Footers. Tiến hành cài đặt và kích hoạt (Activate).
Sau khi kích hoạt, chọn mục Code Snippets > Header & Footer ở cột menu bên trái.
Dán đoạn mã nhúng HanelBot vào phần Footer (chân trang).
Nhấn Save Changes (Lưu thay đổi) để hoàn tất.

Cách 2: Nhúng thủ công vào tệp `footer.php` của Theme

Trong Admin WordPress, chọn Appearance (Giao diện) > Theme File Editor (Trình chỉnh sửa tệp chủ đề).
Ở cột danh sách tệp bên phải, tìm và nhấp chọn tệp Theme Footer (footer.php).
Tìm đến cuối file, dán mã nhúng của bạn ngay phía trước thẻ đóng </body>.
Nhấp nút Update File (Cập nhật tệp tin).

🚀 4. Cài đặt trên LadiPage Việt Nam

Thực hiện tích hợp Livechat nhanh chóng vào trang Landing Page thiết kế bằng LadiPage:

Truy cập vào trình thiết kế LadiPage của bạn.
Tại thanh công cụ phía trên trang thiết kế, nhấp chọn mục Thiết lập > Mã Javascript/CSS.
Tại mục Trước thẻ </body>, tiến hành dán toàn bộ đoạn mã nhúng của bạn vào.
Nhấn Đóng để ghi nhớ thiết lập.
Nhấn nút Xuất bản (Publish) ở góc trên bên phải để áp dụng mã nhúng lên trang trực tuyến.

🛍️ 5. Cài đặt trên Haravan hoặc Shopify

Áp dụng cho các nền tảng thương mại điện tử phổ biến hiện nay:

Đăng nhập quản trị Website (Haravan / Shopify).
Vào mục Website (Online Store) > Giao diện (Themes).
Bấm biểu tượng dấu 3 chấm ... bên cạnh giao diện hiện hành > chọn Chỉnh sửa code (Edit code).
Tìm tệp tin layout chính tên là theme.liquid trong thư mục Layout.
Cuộn xuống cuối file, dán mã nhúng HanelBot của bạn ngay trước thẻ đóng </body>.
Bấm Lưu (Save) ở góc phải phía trên để lưu cài đặt.