N8N Chat UI: chatbot n8n untuk website Anda

N8N Chat UI membantu Anda membuat tampilan chatbot n8n dan memasangnya di website. Editor visual ini cocok untuk pengembang, agensi, dan pemilik situs yang sudah memiliki alur kerja aktif atau dapat menyiapkan backend sendiri.

Sebenarnya, situs ini dipakai untuk apa?

Bayangkan n8n sebagai tim yang mengerjakan tugas di belakang layar, sedangkan N8N Chat UI menjadi meja layanan yang dihubungi pengunjung. Jendela chat mengirim pesan ke webhook Anda lalu menampilkan hasil dari alur kerja.

Layanan pelanggan, pengumpulan prospek, dan pemesanan jadwal memerlukan langkah backend yang sesuai. Produk ini berdiri sendiri dan tidak berafiliasi dengan n8n; mengubah tampilan tidak otomatis membangun proses bisnis.

Menghubungkan alur kerja sampai balasan pertama

1. Siapkan alur kerja dengan Chat Trigger atau Webhook dan akses untuk mengedit website.
2. Atur desain serta bentuk tampilan, periksa pratinjau, lalu hubungkan webhook.
3. Untuk balasan biasa tanpa streaming, kembalikan HTTP 200 dan JSON valid dengan teks pada output. Tangani tanda kutip pada teks dinamis sesuai aturan JSON.
4. Masukkan kode sematan yang dihasilkan ke situs. Kirim pesan uji dan cocokkan balasan di halaman dengan eksekusi n8n.

Panduan integrasi backend juga mendukung endpoint POST khusus. Di WordPress, pasang dan aktifkan ChatUI Widget for n8n, lalu simpan Widget ID atau webhook di Settings → N8N Chat UI. Halaman tertentu dapat dikecualikan.

Tampilan sesuai merek dan kebutuhan bisnis

Sesuaikan warna, font, avatar, sapaan dan tombol pembuka melalui pratinjau langsung. Pilih jendela di dalam halaman atau popup mengambang. Tata letaknya menyesuaikan perangkat seluler dan mendukung tulisan kanan ke kiri.

Backend dapat mengirim followUpPrompts sebagai pertanyaan lanjutan yang bisa diklik. Jika beberapa widget berbagi alur kerja, rencanakan kunci sesi agar konteks tidak bercampur. Kunci sesi bukan pengganti pemeriksaan hak akses pengguna.

File, rekaman suara, dan balasan streaming

Unggahan file memiliki pengaturan jenis, ukuran dan jumlah. File diteruskan ke n8n sebagai data biner; pembacaan dokumen, penyimpanan dan analisis perlu langkah tersendiri.

Input suara mengirim rekaman. Contoh resmi memakai layanan transkripsi terpisah sebelum teks diteruskan ke agen. Untuk file dan audio, metadata dikirim sebagai string JSON dan harus diurai sebelum digunakan sebagai objek.

Balasan streaming memerlukan pengaktifan pada input Chat Trigger/Webhook sekaligus output AI Agent. Widget mengenali aliran yang sudah disiapkan, bukan membuat konfigurasi backend tersebut.

Uji coba gratis dan pilihan biaya

Diperiksa pada 28 Oktober 2026: akun baru mendapat 100 kredit Managed yang berlaku 30 hari. Setelahnya, kredit dibeli di muka; setiap pesan yang diproses proxy menggunakan satu kredit. Pemrosesan pesan baru berhenti saat saldo habis. Kredit berbayar yang dibeli sejak 5 Oktober 2026 tidak kedaluwarsa menurut ketentuan saat ini; pembelian lama mengikuti syarat awal.

Standalone memerlukan lisensi sekali bayar dan tidak memakai kredit pesan Managed. Untuk pembeli baru, pisahkan lisensi inti permanen dari periode dukungan dan pembaruan opsional. Periksa harga terbaru, mata uang dan pajak saat pembayaran. Hosting n8n, model dan transkripsi memiliki biaya sendiri.

Alur data dan batas penggunaan

Standalone menghubungkan browser langsung ke webhook sehingga alamatnya terlihat dalam kode klien. Managed memakai proxy penyedia untuk menyembunyikan alamat tersebut, dengan pembatasan domain, wilayah, laju permintaan, analitik dan pengaturan terpusat.

Kebijakan privasi menyatakan penyedia tidak menyimpan, membuat cache atau mencatat isi percakapan. Proxy tetap memproses pesan secara langsung dan menyimpan konfigurasi serta metrik teknis. Kebijakan n8n Anda, database dan penyedia model harus diperiksa terpisah sebelum mengirim data sensitif.

Pertanyaan umum

Bisa dipasang di website yang sudah ada?

Bisa, melalui kode sematan atau plugin WordPress resmi. Anda memerlukan izin mengedit situs dan backend yang berfungsi.

Apakah layanan ini membuat alur kerja n8n juga?

Tidak. Model, sumber data dan tindakan tetap perlu diatur di n8n atau backend yang kompatibel.

Apakah bisa dipakai gratis tanpa batas?

100 kredit awal berlaku selama 30 hari. Selanjutnya perlu kredit Managed atau lisensi Standalone, ditambah layanan backend.

Panduan resmi

• Dokumentasi produk: pengaturan dan pengelolaan sesi.
• Panduan WordPress: pemasangan dan pengecualian halaman.
• Panduan MCP: OAuth atau kunci API untuk melihat daftar, membuat dan menyesuaikan widget; perubahan tema tidak mengubah webhook.
• Dukungan resmi: akun dan integrasi.