Cara Menambah Chatbot AI Asyntai ke CrafterCMS

Panduan langkah demi langkah untuk laman web CrafterCMS

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

CrafterCMS menggunakan templat FreeMarker (.ftl) untuk memaparkan halaman. Cara paling mudah untuk menambah chatbot ke semua halaman ialah dengan mengedit templat halaman utama anda:

Dalam Crafter Studio, pergi ke Site Dashboard > Content Types atau navigasi ke templat
Buka templat halaman utama anda (contohnya, /templates/web/pages/home.ftl atau susun atur asas)
Cari tag penutup </body>
Tampal kod benam Asyntai anda sejurus sebelum tag </body>:
 <script async src="https://asyntai.com/static/js/chat-widget.js" data-asyntai-id="YOUR_WIDGET_ID"></script> </body>
Simpan fail dan terbitkan melalui Crafter Studio

Petua: Menambah skrip sebelum tag penutup </body> memastikan ia dimuatkan selepas kandungan halaman, yang disyorkan untuk widget sembang dan tidak akan melambatkan pemuatan halaman anda.

Kaedah Alternatif 1: Menggunakan Komponen Templat Crafter

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

Dalam Crafter Studio, buat fail templat baharu di /templates/web/components/asyntai-widget.ftl
Tambah kandungan berikut ke templat komponen:
 <script async src="https://asyntai.com/static/js/chat-widget.js" data-asyntai-id="YOUR_WIDGET_ID"></script>
Sertakan ia dalam templat susun atur utama anda menggunakan arahan sertaan FreeMarker:
<#include "/templates/web/components/asyntai-widget.ftl" />
Sebagai alternatif, jika menggunakan sistem rendering komponen Crafter, gunakan:
<@renderComponent component=contentModel.asyntaiWidget />
Simpan kedua-dua fail dan terbitkan melalui Crafter Studio

Nota: Menggunakan templat komponen berasingan memudahkan anda mengaktifkan atau menyahaktifkan chatbot di seluruh laman anda dengan mengomentari satu baris sertaan sahaja.

Kaedah Alternatif 2: Menggunakan Konfigurasi Head/Skrip Crafter

CrafterCMS membolehkan anda menyuntik skrip secara global melalui konfigurasi laman:

Dalam Crafter Studio, navigasi ke Site Config > Configuration
Buka fail Engine Site Configuration (site-config.xml)
Tambah konfigurasi suntikan skrip tersuai:
<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 susun atur FreeMarker asas anda untuk membaca dari konfigurasi laman dan menyuntik skrip secara dinamik:
<#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 terbitkan perubahan konfigurasi

Petua: Menggunakan konfigurasi laman membolehkan anda mengurus widget chatbot tanpa mengubah suai fail templat secara langsung, menjadikannya lebih mudah untuk dikemas kini atau dialih keluar kemudian.

Kaedah Alternatif 3: Menggunakan Pengawal Groovy

CrafterCMS menyokong skrip Groovy untuk logik sisi pelayan. Anda boleh menggunakan pengawal untuk menambah skrip chatbot secara dinamik:

Buat skrip Groovy dalam /scripts/pages/ (contohnya, /scripts/pages/home.groovy atau pengawal seluruh laman anda)
Tambah kod berikut untuk menyuntik URL skrip ke dalam model templat:
// /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 rujuk pemboleh ubah model dalam templat FreeMarker anda:
<#if model.asyntaiEnabled?? && model.asyntaiEnabled> <script async src="${model.asyntaiScriptSrc}" data-asyntai-id="${model.asyntaiWidgetId}"></script> </#if>
Simpan kedua-dua skrip Groovy dan fail templat
Terbitkan perubahan melalui Crafter Studio

Nota: Pendekatan pengawal Groovy berguna apabila anda memerlukan logik bersyarat (contohnya, mengaktifkan chatbot hanya untuk peranan pengguna atau jenis halaman tertentu) atau apabila anda mahu menarik nilai konfigurasi dari sumber luaran.

Langkah 3: Terbitkan dan Sahkan

Selepas membuat perubahan anda, terbitkan melalui Crafter Studio:

Dalam Crafter Studio, pergi ke Site Dashboard
Semak perubahan anda dalam bahagian My Recent Activity atau Pending Approval
Klik Publish untuk menggunakan perubahan pada tapak langsung anda
Buka laman web anda dalam tab pelayar baharu atau tetingkap inkognito
Anda sepatutnya melihat butang widget sembang di sudut kanan bawah
Klik padanya untuk memastikan ia terbuka dan berfungsi dengan betul

Tidak nampak widget? Pastikan anda telah menerbitkan perubahan melalui Crafter Studio. Sahkan bahawa anda mengedit fail templat yang betul yang digunakan oleh halaman anda. Kosongkan cache pelayar anda atau lihat dalam tetingkap inkognito. Jika menggunakan caching Crafter, kosongkan cache Engine dari papan pemuka Crafter Studio.

Lokasi Templat: Lokasi templat CrafterCMS mungkin berbeza bergantung pada struktur projek anda. Lokasi biasa termasuk /templates/web/pages/ untuk templat halaman, /templates/web/components/ untuk templat komponen, dan /templates/web/ untuk templat susun atur. Semak templat sedia ada anda untuk mencari di mana tag </body> ditakrifkan.