Cara Menambahkan 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 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 Tema Grav (Disarankan)
Cara terbaik untuk menambahkan chatbot ke semua halaman situs Grav Anda adalah dengan mengedit template Twig dasar tema Anda:
- Navigasi ke direktori user/themes/yourtheme/templates/ proyek Grav Anda dan buka default.html.twig (atau template dasar yang digunakan tema Anda)
- Tambahkan kode embed 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 file
Tip: Grav menggunakan Twig sebagai mesin template-nya. Template dasar biasanya adalah default.html.twig atau partials/base.html.twig tergantung pada tema Anda. Periksa struktur tema Anda untuk menemukan file yang benar yang berisi tag penutup </body>.
Metode Alternatif 1: Menggunakan Grav Asset Manager
Asset Manager bawaan Grav menyediakan cara yang bersih untuk menambahkan aset JavaScript melalui Twig:
- Buka template Twig dasar tema Anda (misalnya, user/themes/yourtheme/templates/partials/base.html.twig)
- Gunakan Asset Manager untuk menambahkan JavaScript:
{% do assets.addJs('https://asyntai.com/static/js/chat-widget.js', {group: 'bottom', loading: 'async', 'data-asyntai-id': 'YOUR_WIDGET_ID'}) %}
Atau tambahkan JavaScript inline untuk membuat elemen skrip secara dinamis di template dasar 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>
Catatan: Metode Asset Manager adalah pendekatan yang direkomendasikan Grav untuk mengelola aset JavaScript. Metode ini menyediakan dukungan bawaan untuk pipelining, pengurutan, dan pengelompokan aset.
Metode Alternatif 2: Menggunakan Plugin Custom JS
Jika Anda lebih suka pendekatan berbasis plugin tanpa mengedit file tema:
- Instal plugin "Custom JS" dari panel admin Grav atau melalui CLI:
bin/gpm install custom-js
- Buka Admin > Plugins > Custom JS
- Tambahkan kode skrip embed:
<script async src="https://asyntai.com/static/js/chat-widget.js" data-asyntai-id="YOUR_WIDGET_ID"></script>
- Simpan konfigurasi plugin
Tip: Menggunakan plugin untuk menyuntikkan skrip berarti Anda tidak perlu memodifikasi file tema apa pun. Ini memudahkan untuk mengganti atau memperbarui tema tanpa kehilangan integrasi chatbot Anda.
Metode Alternatif 3: Menggunakan Override Blok di Template Anak
Jika tema Grav Anda menggunakan pewarisan blok Twig, Anda dapat meng-override blok bawah di template 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 template anak yang meng-extend template dasar tema Anda
- Tambahkan override blok yang ditunjukkan di atas
- Pemanggilan parent() memastikan semua konten yang ada di blok tetap tersimpan
Catatan: Metode ini menggunakan sistem pewarisan template Twig. Pastikan nama blok (misalnya, bottom) sesuai dengan blok yang didefinisikan di template dasar tema Anda. Nama blok umum termasuk bottom, javascripts, atau footer.
Metode Alternatif 4: Menggunakan Plugin Grav Custom Head
Opsi berbasis plugin lainnya adalah plugin Custom Head:
- Instal plugin custom-head melalui CLI atau panel admin:
bin/gpm install custom-head
- Buka Admin > Plugins > Custom Head
- Tambahkan kode skrip embed Asyntai Anda di konfigurasi plugin:
<script async src="https://asyntai.com/static/js/chat-widget.js" data-asyntai-id="YOUR_WIDGET_ID"></script>
- Simpan konfigurasi
Tip: Plugin Custom Head memungkinkan Anda menyuntikkan kode ke bagian head atau body situs Anda tanpa menyentuh file tema. Periksa dokumentasi plugin untuk opsi penempatan yang benar untuk menyisipkan skrip sebelum tag penutup </body>.
Langkah 3: Bersihkan Cache dan Verifikasi
Setelah menambahkan kode, bersihkan cache Grav Anda dan verifikasi instalasi:
# Clear cache via CLI
bin/grav clearcache
# Or clear cache from Admin Panel:
# Admin > Tools > Clear Cache
Buka situs Grav Anda di tab browser baru. 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 membersihkan cache Grav dengan bin/grav clearcache atau dari panel admin. Periksa bahwa Anda telah mengganti YOUR_WIDGET_ID dengan ID widget Anda yang sebenarnya dari dashboard. Bersihkan cache browser Anda atau lihat dalam mode penyamaran. Buka konsol browser (F12) untuk memeriksa kesalahan JavaScript. Verifikasi skrip ada di sumber halaman dengan mengklik kanan dan memilih "View Page Source".