Cara Menambahkan Chatbot AI Asyntai ke October CMS

Panduan langkah demi langkah untuk situs web October 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 Layout (Direkomendasikan)

Cara yang direkomendasikan untuk menambahkan chatbot adalah dengan mengedit layout default Anda di backend October CMS:

Masuk ke backend October CMS Anda
Buka CMS > Layouts di menu utama
Buka layout default Anda (biasanya default.htm)
Temukan penutup </body> tag dan {% scripts %} placeholder
Tambahkan kode embed Asyntai Anda tepat sebelum {% scripts %} dan </body>:
<script async src="https://asyntai.com/static/js/chat-widget.js" data-asyntai-id="YOUR_WIDGET_ID"></script> {% scripts %} </body>
Klik "Save" untuk menerapkan perubahan Anda

Tip: Placing the script before {% scripts %} and </body> ensures it loads after the page content, which is recommended for chat widgets and won't slow down your page loading.

Alternative Method 1: Using {% put scripts %} Block

Anda dapat menggunakan placeholder skrip October CMS untuk menyuntikkan chatbot dari halaman atau partial:

Buka halaman atau partial mana pun di editor CMS
Tambahkan kode berikut menggunakan {% put scripts %} blok:
{% put scripts %} <script async src="https://asyntai.com/static/js/chat-widget.js" data-asyntai-id="YOUR_WIDGET_ID"></script> {% endput %}
Ganti YOUR_WIDGET_ID dengan ID widget Anda yang sebenarnya dari dashboard
Klik "Save"

Catatan: For this method to work, your layout must include the {% scripts %} placeholder in its markup. This is where October CMS renders all injected scripts. Most default layouts already include this tag.

Metode Alternatif 2: Menggunakan Komponen PHP

Jika Anda lebih suka pendekatan programatik, Anda dapat menambahkan skrip chatbot melalui komponen kustom:

Buat atau modifikasi komponen di plugin October CMS Anda
Di metode onRun() komponen, gunakan metode addJs():
public function onRun() { $this->addJs('https://asyntai.com/static/js/chat-widget.js', [ 'async' => true, 'data-asyntai-id' => 'YOUR_WIDGET_ID' ]); }
Ganti YOUR_WIDGET_ID dengan ID widget Anda yang sebenarnya
Daftarkan komponen pada halaman tempat Anda ingin chatbot muncul

Tip: Menggunakan komponen memberi Anda kontrol programatik atas kapan dan di mana chatbot dimuat. Anda dapat menambahkan logika kondisional di dalam onRun() untuk mengontrol pemuatan berdasarkan peran pengguna, tipe halaman, atau kriteria lainnya.

Metode Alternatif 3: Menggunakan Partial

Untuk organisasi yang lebih baik, Anda dapat membuat partial yang dapat digunakan kembali untuk chatbot:

Buka CMS > Partials di backend October CMS
Klik "+ Add" untuk membuat partial baru
Beri nama asyntai-widget.htm
Tambahkan kode embed Asyntai Anda ke partial:
<script async src="https://asyntai.com/static/js/chat-widget.js" data-asyntai-id="YOUR_WIDGET_ID"></script>
Klik "Save"
Buka template layout Anda dan sertakan partial sebelum </body>:
{% partial 'asyntai-widget' %}
Simpan layout

Tip: Menggunakan partial memudahkan untuk mengaktifkan atau menonaktifkan chatbot di seluruh situs Anda dengan cukup menambahkan atau menghapus penyertaan partial dari layout Anda.

Langkah 3: Verifikasi Instalasi

Setelah menyimpan perubahan Anda, kunjungi situs web October CMS Anda di tab browser baru atau jendela penyamaran. Anda seharusnya melihat tombol widget chat di pojok kanan bawah. Klik untuk memastikan widget terbuka dan berfungsi dengan benar.

Tidak melihat widget? Pastikan Anda menyimpan semua perubahan di backend CMS. Bersihkan cache browser Anda atau lihat di jendela penyamaran. Jika situs Anda menggunakan caching, bersihkan cache October CMS dengan menjalankan php artisan cache:clear dari baris perintah, atau gunakan opsi Settings > System > Clear Cache di backend.

Pemilihan Layout: Pastikan halaman tempat Anda ingin chatbot muncul menggunakan layout yang benar. Anda dapat memeriksa layout mana yang digunakan halaman dengan membuka halaman di CMS > Pages dan melihat dropdown Layout di pengaturan halaman.