Cara Menambah Chatbot AI Asyntai ke SilverStripe

Panduan langkah demi langkah untuk SilverStripe CMS

Platform:

Langkah 1: Dapatkan Kod Benam Anda

Pertama, pergi ke Papan Pemuka Asyntai anda dan tatal ke bawah ke bahagian "Kod Benam". Salin kod benam unik anda yang akan kelihatan seperti ini:

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

Nota: Kod di atas hanyalah contoh. Anda mesti menyalin kod benam unik anda sendiri dari Papan Pemuka anda kerana ia mengandungi ID widget peribadi anda.

Langkah 2: Tambah ke Templat SilverStripe (Disyorkan)

Cara paling mudah untuk menambah chatbot ke laman SilverStripe anda adalah dengan mengedit fail templat utama tema anda secara langsung:

Buka fail templat tema anda (contohnya, themes/yourtheme/templates/Page.ss)
Tambah kod benam sejurus sebelum tag penutup </body>:

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

Simpan fail dan kosongkan cache SilverStripe dengan menambah ?flush=1 pada URL laman anda

Petua: SilverStripe menggunakan fail templat .ss dengan sistem pewarisan templat. Meletakkan skrip dalam templat Page.ss asas anda memastikan chatbot muncul pada setiap halaman laman anda. Jika tema anda menggunakan folder Includes, anda juga boleh meletakkan skrip dalam fail sertaan yang dikongsi.

Kaedah Alternatif 1: Menggunakan Kelas Requirements dalam Pengawal

SilverStripe menyediakan kelas Requirements untuk menguruskan kebergantungan JavaScript dan CSS secara programatik. Ini adalah pendekatan yang disyorkan untuk pembangun:

Buka app/src/PageController.php (atau fail pengawal halaman anda)
Dalam kaedah init(), gunakan Requirements::customScript() untuk memuatkan widget secara dinamik:

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);
    }
}

Simpan fail dan kosongkan cache dengan melawat yourdomain.com?flush=1

Nota: Kelas Requirements adalah cara standard SilverStripe untuk menyertakan skrip dan helaian gaya. Menggunakan Requirements::customScript() mengeluarkan JavaScript sebaris. Kaedah ini memastikan widget dimuatkan pada setiap halaman yang dikendalikan oleh PageController anda.

Kaedah Alternatif 2: Menggunakan Requirements dalam Templat

Anda juga boleh menggunakan sintaks templat SilverStripe untuk memerlukan fail JavaScript terus dalam templat .ss anda:

Buka fail templat tema anda (contohnya, themes/yourtheme/templates/Page.ss)
Tambah kod berikut berhampiran bahagian bawah templat, sebelum </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>

Petua: Sintaks <% require %> adalah cara peringkat templat SilverStripe untuk menyertakan aset. Perhatikan bahawa kaedah ini tidak menyokong penambahan atribut data tersuai ke tag skrip secara natif, jadi kami menambah coretan permulaan kecil untuk menetapkan ID widget.

Kaedah Alternatif 3: Menggunakan Konfigurasi SilverStripe (YAML)

Untuk pendekatan berasaskan konfigurasi, anda boleh menggunakan konfigurasi YAML SilverStripe untuk menambah keperluan global:

Buka atau cipta fail app/_config/app.yml
Tambah konfigurasi untuk menyertakan widget melalui sambungan tersuai atau persediaan pengawal:

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

Cipta fail sambungan 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);
        ");
    }
}

Gunakan sambungan ke PageController anda dalam app/_config/app.yml:

PageController:
  extensions:
    - App\Extensions\AsyntaiChatbotExtension

Jalankan ?flush=1 untuk membina semula cache konfigurasi

Nota: Menggunakan konfigurasi YAML dan sambungan adalah pendekatan SilverStripe yang paling modular. Ia memastikan integrasi chatbot anda berasingan daripada logik pengawal utama anda dan memudahkan untuk mengaktifkan atau menyahaktifkan tanpa mengubah kod.

Langkah 3: Sahkan Pemasangan

Selepas menambah kod dan mengosongkan cache SilverStripe, buka laman anda dalam tab pelayar baharu. Anda sepatutnya melihat butang widget sembang di sudut kanan bawah. Klik padanya untuk memastikan ia dibuka dan berfungsi dengan betul.

Tidak nampak widget? Pastikan anda telah mengosongkan cache dengan menambah ?flush=1 pada URL laman anda. Semak bahawa anda telah menggantikan YOUR_WIDGET_ID dengan ID widget sebenar anda dari papan pemuka. Kosongkan cache pelayar anda atau lihat dalam mod inkognito. Buka konsol pelayar (F12) untuk menyemak sebarang ralat JavaScript. Jika menggunakan kelas Requirements, sahkan bahawa kaedah init() PageController anda dipanggil dengan betul.