Chatbot kini menjadi saluran layanan pelanggan baku, tetapi situs HTML tidak memiliki integrasi satu-klik seperti yang tersedia di platform seperti Shopify atau WordPress. Kabar baiknya: Anda tidak perlu membangun dari nol — chatbot HTML bisa dikonfigurasi secara visual dan disematkan ke halaman mana pun dengan satu cuplikan kode.
Ini bisa dilakukan dengan Elfsight AI Chatbot – widget ramah pengguna yang dilatih dengan konten bisnis Anda sendiri dan disematkan ke file HTML mana pun dengan menempel dua baris. Ia menangani pertanyaan pengunjung, mengumpulkan leads, dan mendukung percakapan multibahasa secara bawaan. Di bawah ini, kami jelaskan pendekatan ini bersama metode buat-sendiri, sehingga Anda bisa memilih yang paling pas untuk pengaturan Anda.
- Cara cepat & mudah menyematkan AI Chatbot di HTML tanpa coding
- Cara melatih dan menyesuaikan chatbot untuk kasus penggunaan Anda
- Batasan apa saja untuk metode integrasi manual
- 6 tips optimasi untuk membangun pengalaman chatbot yang benar-benar efektif
Cara Cepat Menambahkan Chatbot ke HTML
Berikut cara menambahkan chatbot ke HTML dalam empat langkah, tanpa coding selain satu tempel kode:
- Buka editor dan pilih template AI chatbot
- Atur basis pengetahuan chatbot & sesuaikan pengaturannya
- Klik “Tambahkan ke Website” untuk mendapatkan kode pemasangan.
- Sisipkan di dalam bagian <body> pada file HTML Anda dan simpan.
Konfigurasikan chatbot bertenaga AI Anda di editor interaktif di bawah ini ↓
Cara Mengatur Chatbot HTML
Ada beberapa cara untuk menambahkan chatbot ke situs HTML kustom Anda. Cara yang tepat tergantung pada seberapa banyak kendali yang Anda butuhkan, berapa banyak waktu yang ingin Anda habiskan, dan apakah Anda mencari percakapan bertenaga AI atau pohon keputusan sederhana.
| Metode | Tingkat Kesulitan | Kecerdasan Buatan | Kustomisasi | Pemeliharaan | Biaya |
|---|---|---|---|---|---|
| Elfsight AI Chatbot | Tanpa kode | Ya (berbasis GPT) | Tinggi (editor visual) | Tidak ada (di-host di cloud) | Paket gratis / paket berbayar |
| Chatbot JavaScript kustom | Lanjutan | Opsional (membutuhkan API) | Lengkap | Tinggi (dikelola sendiri) | Biaya API |
| Integrasi API pihak ketiga | Menengah | Ya | Sedang | Sedang | Biaya penggunaan API |
| Kerangka kerja chatbot sumber terbuka | Lanjutan | Bervariasi | Lengkap | Tinggi | Gratis + hosting |
Inti yang perlu diingat: Widget chatbot adalah jalur tercepat jika Anda tidak ingin membangun atau memelihara infrastruktur. Chatbot JS kustom atau integrasi API langsung memberi Anda lebih banyak kendali tetapi memerlukan waktu pengembangan dan pemeliharaan berkelanjutan — hal yang sama juga berlaku untuk kerangka kerja sumber terbuka.
Jenis Chatbot yang Anda Butuhkan?
Sebelum Anda mengonfigurasi apa pun, ada baiknya memikirkan apa sebenarnya yang Anda inginkan chatbot lakukan.
Asisten Dukungan vs. Alat Konversi
Kebanyakan orang menggunakan pengaturan default sebagai “bot dukungan pelanggan,” tetapi data komunitas Elfsight sendiri menunjukkan bahwa mayoritas pengaturan chatbot tidak sepenuhnya agen dukungan. Mereka dipakai sebagai asisten pemesanan, panduan rekomendasi produk, penjelajah FAQ, dan alur konversi untuk konsultasi.
| Kasus Penggunaan | Fokus Basis Pengetahuan | Keterampilan utama yang diperlukan | Gaya Salam |
|---|---|---|---|
| Dukungan pelanggan | Dokumen Bantuan, Kebijakan, Panduan Pemecahan Masalah | Hubungi Manusia, Pesan Tindak Lanjut | Berorientasi tugas (“Bagaimana saya bisa membantu?”) |
| Panduan Penjualan / Produk | Halaman produk, harga, perbandingan | Tombol Aksi (WhatsApp, Email, URL) | Berorientasi manfaat (“Temukan paket yang tepat”) |
| Pemesanan / Konsultasi | Layanan, ketersediaan, proses | Tombol Aksi (Arah, URL), Kumpulkan Kontak | Berorientasi aksi (”Pesan sesi”) |
| Pendidikan / FAQ | Artikel, panduan, blok teks | Pesan Tindak Lanjut | Berorientasi ingin tahu (“Tanyakan apa saja tentang…”) |
Perbedaan ini penting karena mengubah apa yang Anda masukkan ke dalam basis pengetahuan, bagaimana Anda menulis salam pembuka, dan keterampilan mana yang Anda aktifkan.
Satu chatbot atau beberapa?
Jika situs Anda melayani audiens atau kasus penggunaan yang berbeda, pertimbangkan memakai widget chatbot terpisah untuk halaman yang berbeda daripada satu bot serba guna. Setiap widget bisa memiliki basis pengetahuan dan instruksi sendiri — memungkinkan chatbot halaman harga membandingkan paket sementara chatbot halaman dukungan fokus pada pemecahan masalah. Hal ini menjaga jawaban tetap terfokus dan mengurangi kebingungan.
Lebih suka menonton daripada membaca? Tutorial singkat ini menampilkan seluruh pengaturan:
Panduan Lengkap Mengatur HTML Chatbot
Sekarang Anda telah memutuskan tipe chatbot yang Anda perlukan, panduan langkah-demi-langkah ini mencakup setiap tahap konfigurasi, mulai dari pemilihan templat hingga penyematan.
Langkah 1: Pilih template chatbot HTML Anda
Buka editor AI Chatbot, dan Anda akan melihat perpustakaan template pemula yang dirancang untuk berbagai kasus penggunaan. Setiap template dilengkapi salam pembuka, pertanyaan yang disarankan, dan gaya unik. Pilih template yang paling mendekati tipe bisnis Anda atau mulai dari kosong — Anda akan menyesuaikan semuanya di langkah berikutnya.
Setelah Anda memilih template, klik “Lanjutkan dengan template ini” dan tempelkan URL situs Anda untuk memulai pelatihan awal.
Langkah 2: Konfigurasikan profil agen AI
Selanjutnya, tab Agent tab adalah tempat Anda menentukan bagaimana chatbot menampilkan diri dan bagaimana ia berkomunikasi. Ini adalah hal pertama yang dilihat pengunjung saat jendela obrolan dibuka, jadi penting untuk mendapatkan tampilannya dengan benar.
- Nama Tampilan & Keterangan
- Foto Profil — unggah logo Anda atau avatar kustom
- Peran — jelaskan apa yang dilakukan agen agar AI tetap dalam karakter
- Nada Suara — pilih dari Ramah, Profesional, Santai, Langsung, atau tulis instruksi kustom
- Panjang Jawaban — Pendek (jawaban cepat, ringkas), Sedang (jawaban seimbang), atau Panjang
Salam & Pertanyaan yang Disarankan
Ini adalah salah satu langkah yang memiliki dampak besar terhadap apakah orang benar-benar menggunakan chatbot. Salam seperti <em>“Hello! How can I help you?”</em> bagus tetapi bersifat umum. Salam seperti <em>“Hi! I can help you find the right plan, check feature availability, or walk you through setup — just ask”</em> memberi pengunjung gambaran tepat tentang apa yang bisa dilakukan chatbot.
Untuk pertanyaan yang telah dipersiapkan, buat 2–4 pertanyaan yang mencerminkan apa yang paling sering ditanyakan pengunjung Anda untuk membimbing mereka ke arah yang tepat sejak awal.
Instruksi Agen
Di bawah pengaturan profil, Anda juga akan menemukan Aturan Percakapan — ini memungkinkan Anda menetapkan perilaku spesifik, misalnya “Jangan membahas harga pesaing” atau “Selalu sarankan pemesanan konsultasi untuk pertanyaan kompleks.” Anggap ini sebagai pagar panduan: AI mengandalkan data pelatihannya untuk fakta, tetapi aturan yang mengarahkan bagaimana ia menangani kasus tepi.
Langkah 3: Bangun dan Atur Basis Pengetahuan Anda
Sekarang langkah terpenting: tab <em>Knowledge</em> adalah tempat chatbot Anda belajar apa yang harus disampaikan. Chatbot hanya sebaik konten yang dilatih.
Anda memiliki lima cara untuk memberikan informasinya:
- Halaman Web — tempel URL dari situs Anda (hingga 200 halaman)
- Berkas — unggah dokumen dalam format PDF, TXT, JSON, DOCX, PPTX, HTML, atau MD
- Pertanyaan & Jawaban — tambahkan pasangan Q&A yang telah ditentukan untuk pertanyaan pengunjung yang paling umum
- Blok Teks Bebas — blok konten teks bebas untuk rincian bisnis, kebijakan, deskripsi produk
- Informasi Bisnis — nama perusahaan Anda, industri, dan gambaran singkat
Untuk sebagian besar situs web bisnis kecil, mulai dengan beranda, halaman layanan/produk utama, halaman FAQ, dan halaman kontak. Itu mencakup sekitar 80% pertanyaan yang akan diajukan pengunjung. Anda selalu bisa menambahkan konten lain nanti — basis pengetahuan tidak terkunci setelah pengaturan awal.
Langkah 4: Atur keterampilan chatbot HTML
Tab Skills tab memungkinkan chatbot Anda melakukan lebih dari sekadar menjawab pertanyaan. Empat keterampilan saat ini tersedia untuk meningkatkan pengalaman pengunjung situs Anda.
Berikut gambaran singkat tentang apa yang diaktifkan masing-masing kemampuan:
| Keahlian Chatbot | Apa Fungsinya |
|---|---|
| Tombol Aksi | Biarkan pengunjung melakukan tindakan cepat langsung dari chat: buka WhatsApp, kirim email, dapatkan arahan, atau kunjungi URL. Anda menentukan kondisi pemicu dalam bahasa alami. |
| Kumpulkan Kontak | Formulir bawaan yang meminta nama, email, dan nomor telepon. Anda mengontrol kapan formulir muncul dan bidang apa saja yang termasuk. Formulir ini bisa dibuat wajib untuk melanjutkan percakapan. |
| Pesan Tindak Lanjut | Pesan otomatis dikirim setelah periode tidak aktif pengunjung. Berguna untuk menarik kunjungan kembali atau membagikan opsi kontak. |
| Hubungi Manusia | Mengarahkan pengunjung ke orang nyata melalui email, telepon, atau WhatsApp ketika chatbot tidak bisa menjawab atau pengunjung meminta bantuan manusia |
Keahlian Hubungi Manusia layak disetel meskipun Anda tidak mengharapkan lalu lintas yang tinggi. Fungsinya otomatis saat chatbot tidak bisa menjawab pertanyaan atau pengguna meminta bantuan manusia. Selain itu, perlu dicatat bahwa ini mengarahkan pengunjung ke saluran eksternal — itu tidak membawa manusia ke dalam sesi obrolan yang sama.
Langkah 5: Sesuaikan tema dan penampilan
Tab Tema mengontrol tampilan chatbot di situs Anda. Enam tema adaptif tersedia — masing-masing dibangun di sekitar satu warna aksen yang bisa Anda atur.
Klik “Sesuaikan Tema” untuk melihat lebih dalam:
- Pilih warna dan ukuran Tombol Peluncur.
- Pilih warna Header dan Footer.
- Atur Latar Belakang Obrolan dan radius sudut
- Pilih warna elemen per bagian (tombol, pesan, dll.)
- Font dari pustaka
Anda bisa menetapkan warna solid atau gradien untuk latar belakang header, menambahkan pola pada wallpaper obrolan, atau mengunggah gambar sebagai latar belakang.
Langkah 6: Atur Tampilan dan Pengaturan Perilaku
Pengaturantab menangani penempatan, visibilitas, pemicu, dan notifikasi — pada dasarnya, di mana chatbot muncul, kapan muncul, dan bagaimana ia mengumumkan dirinya.
Penempatan dan Tata Letak
Di bagian ini, Anda bisa menyesuaikan bagaimana chatbot Anda terlihat di halaman:
- Chat Mengapung (gelembung di sudut) atau Chat Tersemat (inline dalam konten Anda)
- Posisi: kiri atau kanan dengan kendali offset vertikal dan horizontal
- Pilih Ikon Balon dari perpustakaan atau unggah milik Anda sendiri
- Tampilan: terbuka secara manual atau otomatis saat halaman dimuat/setelah penundaan
Visibilitas Chat
Di sini Anda memutuskan di mana menampilkan atau menyembunyikan widget sesuai strategi Anda:
- Semua halaman situs
- Beranda saja
- Halaman spesifik yang Anda tentukan
- Mobile, desktop, atau semua perangkat
Peringatan Suara
Notifikasi suara dapat diatur untuk diputar setelah interaksi: saat pengguna membuka jendela obrolan, mengirim pesan, atau saat chatbot membalas.
Pengaturan Lainnya
- Google Analytics integrasi memungkinkan Anda melacak bagaimana pengunjung berinteraksi dengan chatbot Anda
- Notifikasi Email — seluruh transkrip percakapan akan dikirim otomatis ke kotak masuk Anda
- Bahasa & Wilayah
- Footer Text dapat digunakan untuk penafian tentang penggunaan AI, kebijakan, atau tautan kontak
- Kustom CSS dan JS dapat digunakan untuk penataan tingkat lanjut
Langkah 7: Sematkan AI Chatbot di situs HTML Anda
Terakhir, klik “Tambahkan ke Situs Web” di editor untuk menghasilkan kode pemasangan Anda — dua baris: tag <script> yang memuat platform Elfsight, dan tag <div> yang memberi tahu halaman tempat merender widget.
Buka berkas HTML halaman tempat chatbot akan muncul. Untuk chatbot mengapung, tempelkan kode di mana saja dalam bagian <body> — tepat sebelum tag penutup </body> adalah pilihan umum. Sebagai alternatif, untuk chatbot yang tertanam, tempelkan di posisi tepat pada halaman tempat Anda ingin muncul.
Pemeriksaan Cepat Pemecahan Masalah
- Chatbot tidak muncul: Verifikasi bahwa kode berada di dalam tag <body>, bukan di dalam <head>, <style>, atau <script> tags.
- Chatbot tampil di editor, tetapi tidak muncul di situs web: Beberapa widget membutuhkan koneksi internet aktif untuk dimuat. Pengujian lokal melalui protokol file:// mungkin tidak berfungsi — gunakan server lokal atau versi yang dihosting secara langsung.
- Layout rusak setelah menambahkan kode: Pastikan kode pemasangan tidak ditempelkan di dalam elemen HTML lain yang membatasi konten. Kodenya harus menjadi blok mandiri di dalam <body>.
- Chatbot memberikan jawaban salah atau kosong: Periksa tab Basis Pengetahuan. Jika Anda hanya menambahkan satu atau dua URL, chatbot memiliki sangat sedikit data untuk dipakai. Tambahkan lebih banyak halaman, berkas, atau blok teks, lalu klik “Retrain.”
Alternatif Widget: Cara Membuat AI Chatbot HTML Kustom
Widget Elfsight menangani semuanya melalui editor visual, tetapi ada alasan yang sah untuk memilih jalur berbeda — terutama jika Anda membutuhkan kendali penuh atas logika chatbot atau ingin menghubungkannya ke backend AI Anda sendiri. Berikut apa saja yang terlibat pada masing-masing pendekatan:
Opsi 1: Bangun chatbot menggunakan JavaScript dan API
Jika Anda memiliki sumber daya pengembangan, Anda bisa membangun antarmuka chatbot dari nol menggunakan HTML, CSS, dan JavaScript, lalu menghubungkannya ke API penyedia AI (seperti OpenAI, Anthropic, atau Google) untuk logika percakapan. Gambaran singkat prosesnya:
- Buat UI obrolan (wadah div, daftar pesan, kolom masukan, dan tombol kirim) menggunakan HTML dan CSS.
- Tulis JS untuk menangkap input pengguna, mengirimkannya ke endpoint API AI melalui fetch(), dan menampilkan responsnya.
- Kelola riwayat percakapan dengan mengirimkan seluruh array pesan bersama setiap permintaan API.
- Terapkan di server web Anda bersama dengan file HTML yang sudah ada.
Opsi 2: Gunakan kerangka kerja sumber terbuka
Kerangka kerja seperti Botpress, Rasa, atau Chatwoot menyediakan mesin percakapan siap pakai yang bisa Anda-host sendiri dan disematkan di situs Anda. Mereka dirancang untuk tim yang membutuhkan alur kerja kustom, integrasi, atau kontrol privasi data.
- Pasang dan konfigurasikan kerangka kerja di server Anda sendiri atau instance cloud.
- Rancang alur percakapan menggunakan pembuat visual kerangka kerja ini atau berkas konfigurasi.
- Hasilkan kode sematan atau cuplikan JavaScript yang disediakan oleh kerangka kerja.
- Tempel kode sematan ke file HTML Anda dan pasang.
Opsi 3: Tambahkan chatbot berbasis aturan dengan pustaka JS
Untuk situs web yang hanya membutuhkan chatbot pohon keputusan sederhana (bukan bertenaga AI), pustaka JavaScript ringan dapat menangani percakapan bercabang dasar sepenuhnya di peramban.
- Pilih pustaka (misalnya BotUI, simple-chatbot) dan sertakan di HTML Anda melalui tautan CDN.
- Tentukan alur percakapan Anda sebagai struktur JSON berisi pertanyaan, opsi, dan respons.
- Inisialisasi chatbot dalam blok skrip dan pasangkan ke sebuah container div.
Tips Optimasi untuk Chatbot HTML Anda
Pengaturan sudah selesai — inilah yang membedakan chatbot yang benar-benar dipakai pengunjung dari yang ditutup setelah tiga detik.
- Tuliskan pertanyaan yang disarankan berdasarkan perilaku pengunjung nyata. Ambil 3–4 pertanyaan teratas dari kotak masuk dukungan Anda, pengiriman formulir kontak, atau log pencarian situs.
- Gunakan fitur Q&A untuk pertanyaan dengan risiko tertinggi Anda. If there’s a question where the answer absolutely must be accurate (pricing, refund policy, legal compliance), add it as a Q&A pair in the knowledge base.
- Atur keterampilan Hubungi Manusia dengan ekspektasi realistis. Chatbot mengarahkan pengunjung ke saluran eksternal, jadi pastikan detail kontak yang Anda konfigurasikan dipantau secara aktif agar pengunjung tidak mengalami jalan buntu.
- Latih dengan file JSON untuk data terstruktur. Jika Anda memiliki katalog produk, tabel harga, atau perbandingan fitur, formatkan sebagai JSON sebelum diunggah. Model AI memproses JSON lebih akurat daripada teks tidak terstruktur.
- Gunakan kontrol visibilitas untuk perilaku per halaman. Jangan menampilkan chatbot berorientasi penjualan di halaman dokumentasi dukungan Anda, dan jangan menampilkan bot pemecahan masalah di beranda Anda.
Pertanyaan yang Sering Diajukan
Mengapa chatbot saya tidak muncul saat membuka file HTML di browser?
Bagaimana cara menampilkan chatbot di setiap halaman situs HTML saya?
Apakah AI Chatbot secara otomatis memperbarui saat saya mengubah konten?
Bisakah saya menggunakan chatbot di situs HTML statis?
Mengapa chatbot saya memberikan jawaban yang keliru?
Kesimpulan
Ada beberapa cara menambahkan chatbot ke situs HTML kustom: mulai dari membuatnya dari nol dengan JavaScript dan API hingga menyematkan widget tanpa kode. Dengan HTML chatbot widget, seluruh prosesnya berjalan melalui editor visual dan satu tempel kode — tanpa backend, tanpa dependensi kerangka kerja, tanpa pemeliharaan kode yang berkelanjutan.
Jika Anda belum memulai, buka editor AI Chatbot dan tambahkan beberapa halaman web pertama Anda ke Basis Pengetahuan. Setelah tersedia secara live, langkah berikutnya yang paling berdampak adalah menyempurnakan apa yang chatbot ketahui dan bagaimana ia berkomunikasi — tambahkan lebih banyak URL ke basis pengetahuan, lalu rapatkan aturan dan instruksi percakapan, dan bentuk kepribadian chatbot agar sesuai dengan suara merek Anda.
