Cara Menambah Chatbot AI Asyntai ke Grav
Panduan langkah demi langkah untuk CMS Grav
HTML/Custom
WordPress
Shopify
WooCommerce
BigCommerce
Ecwid
Wix
Squarespace
Webflow
Weebly
HubSpot
Tilda
Adobe Experience Manager
Duda
Google Sites
Bludit
Plesk
Concrete CMS
Docusaurus
Hugo
Kentico
Volusion
Craft CMS
Contentful
Strapi
Joomla
Drupal
Magento
Blogger
Bitrix
TYPO3
PrestaShop
OpenCart
Ghost
Statamic
Umbraco
Moodle
SilverStripe
Grav
October CMS
ProcessWire
Sanity
ExpressionEngine
Sylius
Backdrop CMS
MODX
Bagisto
PayloadCMS
e107
CrafterCMS
Kirby
MedusaCMS
DatoCMS
GoDaddy
Framer
Bubble
Carrd
Jimdo
Strikingly
Kajabi
Teachable
Thinkific
ClickFunnels
Hostinger
Unbounce
Leadpages
Systeme.io
Instapage
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 Tema Grav (Disyorkan)
Cara terbaik untuk menambah chatbot ke semua halaman laman Grav anda ialah dengan mengedit templat Twig asas tema anda:
- Navigasi ke direktori user/themes/yourtheme/templates/ projek Grav anda dan buka default.html.twig (atau templat asas yang digunakan oleh tema anda)
- Tambah kod benam Asyntai anda sebelum tag penutup </body>:
<!-- user/themes/yourtheme/templates/default.html.twig -->
...
<script async src="https://asyntai.com/static/js/chat-widget.js" data-asyntai-id="YOUR_WIDGET_ID"></script>
</body>
</html>
- Simpan fail
Petua: Grav menggunakan Twig sebagai enjin templatnya. Templat asas biasanya default.html.twig atau partials/base.html.twig bergantung pada tema anda. Semak struktur tema anda untuk mencari fail yang betul yang mengandungi tag penutup </body>.
Kaedah Alternatif 1: Menggunakan Pengurus Aset Grav
Pengurus Aset terbina dalam Grav menyediakan cara yang bersih untuk menambah aset JavaScript melalui Twig:
- Buka templat Twig asas tema anda (contohnya, user/themes/yourtheme/templates/partials/base.html.twig)
- Gunakan Pengurus Aset untuk menambah JavaScript:
{% do assets.addJs('https://asyntai.com/static/js/chat-widget.js', {group: 'bottom', loading: 'async', 'data-asyntai-id': 'YOUR_WIDGET_ID'}) %}
Atau tambah JavaScript sebaris untuk membuat elemen skrip secara dinamik dalam templat asas anda:
<!-- user/themes/yourtheme/templates/partials/base.html.twig -->
...
{% block bottom %}
{{ assets.js('bottom') }}
{% endblock %}
<script>
(function() {
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.body.appendChild(script);
})();
</script>
</body>
</html>
Nota: Kaedah Pengurus Aset ialah pendekatan yang disyorkan oleh Grav untuk mengurus aset JavaScript. Ia menyediakan sokongan terbina dalam untuk saluran paip aset, pengurutan, dan pengelompokan.
Kaedah Alternatif 2: Menggunakan Plugin JS Tersuai
Jika anda lebih suka pendekatan berasaskan plugin tanpa mengedit fail tema:
- Pasang plugin "Custom JS" dari panel pentadbir Grav atau melalui CLI:
bin/gpm install custom-js
- Pergi ke Admin > Plugins > Custom JS
- Tambah kod skrip benam:
<script async src="https://asyntai.com/static/js/chat-widget.js" data-asyntai-id="YOUR_WIDGET_ID"></script>
- Simpan konfigurasi plugin
Petua: Menggunakan plugin untuk menyuntik skrip bermakna anda tidak perlu mengubah suai sebarang fail tema. Ini memudahkan anda menukar atau mengemas kini tema tanpa kehilangan integrasi chatbot anda.
Kaedah Alternatif 3: Menggunakan Pengatasan Blok dalam Templat Anak
Jika tema Grav anda menggunakan pewarisan blok Twig, anda boleh mengatasi blok bawah dalam templat anak:
{% block bottom %}
{{ parent() }}
<script async src="https://asyntai.com/static/js/chat-widget.js" data-asyntai-id="YOUR_WIDGET_ID"></script>
{% endblock %}
- Buat atau buka templat anak yang melanjutkan templat asas tema anda
- Tambah pengatasan blok yang ditunjukkan di atas
- Panggilan parent() memastikan semua kandungan sedia ada dalam blok dikekalkan
Nota: Kaedah ini menggunakan sistem pewarisan templat Twig. Pastikan nama blok (contohnya, bottom) sepadan dengan blok yang ditakrifkan dalam templat asas tema anda. Nama blok biasa termasuk bottom, javascripts, atau footer.
Kaedah Alternatif 4: Menggunakan Plugin Custom Head Grav
Pilihan berasaskan plugin lain ialah plugin Custom Head:
- Pasang plugin custom-head melalui CLI atau panel pentadbir:
bin/gpm install custom-head
- Pergi ke Admin > Plugins > Custom Head
- Tambah kod skrip benam Asyntai anda dalam konfigurasi plugin:
<script async src="https://asyntai.com/static/js/chat-widget.js" data-asyntai-id="YOUR_WIDGET_ID"></script>
- Simpan konfigurasi
Petua: Plugin Custom Head membolehkan anda menyuntik kod ke dalam bahagian head atau body laman anda tanpa menyentuh fail tema. Semak dokumentasi plugin untuk pilihan penempatan yang betul untuk menyisipkan skrip sebelum tag penutup </body>.
Langkah 3: Kosongkan Cache dan Sahkan
Selepas menambah kod, kosongkan cache Grav anda dan sahkan pemasangan:
# Clear cache via CLI
bin/grav clearcache
# Or clear cache from Admin Panel:
# Admin > Tools > Clear Cache
Buka laman Grav anda dalam tab pelayar baharu. Anda sepatutnya melihat butang widget sembang di sudut kanan bawah. Klik untuk memastikan ia terbuka dan berfungsi dengan betul.
Tidak nampak widget? Pastikan anda telah mengosongkan cache Grav dengan bin/grav clearcache atau dari panel pentadbir. Pastikan anda telah menggantikan YOUR_WIDGET_ID dengan ID widget sebenar anda dari papan pemuka. Kosongkan cache pelayar anda atau lihat dalam mod inkognito. Buka konsol pelayar (F12) untuk menyemak sebarang ralat JavaScript. Sahkan skrip hadir dalam sumber halaman dengan mengklik kanan dan memilih "View Page Source".