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

Hướng dẫn từng bước cho Grav CMS

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: Thêm vào Mẫu Giao diện Grav (Khuyến nghị)

Cách tốt nhất để thêm chatbot vào tất cả trang của trang Grav là chỉnh sửa mẫu Twig cơ sở của giao diện:

Điều hướng đến thư mục user/themes/yourtheme/templates/ của dự án Grav và mở default.html.twig (hoặc mẫu cơ sở được giao diện sử dụng)
Thêm mã nhúng Asyntai trước thẻ đóng </body>:

<!-- user/themes/yourtheme/templates/default.html.twig -->
...
    <script async src="https://asyntai.com/static/js/chat-widget.js" data-asyntai-id="YOUR_WIDGET_ID"></script>
  </body>
</html>

Lưu tệp

Mẹo: Grav sử dụng Twig làm công cụ tạo mẫu. Mẫu cơ sở thường là default.html.twig hoặc partials/base.html.twig tùy thuộc vào giao diện. Kiểm tra cấu trúc giao diện để tìm tệp chính xác chứa thẻ đóng </body>.

Phương pháp Thay thế 1: Sử dụng Trình quản lý Tài sản Grav

Trình quản lý Tài sản tích hợp của Grav cung cấp cách sạch để thêm tài sản JavaScript qua Twig:

Mở mẫu Twig cơ sở của giao diện (ví dụ: user/themes/yourtheme/templates/partials/base.html.twig)
Sử dụng Trình quản lý Tài sản để thêm JavaScript:

{% do assets.addJs('https://asyntai.com/static/js/chat-widget.js', {group: 'bottom', loading: 'async', 'data-asyntai-id': 'YOUR_WIDGET_ID'}) %}

Hoặc thêm JavaScript nội tuyến để tạo phần tử script động trong mẫu cơ sở:

<!-- user/themes/yourtheme/templates/partials/base.html.twig -->
...
{% block bottom %}
    {{ assets.js('bottom') }}
{% endblock %}

<script>
(function() {
  var script = document.createElement('script');
  script.src = 'https://asyntai.com/static/js/chat-widget.js';
  script.setAttribute('data-asyntai-id', 'YOUR_WIDGET_ID');
  script.async = true;
  document.body.appendChild(script);
})();
</script>
</body>
</html>

Lưu ý: Phương pháp Trình quản lý Tài sản là cách tiếp cận Grav khuyến nghị để quản lý tài sản JavaScript. Nó cung cấp hỗ trợ tích hợp cho pipeline tài sản, sắp xếp thứ tự và nhóm.

Phương pháp Thay thế 2: Sử dụng Plugin Custom JS

Nếu bạn thích cách tiếp cận dựa trên plugin mà không cần chỉnh sửa các tệp giao diện:

Cài đặt plugin "Custom JS" từ bảng quản trị Grav hoặc qua CLI:

bin/gpm install custom-js

Đi đến Admin > Plugins > Custom JS
Thêm mã script nhúng:

<script async src="https://asyntai.com/static/js/chat-widget.js" data-asyntai-id="YOUR_WIDGET_ID"></script>

Lưu cấu hình plugin

Mẹo: Sử dụng plugin để chèn tập lệnh nghĩa là bạn không cần sửa đổi tệp giao diện. Điều này giúp dễ dàng chuyển hoặc cập nhật giao diện mà không mất tích hợp chatbot.

Phương pháp Thay thế 3: Sử dụng Ghi đè Khối trong Mẫu Con

Nếu giao diện Grav sử dụng kế thừa khối Twig, bạn có thể ghi đè khối bottom trong mẫu con:

{% block bottom %}
    {{ parent() }}
    <script async src="https://asyntai.com/static/js/chat-widget.js" data-asyntai-id="YOUR_WIDGET_ID"></script>
{% endblock %}

Tạo hoặc mở mẫu con mở rộng mẫu cơ sở của giao diện
Thêm ghi đè khối như trên
Lời gọi parent() đảm bảo tất cả nội dung hiện có trong khối được giữ nguyên

Lưu ý: Phương pháp này sử dụng hệ thống kế thừa mẫu Twig. Đảm bảo tên khối (ví dụ: bottom) khớp với khối được định nghĩa trong mẫu cơ sở của giao diện. Tên khối phổ biến bao gồm bottom, javascripts hoặc footer.

Phương pháp Thay thế 4: Sử dụng Plugin Custom Head Grav

Một tùy chọn dựa trên plugin khác là plugin Custom Head:

Cài đặt plugin custom-head qua CLI hoặc bảng quản trị:

bin/gpm install custom-head

Đi đến Admin > Plugins > Custom Head
Thêm mã script nhúng Asyntai trong cấu hình plugin:

<script async src="https://asyntai.com/static/js/chat-widget.js" data-asyntai-id="YOUR_WIDGET_ID"></script>

Lưu cấu hình

Mẹo: Plugin Custom Head cho phép bạn chèn mã vào phần head hoặc body của trang web mà không cần chạm vào tệp giao diện. Kiểm tra tài liệu plugin để tìm tùy chọn vị trí chính xác để chèn script trước thẻ đóng </body>.

Bước 3: Xóa Bộ nhớ đệm và Xác minh

Sau khi thêm mã, xóa bộ nhớ đệm Grav và xác minh cài đặt:

# Clear cache via CLI
bin/grav clearcache

# Or clear cache from Admin Panel:
# Admin > Tools > Clear Cache

Mở trang Grav trong tab trình duyệt mới. 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? Đảm bảo bạn đã xóa bộ nhớ đệm Grav bằng bin/grav clearcache hoặc từ bảng quản trị. Kiểm tra bạn đã thay thế YOUR_WIDGET_ID bằng ID tiện ích thực tế từ bảng điều khiển. Xóa bộ nhớ đệm trình duyệt hoặc xem ở chế độ ẩn danh. Mở bảng điều khiển trình duyệt (F12) để kiểm tra lỗi JavaScript. Xác minh script có trong mã nguồn trang bằng cách nhấp chuột phải và chọn "View Page Source".

Tài liệu

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

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

Bước 2: Thêm vào Mẫu Giao diện Grav (Khuyến nghị)

Phương pháp Thay thế 1: Sử dụng Trình quản lý Tài sản Grav

Phương pháp Thay thế 2: Sử dụng Plugin Custom JS

Phương pháp Thay thế 3: Sử dụng Ghi đè Khối trong Mẫu Con

Phương pháp Thay thế 4: Sử dụng Plugin Custom Head Grav

Bước 3: Xóa Bộ nhớ đệm và Xác minh