Cách Thêm Chatbot AI Asyntai vào BigCommerce

Hướng dẫn từng bước cho cửa hàng BigCommerce

Nền tảng:

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

Đầu tiên, đi đến Bảng điều khiển Asyntai và cuộn xuống phần "Mã Nhúng". Sao chép mã nhúng duy nhất của bạn sẽ trông như thế này:

<script async src="https://asyntai.com/static/js/chat-widget.js" data-asyntai-id="YOUR_WIDGET_ID"></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: Chọn Phương pháp Cài đặt

Có một số cách để thêm tiện ích trò chuyện vào BigCommerce. Chọn phương pháp phù hợp nhất với bạn:

Phương pháp 1: Sử dụng Trình quản lý Script (Khuyến nghị)

Trình quản lý Script là cách dễ nhất và được khuyến nghị để thêm tập lệnh tùy chỉnh vào cửa hàng BigCommerce của bạn. Nó không yêu cầu kiến thức lập trình và được giữ lại qua các thay đổi giao diện.

Đăng nhập vào Bảng Điều khiển BigCommerce của bạn
Đi đến Storefront → Script Manager
Nhấp nút "Create a Script"
Cấu hình tập lệnh với các cài đặt sau:
- Tên: Asyntai AI Chatbot
- Mô tả: Tiện ích trò chuyện được hỗ trợ bởi AI (tùy chọn)
- Vị trí: Chân trang
- Phạm vi: Tất cả Trang
- Danh mục Script: Functional
- Loại Script: Script
Trong hộp "Script Contents", dán mã nhúng Asyntai của bạn
Nhấp "Save"

Tại sao sử dụng Trình quản lý Script? Các tập lệnh được thêm qua Trình quản lý Script được quản lý riêng biệt khỏi giao diện. Chúng sẽ không bị ảnh hưởng khi bạn cập nhật hoặc thay đổi giao diện cửa hàng.

Phương pháp 2: Sử dụng Trình tạo Trang

Bạn có thể sử dụng Trình tạo Trang của BigCommerce để thêm tiện ích trò chuyện bằng phần tử HTML. Phương pháp này hữu ích nếu bạn muốn kiểm soát nhiều hơn vị trí tiện ích xuất hiện.

Đăng nhập vào Bảng Điều khiển BigCommerce của bạn
Đi đến Storefront → My Themes
Nhấp nút "Customize" trên giao diện đang hoạt động
Trong thanh bên trái của Trình tạo Trang, tìm phần tử "HTML"
Kéo và thả phần tử HTML vào vùng chân trang của mẫu trang
Nhấp vào phần tử HTML và chọn "Edit HTML"
Dán mã nhúng Asyntai của bạn
Nhấp "Save HTML"
Click "Publish" to apply changes to your live store

Lưu ý: Nếu bạn muốn chatbot trên tất cả các trang, bạn cần thêm nó vào vùng toàn cục như chân trang. Phương pháp Trình quản lý Script dễ hơn cho cài đặt toàn trang.

Phương pháp 3: Chỉnh sửa Tệp Giao diện (Giao diện Stencil)

Đối với nhà phát triển sử dụng giao diện Stencil, bạn có thể thêm mã trực tiếp vào tệp giao diện. Điều này yêu cầu quyền truy cập vào tệp nguồn giao diện.

Sử dụng Bảng Điều khiển BigCommerce

Đi đến Storefront → My Themes
Nhấp "Advanced" trên giao diện đang hoạt động
Chọn "Edit Theme Files"
Điều hướng đến templates → components → common
Mở footer.html
Cuộn xuống cuối tệp
Paste your Asyntai embed code just before the closing tag
Nhấp "Save & Apply File"

Sử dụng Stencil CLI (Phát triển Cục bộ)

Nếu bạn đang phát triển cục bộ với Stencil CLI:

Mở các tệp cục bộ của giao diện
Điều hướng đến templates/components/common/footer.html
Thêm mã nhúng Asyntai trước các thẻ đóng
Đẩy các thay đổi bằng stencil push

Quan trọng: Thay đổi tệp giao diện có thể bị ghi đè khi bạn cập nhật giao diện. Để có giải pháp vĩnh viễn được giữ lại qua các cập nhật giao diện, sử dụng phương pháp Trình quản lý Script.

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

Sau khi thêm mã, truy cập cửa hàng BigCommerce 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 của cửa hàng. 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? Xóa bộ nhớ đệm trình duyệt và thử lại. Nếu bạn đã thực hiện thay đổi qua Trình biên tập Giao diện, đảm bảo bạn đã nhấp "Publish" để áp dụng thay đổi cho cửa hàng trực tuyến.

Tài liệu