Cara Menambahkan Chatbot AI Asyntai ke Craft CMS

Panduan langkah demi langkah untuk situs web Craft 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: Edit Template Layout Anda (Disarankan)

Cara termudah untuk menambahkan chatbot ke semua halaman adalah dengan mengedit template layout utama Anda:

Akses file proyek Craft CMS Anda melalui FTP, SSH, atau editor kode Anda
Navigasi ke direktori templates/
Temukan file layout utama Anda (biasanya bernama _layout.twig, _layout.html, atau terletak di templates/_layouts/)
Temukan tag penutup </body>
Tempel kode embed Asyntai Anda tepat sebelum tag </body>
Simpan file

Tips: Menambahkan skrip sebelum tag penutup </body> memastikan skrip dimuat setelah konten halaman, yang disarankan untuk widget obrolan dan tidak akan memperlambat pemuatan halaman Anda.

Alternative: Using Twig {% js %} Tag (Craft CMS 3.x+)

Craft CMS menyediakan tag Twig bawaan untuk mendaftarkan JavaScript:

Buka template layout utama Anda
Tambahkan kode berikut sebelum tag penutup </body>:
{% js %} (function() { var script = document.createElement('script'); script.async = true; script.src = 'https://asyntai.com/static/js/chat-widget.js'; script.setAttribute('data-asyntai-id', 'YOUR_WIDGET_ID'); document.body.appendChild(script); })(); {% endjs %}
Ganti YOUR_WIDGET_ID dengan ID widget Anda yang sebenarnya
Simpan file

Catatan: The {% js %} tag automatically handles script registration and prevents duplicate loading if the same code appears multiple times.

Alternatif: Buat File Include Terpisah

Untuk organisasi yang lebih baik, buat file include khusus:

Buat file baru: templates/_includes/chatbot.twig (atau .html)
Tambahkan kode embed Asyntai Anda ke file ini:
<script async src="https://asyntai.com/static/js/chat-widget.js" data-asyntai-id="YOUR_WIDGET_ID"></script>
Di template layout utama Anda, sertakan file ini sebelum </body>:
{% include '_includes/chatbot' %}
Simpan kedua file

Tips: Menggunakan file include memudahkan untuk mengaktifkan/menonaktifkan chatbot di seluruh situs Anda dengan mengomentari satu baris saja.

Alternatif: Pemuatan Bersyarat

Untuk memuat chatbot hanya pada halaman atau bagian tertentu:

Di template layout atau halaman Anda, gunakan kondisional Twig:
{% if entry.showChatbot ?? true %} <script async src="https://asyntai.com/static/js/chat-widget.js" data-asyntai-id="YOUR_WIDGET_ID"></script> {% endif %}
Atau periksa bagian tertentu:
{% if craft.app.request.segments[0] != 'admin' %} <script async src="https://asyntai.com/static/js/chat-widget.js" data-asyntai-id="YOUR_WIDGET_ID"></script> {% endif %}

Langkah 3: Verifikasi Instalasi

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

Tidak melihat widget? Pastikan Anda telah menyimpan file template dan bahwa Anda mengedit template layout yang benar yang digunakan halaman Anda. Bersihkan cache browser Anda atau lihat di jendela penyamaran. Jika menggunakan caching template, bersihkan cache Craft CMS dari Control Panel di bawah Utilities > Clear Caches.

Lokasi Template: Lokasi template Craft CMS dapat bervariasi tergantung pada pengaturan proyek Anda. Lokasi umum termasuk templates/_layout.twig, templates/_layouts/main.twig, atau templates/_base.twig. Periksa template yang ada untuk menemukan di mana tag </body> didefinisikan.