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

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

Cách đơn giản nhất để thêm chatbot vào trang SilverStripe là chỉnh sửa trực tiếp tệp mẫu chính của giao diện:

Mở tệp mẫu của giao diện (ví dụ: themes/yourtheme/templates/Page.ss)
Thêm mã nhúng ngay trước thẻ đóng </body>:

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

Lưu tệp và xóa bộ nhớ đệm SilverStripe bằng cách thêm ?flush=1 vào URL trang web

Mẹo: SilverStripe sử dụng các tệp mẫu .ss với hệ thống kế thừa mẫu. Việc đặt script trong mẫu Page.ss cơ sở đảm bảo chatbot xuất hiện trên mọi trang. Nếu giao diện sử dụng thư mục Includes, bạn cũng có thể đặt script trong tệp include chung.

Phương pháp thay thế 1: Sử dụng lớp Requirements trong Controller

SilverStripe cung cấp lớp Requirements để quản lý các phụ thuộc JavaScript và CSS theo lập trình. Đây là cách tiếp cận được khuyến nghị cho nhà phát triển:

Mở app/src/PageController.php (hoặc tệp controller trang của bạn)
Trong phương thức init(), sử dụng Requirements::customScript() để tải động tiện ích:

use SilverStripe\View\Requirements;

class PageController extends \SilverStripe\CMS\Controllers\ContentController
{
    protected function init()
    {
        parent::init();
        Requirements::customScript(<<<JS
            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.head.appendChild(script);
        JS);
    }
}

Lưu tệp và xóa bộ nhớ đệm bằng cách truy cập yourdomain.com?flush=1

Lưu ý: Lớp Requirements là cách chuẩn của SilverStripe để thêm script và stylesheet. Sử dụng Requirements::customScript() xuất JavaScript inline. Phương pháp này đảm bảo tiện ích được tải trên mọi trang do PageController xử lý.

Phương pháp thay thế 2: Sử dụng Requirements trong mẫu

Bạn cũng có thể sử dụng cú pháp mẫu của SilverStripe để yêu cầu các tệp JavaScript trực tiếp trong mẫu .ss:

Mở tệp mẫu của giao diện (ví dụ: themes/yourtheme/templates/Page.ss)
Thêm nội dung sau gần cuối mẫu, trước </body>:

<% require javascript("https://asyntai.com/static/js/chat-widget.js") %>
<script>
    document.addEventListener('DOMContentLoaded', function() {
        var scripts = document.querySelectorAll('script[src*="chat-widget.js"]');
        scripts.forEach(function(s) {
            s.setAttribute('data-asyntai-id', 'YOUR_WIDGET_ID');
        });
    });
</script>
</body>

Mẹo: Cú pháp <% require %> là cách cấp mẫu của SilverStripe để thêm tài nguyên. Lưu ý rằng phương pháp này không hỗ trợ nguyên bản việc thêm thuộc tính data tùy chỉnh vào thẻ script, vì vậy chúng tôi thêm một đoạn khởi tạo nhỏ để đặt ID tiện ích.

Phương pháp thay thế 3: Sử dụng cấu hình SilverStripe (YAML)

Với cách tiếp cận dựa trên cấu hình, bạn có thể sử dụng cấu hình YAML của SilverStripe để thêm các yêu cầu toàn cục:

Mở hoặc tạo tệp app/_config/app.yml
Thêm cấu hình để thêm tiện ích qua extension tùy chỉnh hoặc cài đặt controller:

# app/_config/app.yml
---
Name: asyntai-chatbot
After: '#rootroutes'
---
SilverStripe\Core\Injector\Injector:
  AsyntaiChatbotExtension:
    class: App\Extensions\AsyntaiChatbotExtension

Tạo tệp extension app/src/Extensions/AsyntaiChatbotExtension.php:

namespace App\Extensions;

use SilverStripe\Core\Extension;
use SilverStripe\View\Requirements;

class AsyntaiChatbotExtension extends Extension
{
    public function onAfterInit()
    {
        Requirements::customScript("
            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.head.appendChild(script);
        ");
    }
}

Áp dụng extension vào PageController trong app/_config/app.yml:

PageController:
  extensions:
    - App\Extensions\AsyntaiChatbotExtension

Chạy ?flush=1 để xây dựng lại bộ nhớ đệm cấu hình

Lưu ý: Sử dụng cấu hình YAML và extension là cách tiếp cận SilverStripe mang tính module nhất. Nó giữ việc tích hợp chatbot tách biệt khỏi logic controller chính và dễ dàng bật hoặc tắt mà không cần thay đổi mã.

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

Sau khi thêm mã và xóa bộ nhớ đệm SilverStripe, mở trang web trong tab trình duyệt mới. 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 bộ nhớ đệm bằng cách thêm ?flush=1 vào URL trang web. 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 trong chế độ ẩn danh. Mở console trình duyệt (F12) để kiểm tra lỗi JavaScript. Nếu sử dụng lớp Requirements, xác minh phương thức init() của PageController đang được gọi đúng.