Cara Menambahkan Chatbot AI Asyntai ke Bagisto

Panduan langkah demi langkah untuk platform e-commerce Bagisto

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 Templat Layout Blade (Disarankan)

Bagisto menggunakan templat Laravel Blade. Pendekatan yang disarankan adalah menambahkan kode embed langsung ke file layout toko:

Buka file layout toko:
- Sumber paket: packages/Webkul/Shop/src/Resources/views/layouts/master.blade.php
- Versi yang dipublikasikan: resources/views/vendor/shop/layouts/master.blade.php (jika Anda telah mempublikasikan view)
Temukan tag penutup </body>
Tambahkan kode embed tepat sebelum </body>, setelah @stack('scripts'):

@stack('scripts')
<script async src="https://asyntai.com/static/js/chat-widget.js" data-asyntai-id="YOUR_WIDGET_ID"></script>
</body>

Tip: Jika Anda telah mempublikasikan vendor view, edit versi yang dipublikasikan di resources/views/vendor/shop/. Jika belum, publikasikan terlebih dahulu dengan php artisan vendor:publish --tag=shop-views untuk menghindari kehilangan perubahan saat pembaruan paket.

Metode Alternatif 1: Menggunakan @push('scripts') di View

Di view atau komponen Blade mana pun, Anda dapat menggunakan stack scripts untuk menyuntikkan skrip chatbot:

@push('scripts')
    <script async src="https://asyntai.com/static/js/chat-widget.js" data-asyntai-id="YOUR_WIDGET_ID"></script>
@endpush

Catatan: Metode ini memerlukan @stack('scripts') ada di file layout master. Ini sudah disertakan secara default di layout Bagisto.

Metode Alternatif 2: Menggunakan Service Provider

Anda dapat menggunakan service provider untuk membuat skrip tersedia di semua view secara terprogram. Buat service provider kustom atau gunakan AppServiceProvider:

public function boot()
{
    view()->composer('shop::layouts.master', function ($view) {
        // The script will be available in the layout
    });
}

Atau buat komponen Blade yang merender tag skrip dan sertakan di layout Anda.

Tip: Pendekatan service provider berguna jika Anda ingin memuat chatbot secara kondisional berdasarkan nilai konfigurasi atau pengaturan lingkungan.

Metode Alternatif 3: Menggunakan Sistem Event Bagisto

Bagisto menjalankan event view di berbagai titik di layout. Anda dapat mendengarkan bagisto.shop.layout.body.after untuk menyuntikkan skrip chatbot:

Event::listen('bagisto.shop.layout.body.after', function($viewRenderEventManager) {
    $viewRenderEventManager->addTemplate('shop::partials.asyntai-widget');
});

Kemudian buat templat parsial di packages/Webkul/Shop/src/Resources/views/partials/asyntai-widget.blade.php (atau versi yang dipublikasikan) dengan kode embed Anda:

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

Catatan: Pendekatan sistem event menjaga perubahan Anda tetap modular dan terpisah dari file layout inti, membuatnya lebih mudah dikelola selama pembaruan Bagisto.

Langkah 3: Bersihkan Cache dan Verifikasi

Setelah menambahkan kode embed, bersihkan cache aplikasi untuk memastikan perubahan Anda berlaku:

php artisan cache:clear && php artisan view:clear

Kunjungi toko Bagisto 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 menjalankan php artisan cache:clear dan php artisan view:clear. Coba juga bersihkan cache browser Anda atau lihat di jendela penyamaran. Jika Anda mengedit sumber paket secara langsung, verifikasi bahwa tidak ada view yang dipublikasikan yang menimpa perubahan Anda. Periksa bahwa kode embed Anda ditempatkan dengan benar sebelum tag penutup </body>.