Cara Menambahkan Chatbot AI Asyntai ke SilverStripe

Panduan langkah demi langkah untuk SilverStripe CMS

Platform:

Langkah 1: Dapatkan Kode Embed Anda

Pertama, buka Dasbor Asyntai dan gulir ke bawah ke bagian "Kode Embed". Salin kode embed unik Anda yang akan terlihat seperti ini:

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

Catatan: Kode di atas hanya contoh. Anda harus menyalin kode embed unik Anda sendiri dari Dasbor karena berisi ID widget personal Anda.

Langkah 2: Tambahkan ke Template SilverStripe (Direkomendasikan)

Cara paling sederhana untuk menambahkan chatbot ke situs SilverStripe Anda adalah dengan mengedit file template utama tema Anda secara langsung:

Buka file template tema Anda (misalnya, themes/yourtheme/templates/Page.ss)
Tambahkan kode embed tepat 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 file dan bersihkan cache SilverStripe dengan menambahkan ?flush=1 ke URL situs Anda

Tip: SilverStripe menggunakan file template .ss dengan sistem pewarisan template. Menempatkan skrip di template Page.ss dasar Anda memastikan chatbot muncul di setiap halaman situs Anda. Jika tema Anda menggunakan folder Includes, Anda juga dapat menempatkan skrip di file include bersama.

Metode Alternatif 1: Menggunakan Kelas Requirements di Controller

SilverStripe menyediakan kelas Requirements untuk mengelola dependensi JavaScript dan CSS secara programatik. Ini adalah pendekatan yang direkomendasikan untuk pengembang:

Buka app/src/PageController.php (atau file controller halaman Anda)
Di metode init(), gunakan Requirements::customScript() untuk memuat widget secara dinamis:

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 file dan bersihkan cache dengan mengunjungi yourdomain.com?flush=1

Catatan: Kelas Requirements adalah cara standar SilverStripe untuk menyertakan skrip dan stylesheet. Menggunakan Requirements::customScript() menghasilkan JavaScript inline. Metode ini memastikan widget dimuat di setiap halaman yang ditangani oleh PageController Anda.

Metode Alternatif 2: Menggunakan Requirements di Template

Anda juga dapat menggunakan sintaks template SilverStripe untuk memuat file JavaScript langsung di template .ss Anda:

Buka file template tema Anda (misalnya, themes/yourtheme/templates/Page.ss)
Tambahkan kode berikut di dekat bagian bawah template, 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>

Tip: Sintaks <% require %> adalah cara tingkat template SilverStripe untuk menyertakan aset. Perlu diperhatikan bahwa metode ini tidak secara bawaan mendukung penambahan atribut data kustom ke tag skrip, jadi kami menambahkan cuplikan inisialisasi kecil untuk mengatur ID widget.

Metode Alternatif 3: Menggunakan Konfigurasi SilverStripe (YAML)

Untuk pendekatan berbasis konfigurasi, Anda dapat menggunakan konfigurasi YAML SilverStripe untuk menambahkan requirements global:

Buka atau buat file app/_config/app.yml
Tambahkan konfigurasi untuk menyertakan widget melalui ekstensi kustom atau pengaturan controller:

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

Buat file ekstensi 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);
        ");
    }
}

Terapkan ekstensi ke PageController Anda di app/_config/app.yml:

PageController:
  extensions:
    - App\Extensions\AsyntaiChatbotExtension

Jalankan ?flush=1 untuk membangun ulang cache konfigurasi

Catatan: Menggunakan konfigurasi YAML dan ekstensi adalah pendekatan SilverStripe yang paling modular. Ini menjaga integrasi chatbot Anda terpisah dari logika controller utama dan memudahkan untuk mengaktifkan atau menonaktifkan tanpa mengubah kode.

Langkah 3: Verifikasi Instalasi

Setelah menambahkan kode dan membersihkan cache SilverStripe, buka situs Anda di tab browser baru. Anda seharusnya melihat tombol widget chat di pojok kanan bawah. Klik untuk memastikan widget terbuka dan berfungsi dengan benar.

Tidak melihat widget? Pastikan Anda membersihkan cache dengan menambahkan ?flush=1 ke URL situs Anda. Periksa bahwa Anda telah mengganti YOUR_WIDGET_ID dengan ID widget sebenarnya dari dasbor. Bersihkan cache browser Anda atau lihat dalam mode penyamaran. Buka konsol browser (F12) untuk memeriksa kesalahan JavaScript. Jika menggunakan kelas Requirements, verifikasi bahwa metode init() PageController Anda dipanggil dengan benar.