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

Hướng dẫn từng bước cho trang web ProcessWire 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 tệp mẫu (Khuyến nghị)

ProcessWire sử dụng các tệp mẫu PHP nằm trong thư mục site/templates/. Cách dễ nhất là thêm mã nhúng trực tiếp vào tệp mẫu chính:

Truy cập các tệp cài đặt ProcessWire qua FTP, SSH hoặc trình quản lý tệp
Chuyển đến site/templates/
Mở tệp mẫu chính — thường là _main.php hoặc basic-page.php tùy theo cấu hình trang web
Nếu bạn đang sử dụng chiến lược xuất trì hoãn (mặc định cho hầu hết các cấu hình trang web), mở _main.php
Tìm thẻ đóng </body>
Dán mã nhúng Asyntai ngay trước nó:

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

Mẹo: Việc đặt script ngay trước thẻ đóng </body> đảm bảo chatbot tải sau nội dung trang, được khuyến nghị để có hiệu suất tối ưu và không làm chậm việc hiển thị trang.

Phương pháp thay thế 1: Sử dụng tệp _foot.inc hoặc _main.php nối thêm

Nếu trang ProcessWire của bạn sử dụng cách tiếp cận tệp nối thêm (phổ biến trong nhiều cấu hình trang web), bạn có thể thêm mã nhúng vào tệp include chân trang chung:

Chuyển đến site/templates/
Mở _foot.inc (hoặc tệp include chân trang tương đương của bạn)
Dán mã nhúng Asyntai ngay trước thẻ đóng </body>
Lưu tệp

Chiến lược xuất trì hoãn của ProcessWire thường hoạt động với ba tệp chính:

_init.php — chạy trước mọi mẫu, khởi tạo các biến
Tệp mẫu của bạn (ví dụ: basic-page.php) — điền các biến nội dung
_main.php — xuất ra mã HTML cuối cùng sử dụng các biến đó

Nếu trang web của bạn sử dụng cách tiếp cận này, việc thêm script vào _main.php trước </body> đảm bảo nó xuất hiện trên mọi trang.

Lưu ý: Tên tệp _init.php và _main.php được cấu hình trong site/config.php qua cài đặt $config->prependTemplateFile và $config->appendTemplateFile. Kiểm tra cấu hình nếu các tệp của bạn có tên khác.

Phương pháp thay thế 2: Sử dụng mảng $config->scripts

ProcessWire cung cấp mảng $config->scripts FilenameArray mà bạn có thể sử dụng để quản lý các tệp JavaScript. Trong _init.php hoặc tệp mẫu riêng, thêm:

<?php
$config->scripts->add('https://asyntai.com/static/js/chat-widget.js');
?>

Sau đó trong _main.php (hoặc include chân trang), lặp qua mảng script để xuất chúng:

<?php foreach($config->scripts as $file): ?>
<script src="<?php echo $file; ?>"></script>
<?php endforeach; ?>

Quan trọng: Cách tiếp cận $config->scripts xử lý thuộc tính src của script, nhưng thuộc tính data-asyntai-id cần được xử lý riêng. Bạn cần thêm thuộc tính data thủ công trong vòng lặp xuất, hoặc sử dụng phương pháp thẻ script trực tiếp từ Bước 2 để cài đặt đơn giản nhất.

Phương pháp thay thế 3: Sử dụng Hook (ready.php)

Với cách tiếp cận nâng cao hơn, bạn có thể sử dụng hệ thống hook của ProcessWire để tự động chèn script chatbot vào mọi trang. Thêm nội dung sau vào tệp site/ready.php:

<?php
$wire->addHookAfter('Page::render', function(HookEvent $event) {
    $html = $event->return;
    $script = '<script async src="https://asyntai.com/static/js/chat-widget.js" data-asyntai-id="YOUR_WIDGET_ID"></script>';
    $html = str_replace('</body>', $script . '</body>', $html);
    $event->return = $html;
});
?>

Hook này chặn đầu ra HTML đã render của mọi trang và tự động chèn script Asyntai ngay trước thẻ đóng </body>.

Mẹo: Cách tiếp cận hook ready.php lý tưởng nếu bạn muốn chatbot trên mọi trang mà không cần chỉnh sửa tệp mẫu nào. Nó cũng vẫn tồn tại sau các thay đổi mẫu và cập nhật giao diện vì nó nằm ngoài các tệp mẫu.

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

Sau khi lưu các thay đổi, hãy truy cập trang ProcessWire 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 đã lưu tất cả các tệp đã chỉnh sửa. Thử xóa bộ nhớ đệm trình duyệt hoặc xem trong cửa sổ ẩn danh. Nếu bộ nhớ đệm mẫu của ProcessWire được bật, bạn có thể cần xóa nó bằng cách vào Module → Lõi → Bộ nhớ đệm công cụ mẫu hoặc thêm ?nocache=1 vào URL. Cũng xác minh rằng tệp mẫu thực sự đang được sử dụng bởi các trang bạn đang xem.