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

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

Kirby là CMS PHP dạng tệp phẳng sử dụng snippet cho các phần mẫu tái sử dụng. Cách tiếp cận được khuyến nghị là tạo snippet chuyên dụng cho chatbot:

Tạo tệp snippet mới tại site/snippets/asyntai-widget.php
Dán mã nhúng vào tệp:

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

Sau đó bao gồm snippet trong mẫu chính (ví dụ: site/templates/default.php) hoặc bố cục, ngay trước thẻ đóng </body>:

<?php snippet('asyntai-widget') ?>
</body>
</html>

Mẹo: Nếu bạn sử dụng bố cục chung hoặc snippet chân trang, bạn có thể thêm lệnh gọi snippet ở đó để nó tự động xuất hiện trên mọi trang. Ví dụ, thêm vào snippet chân trang ngay trước </body>.

Phương pháp Thay thế 1: Thêm vào Snippet Chân trang

Nếu trang Kirby sử dụng snippet chân trang, bạn có thể thêm mã nhúng trực tiếp ở đó:

Mở site/snippets/footer.php (tạo nếu chưa tồn tại)
Thêm mã nhúng trước thẻ đóng </body>:

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

Đảm bảo mẫu bao gồm snippet chân trang:

<?php snippet('footer') ?>

Lưu ý: Nếu snippet chân trang đã được bao gồm trong tất cả mẫu, thêm chatbot ở đây đảm bảo nó xuất hiện trên mọi trang mà không cần sửa đổi từng tệp mẫu.

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

Bạn có thể tạo plugin Kirby để tự động chèn tập lệnh chatbot vào mọi trang mà không cần sửa đổi mẫu:

Tạo thư mục và tệp plugin tại site/plugins/asyntai/index.php
Thêm mã sau để sử dụng hook của Kirby để chèn script:

Kirby::plugin('custom/asyntai', [
    'hooks' => [
        'page.render:after' => function ($contentType, $body) {
            $script = '<script async src="https://asyntai.com/static/js/chat-widget.js" data-asyntai-id="YOUR_WIDGET_ID"></script>';
            return str_replace('</body>', $script . '</body>', $body);
        }
    ]
]);

Mẹo: Cách tiếp cận plugin lý tưởng nếu bạn muốn chatbot tải tự động trên mọi trang mà không cần chỉnh sửa tệp mẫu hoặc snippet. Nó cũng giữ tích hợp chatbot theo module và dễ bật hoặc tắt.

Phương pháp Thay thế 3: Sử dụng Helper js() của Kirby

Kirby cung cấp helper js() tích hợp để tải tệp JavaScript. Bạn có thể sử dụng trong mẫu hoặc snippet:

<?= js('https://asyntai.com/static/js/chat-widget.js', ['async' => true, 'data-asyntai-id' => 'YOUR_WIDGET_ID']) ?>

Hoặc thêm script trực tiếp trong tệp PHP mẫu trước </body>:

<?php // site/templates/default.php ?>
<html>
<head>
    <!-- head content -->
</head>
<body>
    <!-- page content -->
    <?php snippet('header') ?>
    <main>
        <?= $page->text()->kirbytext() ?>
    </main>
    <?php snippet('footer') ?>

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

Lưu ý: Nếu bạn sử dụng helper js(), đảm bảo nó được đặt bên trong phần <body> của mẫu để đảm bảo chatbot tải chính xác.

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

Sau khi thêm mã nhúng vào trang Kirby, 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 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 đã thay thế YOUR_WIDGET_ID bằng ID tiện ích thực tế từ bảng điều khiển. Xác minh tệp snippet hoặc plugin được lưu trong đúng thư mục. Nếu sử dụng phương pháp plugin, đảm bảo cấu trúc thư mục plugin là site/plugins/asyntai/index.php. Xóa bộ nhớ đệm trình duyệt hoặc thử nghiệm ở chế độ ẩn danh. Kiểm tra bảng điều khiển nhà phát triển trình duyệt (F12) để tìm lỗi.