Cara Menambahkan Chatbot AI Asyntai ke Bubble

Panduan langkah demi langkah untuk aplikasi Bubble

Dapatkan Kode Embed

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: Menggunakan Pengaturan Aplikasi (Disarankan)

Bubble memiliki cara bawaan untuk menambahkan skrip kustom melalui pengaturan aplikasi:

  1. Masuk ke editor aplikasi Bubble Anda
  2. Buka Settings di sidebar kiri
  3. Klik tab "Web App"
  4. Gulir ke bawah ke "Advanced Settings"
  5. Temukan bagian "Custom headers and body"
  6. Tempel kode embed Asyntai Anda di bidang "Script in body"
  7. Deploy aplikasi Anda

Tip: Menambahkan kode ke bidang skrip body memastikan kode dimuat di setiap halaman aplikasi Bubble Anda, yang merupakan pendekatan yang disarankan untuk widget obrolan. Fitur ini tersedia di semua paket Bubble termasuk Free.

Alternatif: Menggunakan Elemen HTML

Jika Anda lebih suka menambahkan chatbot ke halaman tertentu saja:

  1. Di editor Bubble, buka halaman di mana Anda ingin chatbot
  2. Tambahkan elemen HTML ke halaman Anda
  3. Tempel kode embed Asyntai di elemen tersebut
  4. Deploy aplikasi Anda

Catatan: Metode pengaturan aplikasi lebih disukai karena menerapkan chatbot di seluruh aplikasi Anda. Metode elemen HTML hanya akan menambahkan chatbot ke halaman tertentu di mana Anda menempatkan elemen.

Langkah 3: Verifikasi Instalasi

Setelah men-deploy aplikasi Anda, kunjungi situs Bubble 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 telah men-deploy aplikasi setelah menambahkan kode. Coba bersihkan cache browser Anda atau lihat di jendela penyamaran. Jika menguji dalam mode pengembangan, pastikan juga untuk memeriksa versi live aplikasi Anda.