Cách thêm Chatbot AI Asyntai vào Statamic

Hướng dẫn từng bước cho trang web Statamic CMS

Nền tảng:

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

First, go to your Asyntai Dashboard and scroll down to the "Embed Code" section. Copy your unique embed code which will look like this:

<script>(function(){var l=function(){var s=document.createElement("script");s.src="https://widget.asyntai.com/static/js/chat-widget.js";s.async=true;s.setAttribute("data-asyntai-id","YOUR_WIDGET_ID");document.head.appendChild(s)};if(document.readyState==="complete"){l()}else{window.addEventListener("load",l)}})();</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

Statamic hỗ trợ cả Antlers và Blade. Chọn phương pháp dựa trên công cụ mẫu bạn đang sử dụng:

Phương pháp 1: Bố cục Antlers (Khuyến nghị)

Cách dễ nhất để thêm chatbot là thêm nó vào tệp bố cục chính. Statamic sử dụng Antlers làm công cụ mẫu mặc định.

Chuyển đến thư mục resources/views của dự án Statamic
Mở tệp bố cục (thường là layout.antlers.html)
Tìm thẻ đóng </body>
Dán mã nhúng Asyntai ngay trước thẻ </body>
Lưu tệp

<!DOCTYPE html>
<html lang="{{ site:short_locale }}">
<head>
  <meta charset="utf-8">
  <title>{{ title }} | {{ site:name }}</title>
  {{ vite src="resources/js/site.js|resources/css/site.css" }}
</head>
<body>
  {{ template_content }}

  <!-- Asyntai Chatbot -->
  <script>(function(){var l=function(){var s=document.createElement("script");s.src="https://widget.asyntai.com/static/js/chat-widget.js";s.async=true;s.setAttribute("data-asyntai-id","YOUR_WIDGET_ID");document.head.appendChild(s)};if(document.readyState==="complete"){l()}else{window.addEventListener("load",l)}})();</script>
</body>
</html>

Mẹo: The {{ template_content }} variable is where Statamic injects your page content. Always add the chatbot script after this, just before </body>.

Phương pháp 2: Bố cục Blade

Nếu bạn sử dụng mẫu Blade thay vì Antlers, làm theo các bước sau:

Chuyển đến thư mục resources/views của dự án Statamic
Mở tệp bố cục Blade (ví dụ: layout.blade.php)
Tìm thẻ đóng </body>
Dán mã nhúng Asyntai ngay trước thẻ </body>
Lưu tệp

<!DOCTYPE html>
<html lang="{{ $site->shortLocale() }}">
<head>
  <meta charset="utf-8">
  <title>{{ $title }} | {{ $site->name() }}</title>
  @vite(['resources/js/site.js', 'resources/css/site.css'])
</head>
<body>
  {!! $template_content !!}

  <!-- Asyntai Chatbot -->
  <script>(function(){var l=function(){var s=document.createElement("script");s.src="https://widget.asyntai.com/static/js/chat-widget.js";s.async=true;s.setAttribute("data-asyntai-id","YOUR_WIDGET_ID");document.head.appendChild(s)};if(document.readyState==="complete"){l()}else{window.addEventListener("load",l)}})();</script>
</body>
</html>

Lưu ý: In Blade templates, use {!! $template_content !!} to render the page content. The !! syntax prevents HTML escaping.

Phương pháp 3: Sử dụng Partial

Để tổ chức tốt hơn, bạn có thể tạo partial tái sử dụng cho chatbot:

Bước 1: Tạo Partial

Tạo tệp mới tại resources/views/partials/_chatbot.antlers.html
Thêm mã nhúng Asyntai vào tệp này:
 <script>(function(){var l=function(){var s=document.createElement("script");s.src="https://widget.asyntai.com/static/js/chat-widget.js";s.async=true;s.setAttribute("data-asyntai-id","YOUR_WIDGET_ID");document.head.appendChild(s)};if(document.readyState==="complete"){l()}else{window.addEventListener("load",l)}})();</script>

Bước 2: Thêm vào bố cục

Mở tệp bố cục (layout.antlers.html)
Thêm thẻ partial trước </body>:
{{ partial:chatbot }} </body>

Tại sao sử dụng partial? Partial giúp dễ dàng quản lý các script bên ngoài tại một nơi. Nếu bạn cần cập nhật mã chatbot, bạn chỉ cần chỉnh sửa một tệp.

Sử dụng nhiều bố cục

Nếu trang Statamic của bạn sử dụng nhiều bố cục (ví dụ: bố cục khác nhau cho bài blog, trang đích, v.v.), hãy đảm bảo thêm script chatbot vào mỗi tệp bố cục nơi bạn muốn tiện ích xuất hiện.

Bạn có thể đặt bố cục mà trang sử dụng bằng nhiều cách:

Trong mục nhập: Thêm layout: your_layout vào front matter
Trong bộ sưu tập: Đặt bố cục mặc định trong tệp cấu hình YAML của bộ sưu tập
Trong blueprint: Thêm trường bố cục để biên tập viên có thể chọn

Dành cho Statamic Starter Kits

Nếu bạn sử dụng Statamic Starter Kit, vị trí bố cục có thể khác nhau. Các vị trí phổ biến bao gồm:

Default Statamic

resources/views/layout.antlers.html

Peak Starter

resources/views/layout.antlers.html với partials trong resources/views/snippets/

Cool Writings

resources/views/layout.antlers.html

Starter's Creek

resources/views/layout.blade.php

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

Sau khi thêm mã, xóa bộ nhớ đệm Statamic để đảm bảo các thay đổi có hiệu lực:

php artisan cache:clear
php please stache:refresh

Sau đó truy cập trang web 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 chat ở góc dưới bên phải. Nhấp vào để đảm bảo nó mở và hoạt động đúng.

Không thấy tiện ích? Hãy đảm bảo bạn đã xóa cả bộ nhớ đệm Laravel và Stache của Statamic. Nếu bạn sử dụng bộ nhớ đệm tĩnh, chạy php please static:clear nữa. Kiểm tra console trình duyệt (F12) xem có lỗi JavaScript không.

Quan trọng: Nếu bạn sử dụng trình tạo trang tĩnh của Statamic (ssg), hãy đảm bảo tạo lại các tệp tĩnh sau khi thêm script chatbot bằng cách chạy php please ssg:generate.

Tài liệu