Cara Menambahkan Chatbot AI Asyntai ke Webflow

Panduan langkah demi langkah untuk website Webflow

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: Tambahkan Kode melalui Site Settings (Semua Halaman)

Untuk menambahkan chatbot ke semua halaman situs Webflow Anda sekaligus:

  1. Masuk ke akun Webflow Anda dan pilih proyek Anda
  2. Klik ikon gear (Site Settings) di sidebar kiri
  3. Klik "Custom Code" di menu pengaturan
  4. Gulir ke bawah ke bagian "Footer Code" (sebelum tag </body>)
  5. Tempel kode embed Asyntai Anda
  6. Klik "Save Changes"
  7. Publish situs Anda agar perubahan dapat diterapkan

Tips: Menambahkan kode ke bagian Footer menempatkannya tepat sebelum tag penutup </body>, yang direkomendasikan untuk widget chat karena tidak akan memperlambat pemuatan halaman Anda.

Alternatif: Custom Code Khusus Halaman

Jika Anda hanya ingin chatbot di halaman tertentu:

  1. Buka proyek Anda di Webflow Designer
  2. Klik panel Pages (ikon folder) di sidebar kiri
  3. Arahkan kursor ke halaman yang ingin Anda edit dan klik ikon gear
  4. Gulir ke bawah ke "Custom Code"
  5. Tempel kode embed Asyntai Anda di bagian "Before </body> tag"
  6. Klik "Save"
  7. Publish situs Anda

Alternatif: Menggunakan Elemen Embed

Anda juga dapat menambahkan chatbot menggunakan elemen Embed di mana saja pada halaman Anda:

  1. Buka proyek Anda di Webflow Designer
  2. Klik tombol "+" untuk membuka panel Add
  3. Cari "Embed" atau temukan di bawah Components
  4. Seret elemen Embed ke halaman Anda
  5. Tempel kode embed Asyntai Anda di editor kode
  6. Klik "Save & Close"
  7. Publish situs Anda

Penting: Saat menggunakan elemen Embed, Anda perlu menambahkannya ke setiap halaman tempat Anda ingin chatbot muncul. Untuk instalasi di seluruh situs, gunakan metode Site Settings di atas.

Langkah 3: Verifikasi Instalasi

Setelah mempublikasikan situs Anda, buka di tab browser baru atau jendela incognito. Anda akan melihat tombol widget chat di pojok kanan bawah. Klik untuk memastikan widget terbuka dan berfungsi dengan benar.

Tidak melihat widget? Pastikan Anda telah mempublikasikan situs setelah menambahkan kode. Custom code hanya muncul di situs live, bukan di pratinjau Designer. Coba bersihkan cache browser atau lihat di jendela incognito.