Cara Menambahkan Chatbot AI Asyntai ke Kirby

Panduan langkah demi langkah untuk situs web CMS Kirby

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 Snippet Kirby (Disarankan)

Kirby adalah CMS PHP berbasis file datar yang menggunakan snippet untuk bagian template yang dapat digunakan kembali. Pendekatan yang direkomendasikan adalah membuat snippet khusus untuk chatbot:

Buat file snippet baru di site/snippets/asyntai-widget.php
Tempelkan kode embed Anda ke dalam file:

<script async src="https://asyntai.com/static/js/chat-widget.js" data-asyntai-id="YOUR_WIDGET_ID"></script>

Kemudian sertakan snippet di template utama Anda (misalnya, site/templates/default.php) atau layout Anda, tepat sebelum tag penutup </body>:

<?php snippet('asyntai-widget') ?>
</body>
</html>

Tip: Jika Anda menggunakan layout bersama atau snippet footer, Anda dapat menambahkan pemanggilan snippet di sana sehingga secara otomatis muncul di setiap halaman. Misalnya, tambahkan ke snippet footer Anda tepat sebelum </body>.

Metode Alternatif 1: Tambahkan ke Snippet Footer

Jika situs Kirby Anda menggunakan snippet footer, Anda dapat menambahkan kode embed langsung di sana:

Buka site/snippets/footer.php (buat jika belum ada)
Tambahkan kode embed sebelum tag penutup </body>:

    <!-- Footer content -->
    <script async src="https://asyntai.com/static/js/chat-widget.js" data-asyntai-id="YOUR_WIDGET_ID"></script>
  </body>
</html>

Pastikan template Anda menyertakan snippet footer:

<?php snippet('footer') ?>

Catatan: Jika snippet footer sudah disertakan di semua template Anda, menambahkan chatbot di sini memastikan chatbot muncul di setiap halaman tanpa memodifikasi file template individual.

Metode Alternatif 2: Menggunakan Plugin Kirby

Anda dapat membuat plugin Kirby untuk secara otomatis menyuntikkan skrip chatbot ke setiap halaman tanpa memodifikasi template apa pun:

Buat direktori dan file plugin di site/plugins/asyntai/index.php
Tambahkan kode berikut untuk menggunakan hook Kirby guna menyuntikkan skrip:

Kirby::plugin('custom/asyntai', [
    'hooks' => [
        'page.render:after' => function ($contentType, $body) {
            $script = '<script async src="https://asyntai.com/static/js/chat-widget.js" data-asyntai-id="YOUR_WIDGET_ID"></script>';
            return str_replace('</body>', $script . '</body>', $body);
        }
    ]
]);

Tip: Pendekatan plugin ideal jika Anda ingin chatbot dimuat di setiap halaman secara otomatis tanpa mengedit file template atau snippet apa pun. Ini juga menjaga integrasi chatbot Anda tetap modular dan mudah untuk diaktifkan atau dinonaktifkan.

Metode Alternatif 3: Menggunakan Helper js() Kirby

Kirby menyediakan helper js() bawaan untuk memuat file JavaScript. Anda dapat menggunakannya di template atau snippet Anda:

<?= js('https://asyntai.com/static/js/chat-widget.js', ['async' => true, 'data-asyntai-id' => 'YOUR_WIDGET_ID']) ?>

Atau tambahkan skrip langsung di file PHP template Anda sebelum </body>:

<?php // site/templates/default.php ?>
<html>
<head>
    <!-- head content -->
</head>
<body>
    <!-- page content -->
    <?php snippet('header') ?>
    <main>
        <?= $page->text()->kirbytext() ?>
    </main>
    <?php snippet('footer') ?>

    <script async src="https://asyntai.com/static/js/chat-widget.js" data-asyntai-id="YOUR_WIDGET_ID"></script>
</body>
</html>

Catatan: Jika Anda menggunakan helper js(), pastikan ditempatkan di dalam bagian <body> template Anda untuk memastikan chatbot dimuat dengan benar.

Langkah 3: Verifikasi Instalasi

Setelah menambahkan kode embed ke situs Kirby Anda, kunjungi situs web 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 mengganti YOUR_WIDGET_ID dengan ID widget Anda yang sebenarnya dari dashboard. Verifikasi bahwa file snippet atau plugin disimpan di direktori yang benar. Jika menggunakan metode plugin, pastikan struktur direktori plugin adalah site/plugins/asyntai/index.php. Bersihkan cache browser Anda atau uji dalam mode penyamaran. Periksa konsol pengembang browser Anda (F12) untuk kesalahan apa pun.