Cara Menambahkan Chatbot AI Asyntai ke CrafterCMS

Panduan langkah demi langkah untuk situs web CrafterCMS

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 FreeMarker (Disarankan)

CrafterCMS menggunakan template FreeMarker (.ftl) untuk merender halaman. Cara termudah untuk menambahkan chatbot ke semua halaman adalah dengan mengedit template halaman utama Anda:

Di Crafter Studio, buka Site Dashboard > Content Types atau navigasi ke template
Buka template halaman utama Anda (misalnya, /templates/web/pages/home.ftl atau layout dasar)
Temukan tag penutup </body>
Tempelkan kode embed Asyntai Anda tepat sebelum tag </body>:
 <script async src="https://asyntai.com/static/js/chat-widget.js" data-asyntai-id="YOUR_WIDGET_ID"></script> </body>
Simpan file dan publikasikan melalui Crafter Studio

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

Metode Alternatif 1: Menggunakan Komponen Template Crafter

Untuk organisasi yang lebih baik, buat template komponen khusus untuk widget chatbot:

Di Crafter Studio, buat file template baru di /templates/web/components/asyntai-widget.ftl
Tambahkan konten berikut ke template komponen:
 <script async src="https://asyntai.com/static/js/chat-widget.js" data-asyntai-id="YOUR_WIDGET_ID"></script>
Sertakan di template layout utama Anda menggunakan direktif include FreeMarker:
<#include "/templates/web/components/asyntai-widget.ftl" />
Atau, jika menggunakan sistem rendering komponen Crafter, gunakan:
<@renderComponent component=contentModel.asyntaiWidget />
Simpan kedua file dan publikasikan melalui Crafter Studio

Catatan: Menggunakan template komponen terpisah memudahkan untuk mengaktifkan atau menonaktifkan chatbot di seluruh situs Anda dengan mengomentari satu baris include saja.

Metode Alternatif 2: Menggunakan Konfigurasi Head/Scripts Crafter

CrafterCMS memungkinkan Anda menyuntikkan skrip secara global melalui konfigurasi situs:

Di Crafter Studio, navigasi ke Site Config > Configuration
Buka file Engine Site Configuration (site-config.xml)
Tambahkan konfigurasi injeksi skrip kustom:
<site>   <scripts> <script> <src>https://asyntai.com/static/js/chat-widget.js</src> <async>true</async> <data-asyntai-id>YOUR_WIDGET_ID</data-asyntai-id> </script> </scripts> </site>
Sebagai alternatif, edit layout FreeMarker dasar Anda untuk membaca dari konfigurasi situs dan menyuntikkan skrip secara dinamis:
<#if siteConfig.getString("scripts.script.src", "")?has_content> <script async src="${siteConfig.getString("scripts.script.src")}" data-asyntai-id="${siteConfig.getString("scripts.script.data-asyntai-id")}"></script> </#if>
Simpan dan publikasikan perubahan konfigurasi

Tip: Menggunakan konfigurasi situs memungkinkan Anda mengelola widget chatbot tanpa memodifikasi file template secara langsung, sehingga lebih mudah untuk memperbarui atau menghapus di kemudian hari.

Metode Alternatif 3: Menggunakan Groovy Controller

CrafterCMS mendukung skrip Groovy untuk logika sisi server. Anda dapat menggunakan controller untuk menambahkan skrip chatbot secara dinamis:

Buat skrip Groovy di /scripts/pages/ (misalnya, /scripts/pages/home.groovy atau controller seluruh situs Anda)
Tambahkan kode berikut untuk menyuntikkan URL skrip ke model template:
// /scripts/pages/home.groovy import org.craftercms.engine.service.context.SiteContext def siteContext = SiteContext.current // Add Asyntai chatbot configuration to the model model.asyntaiEnabled = true model.asyntaiWidgetId = "YOUR_WIDGET_ID" model.asyntaiScriptSrc = "https://asyntai.com/static/js/chat-widget.js"
Kemudian referensikan variabel model di template FreeMarker Anda:
<#if model.asyntaiEnabled?? && model.asyntaiEnabled> <script async src="${model.asyntaiScriptSrc}" data-asyntai-id="${model.asyntaiWidgetId}"></script> </#if>
Simpan skrip Groovy dan file template
Publikasikan perubahan melalui Crafter Studio

Catatan: Pendekatan Groovy controller berguna ketika Anda membutuhkan logika bersyarat (misalnya, mengaktifkan chatbot hanya untuk peran pengguna atau tipe halaman tertentu) atau ketika Anda ingin mengambil nilai konfigurasi dari sumber eksternal.

Langkah 3: Publikasikan dan Verifikasi

Setelah melakukan perubahan, publikasikan melalui Crafter Studio:

Di Crafter Studio, buka Site Dashboard
Tinjau perubahan Anda di bagian My Recent Activity atau Pending Approval
Klik Publish untuk menerapkan perubahan ke situs live Anda
Kunjungi situs web CrafterCMS Anda di tab browser baru atau jendela penyamaran
Anda seharusnya melihat tombol widget obrolan di pojok kanan bawah
Klik untuk memastikan widget terbuka dan berfungsi dengan benar

Tidak melihat widget? Pastikan Anda telah mempublikasikan perubahan melalui Crafter Studio. Verifikasi bahwa Anda mengedit file template yang benar yang digunakan halaman Anda. Bersihkan cache browser Anda atau lihat di jendela penyamaran. Jika menggunakan caching Crafter, bersihkan cache Engine dari dashboard Crafter Studio.

Lokasi Template: Lokasi template CrafterCMS dapat bervariasi tergantung pada struktur proyek Anda. Lokasi umum termasuk /templates/web/pages/ untuk template halaman, /templates/web/components/ untuk template komponen, dan /templates/web/ untuk template layout. Periksa template yang ada untuk menemukan di mana tag </body> didefinisikan.