Kode widget chat AI: tambahkan asisten dukungan ke situs web mana pun
Salin satu tag script dan pasang asisten chat AI yang menjawab secara streaming di situs Anda. Panduan ini membahas kode sematan, opsinya, dan pemeriksaan sebelum tayang.
Diterbitkan:
Widget chat AI menjawab pengunjung di halaman yang sedang mereka baca. Dengan api14, seluruh integrasi hanya berupa satu tag script: Anda merancang widget di dasbor, menyalin kodenya, lalu menempelkannya ke HTML Anda. Tidak ada SDK yang perlu dipasang dan tidak ada kode server yang perlu ditulis.
Apa yang dilakukan widget chat
Widget chat adalah jendela percakapan kecil yang mengalirkan jawaban dari model pilihan Anda. Widget ini mengikuti instruksi pribadi yang Anda tulis dan tidak pernah dilihat pengunjung, sehingga bisa berperan sebagai agen dukungan, asisten penjualan, atau pemandu dokumentasi Anda. Jawaban mendukung format dasar (paragraf, daftar, huruf tebal, kode, dan tautan), tombol Hentikan memotong jawaban yang panjang, dan percakapan tetap tersimpan saat pengunjung berpindah halaman di tab yang sama.
Kode widget
Setelah Anda menyimpan widget di Widget, editor menampilkan kode sematannya:
<script src="https://api14.com/widget.js" data-widget="YOUR_WIDGET_ID" async></script>
Letakkan tag di dalam <body> di tempat chat harus muncul. Dua atribut opsional mengubah tempat dan cara widget ditampilkan:
| Atribut | Fungsinya |
|---|---|
data-target | Selektor CSS elemen tempat widget ditampilkan, misalnya #support. |
data-height | Tinggi widget di dalam halaman, misalnya 520px. Chat secara bawaan setinggi 480px. |
Jika Anda lebih suka tombol pembuka di sudut layar, pilih penempatan Tombol mengambang di editor. Kodenya tetap sama.
Empat langkah menuju asisten chat yang aktif
- Pilih model. Model chat apa pun di katalog bisa dipakai. Pemilih model menampilkan harga setiap model, jadi Anda bisa mulai dengan model yang cepat dan murah lalu beralih nanti tanpa menyentuh situs Anda.
- Pilih API key. Setiap widget berjalan dengan salah satu API key Anda. Pilih key yang sudah ada atau gunakan opsi terakhir di daftar, Buat API key baru, untuk membuat key khusus widget ini. Batas key berlaku untuk widget, dan key itu sendiri tidak pernah sampai ke browser.
- Tulis instruksi dan teks. Atur judul, pesan sambutan, teks petunjuk input, dan label tombol. Tambahkan instruksi pribadi yang menjelaskan produk Anda dan nada bicara yang Anda inginkan.
- Izinkan domain Anda. Di Pengaturan, Situs widget, daftarkan situs tempat widget boleh berjalan. Permintaan dari situs lain akan ditolak.
Mengapa widget tidak merusak halaman Anda
Widget ditampilkan di dalam Shadow DOM yang terisolasi. CSS Anda tidak bocor ke jendela chat, dan widget tidak mengubah gaya halaman Anda. Widget dimuat secara asinkron, sehingga tidak menghambat tampilnya konten Anda yang lain.
Sebelum tayang
- Buka pratinjau di editor dan ajukan pertanyaan yang benar-benar ditanyakan pelanggan Anda. Pratinjau menjalankan pengaturan Anda yang belum disimpan secara sungguhan.
- Atur batas pengeluaran harian untuk widget agar hari yang ramai tidak membawa kejutan.
- Pastikan saldo Anda cukup untuk lalu lintas yang diharapkan. Permintaan pengunjung dibebankan ke saldo USD Anda sesuai harga normal model.
Siap mencoba? Rancang widget chat tanpa akun di halaman widget, lalu baca referensi lengkapnya di dokumentasi widget.