Situs web

Ada tiga cara menghadirkan Agen AI Quickchat di web. Pilih yang sesuai dengan tampilan yang Anda inginkan:

• Widget: gelembung percakapan mengambang di sudut situs. Paling sesuai untuk dukungan umum.
• Embed: jendela percakapan di dalam halaman, tepat di posisi yang Anda inginkan. Paling sesuai untuk menempatkan AI dalam layar aplikasi tertentu, halaman pusat bantuan, atau halaman detail produk.
• Chat Page: pengalaman percakapan layar penuh yang dihosting Quickchat, tanpa pemasangan atau kode. Paling sesuai saat ingin membagikan tautan, misalnya melalui email dukungan, Slack internal, atau kepada penguji beta, tanpa mengubah peramban mereka.

Pasang tampilan pilihan Anda dari Channels → Your Website → Install. Halaman ini memiliki tiga subtab: Install untuk memilih cara menambahkan Agen AI, Appearance untuk gaya visual, dan Text Content untuk teks serta label yang dilihat pengunjung. Tab Install dibuka dengan pilihan metode, menempatkan ketersediaan dan kontrol akses dalam bagian tersendiri, serta menampilkan Scenario ID yang dapat disalin untuk plugin dan API.

Alat penyiapan opsional

• Bandingkan metode penerapan. Cocokkan kanal, akses situs web, dan fitur yang Anda nyatakan perlu dengan opsi penyiapan Quickchat AI. Alat ini tidak memeriksa situs web atau akun Anda.

• Bandingkan HTML dan Markdown halaman contoh. Ambil konten HTML awal, Markdown, dan tautan alat dari contoh Quickchat AI yang tetap. Alat ini tidak merender JavaScript atau memeriksa situs web sembarang.

Widget

Widget memungkinkan Anda menyematkan Agen AI Quickchat langsung di situs web, sehingga pengguna dapat berinteraksi dengan AI dengan mudah. Widget biasanya tampil sebagai gelembung percakapan di sudut kanan bawah halaman. Saat diklik, gelembung membuka jendela percakapan agar pengguna dapat bertanya, meminta bantuan, atau mengakses informasi.

Cara menambahkan Widget ke situs web

Buka Channels → Your Website → Install. Tab dimulai dengan “How do you want to add your AI Agent?” dan mencantumkan metode pemasangan dari yang paling mudah. Pilih yang sesuai dengan situs:

• WordPress: pasang plugin Quickchat AI Agent gratis kami, tempel Scenario ID, dan Widget muncul otomatis tanpa mengedit kode tema.
• Shopify: tambahkan Widget melalui Theme Editor toko. Lihat panduan Shopify.
• Webflow, Wix & others: salin satu cuplikan dan tempel ke pengaturan kode khusus seluruh situs pada pembuat situs, diterapkan ke semua halaman. Jangan gunakan elemen Embed atau HTML pada satu halaman. Lihat Pembuat situs.
• Share a link instead: tidak perlu memasang apa pun; bagikan tautan Chat Page yang dihosting.
• Install manually with code: salin cuplikan Widget atau Embed mentah dan tempel sendiri ke HTML.

Setiap metode membuka panel langkah demi langkah yang terfokus, hanya dengan kode atau ID yang diperlukan.

Scenario ID berada di bagian atas tab Install sebagai kolom yang dapat disalin. Inilah pengenal yang diperlukan plugin dan API, jadi salin dari sini ketika langkah penyiapan memintanya.

Memasang secara manual dengan kode

Jika mengelola HTML sendiri, buka Install manually with code pada tab Install, lalu:

1. Salin cuplikan Widget.
2. Buka berkas HTML halaman. Pada pembuat situs, gunakan pengaturan kode seluruh situs, seperti dijelaskan di Pembuat situs.
3. Tempel cuplikan tepat sebelum tag penutup </body> pada setiap halaman tempat Widget harus tampil.

Periksa cuplikan Widget terhadap Scenario ID yang Anda berikan. Pemeriksaan membaca kode yang ditempel, bukan mengambil situs web Anda.

Pembuat situs

Pada Webflow, Wix, Squarespace, Hostinger, dan pembuat serupa, tambahkan Widget sekali melalui pengaturan kode seluruh situs:

1. Buka pengaturan yang menambahkan kode ke setiap halaman. Nama yang digunakan pembuat situs antara lain Custom code, Code injection, Footer code, atau Body end.
2. Tempel cuplikan Widget di sana dan terapkan ke semua halaman. Jika dapat memilih lokasi kode, pilih footer atau akhir body. Cuplikan tidak berfungsi di head.
3. Publikasikan situs. Gelembung percakapan akan muncul di setiap halaman.

Perhatian

Jangan menambahkan Widget menggunakan elemen Embed atau HTML pada halaman. Banyak pembuat situs menampilkan elemen tersebut dalam bingkai kecil terpisah, sehingga Widget tidak dapat terbuka di sana. Sekalipun termuat, Widget hanya akan muncul di satu halaman itu.

Lokasi pengaturan seluruh situs:

Pembuat situs	Pengaturan kode seluruh situs
Webflow	Site settings → Custom code → Footer code
Wix	Settings → Custom Code, lalu All pages dan Body - end. Memerlukan domain yang terhubung.
Squarespace	Custom Code → Code Injection → Footer. Paket Core, Plus, Advanced, dan beberapa paket lama.
Hostinger Website Builder	More (⋯) → Integrations → Custom code. Skrip otomatis dimuat di akhir halaman.

Menu dapat berubah dan mungkin diterjemahkan mengikuti bahasa pembuat situs. Jika pembuat situs atau paket tidak memiliki pengaturan kode seluruh situs, bagikan tautan Chat Page.

Perlu bantuan?

Bukan pengembang? Tab Install memiliki dua pintasan di bagian Need a hand?:

• Ask AI for help: membuka asisten dalam aplikasi dengan pertanyaan tentang menambahkan Agen ke situs yang sudah diisi.
• Email instructions to a developer: mengirim semua kebutuhan kepada rekan tim, yaitu cuplikan Widget, Scenario ID, dan tautan panduan ini, agar mereka dapat memasangnya untuk Anda.

Untuk bantuan lebih lanjut, hubungi contact@quickchat.ai.

Chat Page

Chat Page adalah versi layar penuh Agen AI yang dihosting pada URL Quickchat. Tidak ada yang perlu dipasang. Bagikan tautan dan pengunjung dapat langsung mengobrol dengan Agen melalui peramban. Gunakan saat:

• Anda ingin pengalaman percakapan tetapi tidak memiliki situs web, atau tidak ingin mengubah kodenya.
• Anda membagikan AI secara internal kepada kelompok kecil, seperti penguji beta, tim dukungan, atau prospek penjualan, dan memerlukan tautan dengan kontrol akses alih-alih widget publik.
• Anda ingin mengirim AI sebagai kanal tindak lanjut melalui email, Slack, atau CRM.

Atur siapa yang dapat membuka Chat Page dari Install → Chat Page Access. Lihat Kontrol akses di bawah.

Memulai percakapan baru

Untuk mengatur ulang percakapan dan memulai dari awal:

• Widget atau Embed: Buka percakapan dan klik tombol pena di dalam kotak di sudut kanan atas jendela percakapan.
• Chat Page: Pilih New chat di bilah sisi, atau gunakan tombol pena di dalam kotak pada header.

Ini memulai percakapan baru dengan Agen AI. Percakapan sebelumnya tetap ada di Inbox. Menutup lalu membuka Widget atau menyegarkan halaman dapat melanjutkan percakapan yang ada. Meminta AI untuk “mengatur ulang” atau “menghapus percakapan” tidak memulai percakapan baru. Anda tidak perlu menghapus cookie peramban.

Kontrol akses

Tab Install menempatkan kontrol akses dalam bagian Availability and access yang dapat dibuka-tutup. Buka untuk menemukan dua kontrol yang berlaku pada penerapan Anda:

Akses Widget dan Embed

Sakelar ini berada di bagian atas Availability and access. Saat aktif, skrip Widget dan Embed bekerja normal di peramban pengunjung. Saat nonaktif, keduanya tidak tersedia di situs meskipun skrip masih terpasang. Berguna untuk menonaktifkan AI sementara tanpa menghapus cuplikan, atau membatasi akses publik sambil tetap membuka Chat Page bagi pengguna undangan.

Chat Page Access

Terpisah dari sakelar Widget dan Embed, Anda dapat membatasi siapa yang dapat membuka Chat Page:

• Anyone: URL Chat Page bersifat publik. Siapa pun yang memiliki tautan dapat menggunakannya.
• Invited users only: hanya Chat Users yang Anda undang melalui email dapat menggunakan Chat Page. Mereka perlu mengautentikasi diri.
• Nobody: Chat Page dinonaktifkan sepenuhnya.

Tautan Invite Chat Users membuka Settings → Organization → Team Members. Formulir undangan saat ini menawarkan peran tim dengan izin dasbor; tidak menyediakan peran khusus percakapan atau bagian Chat Users terpisah. Tinjau Anggota tim dan peran sebelum mengundang seseorang.

Penyesuaian

Subtab Appearance dan Text Content memungkinkan Anda menyesuaikan tampilan Widget, Embed, dan Chat Page serta teks yang dilihat pengunjung. Ketiga tampilan berbagi pengaturan ini. Ubah sekali dan pengaturan berlaku di semua tempat Agen diterapkan.

Panel kanan tab Install/Appearance/Text Content memiliki kontrol pratinjau sendiri. Beralihlah antara pratinjau Widget, Embed, dan Chat Page, serta ukuran layar Desktop dan Mobile, untuk melihat perubahan sebelum dipublikasikan.

Appearance

Pengaturan visual tampilan percakapan dikelompokkan ke Branding, Size & Position, Theme, dan Other Settings.

Branding

• AI Agent Avatar: foto profil atau logo Agen berupa satu gambar yang digunakan pada header percakapan dan tombol peluncur, maksimum 5 MB. Ini satu pengaturan, bukan dua: unggah satu gambar dan tampil di kedua tempat, menggantikan pengaturan “header logo” dan “launcher icon” lama yang terpisah. Setiap Agen memiliki avatar bawaan. Reset to default mengembalikannya, sedangkan menghapusnya membuat avatar tidak tampil sama sekali. Tersedia pada semua paket, termasuk Free.

AI Agent Avatar berlaku untuk Widget, Embed, dan Chat Page, tetapi tidak untuk Discord, karena avatar bot berasal dari aplikasi Discord-nya. Lihat Discord.

Size & Position

• Launcher size: Classic, Input Only, atau Small. Mengatur tampilan peluncur sebelum percakapan dibuka.
• Menutup peluncur: peluncur Classic memiliki tombol tutup kecil di sudut kanan atas, terlihat saat penunjuk diarahkan pada desktop dan selalu terlihat pada perangkat sentuh. Tombol menyembunyikan widget hanya untuk tampilan halaman saat ini; peluncur kembali saat halaman dimuat berikutnya. Ukuran peluncur lainnya tidak memiliki tombol tutup.
• Launcher label: hanya muncul jika Small dipilih. Teks khusus pada tombol peluncur kecil, hingga 25 karakter, misalnya “Ask AI” atau “Chat”. Kosongkan untuk peluncur yang hanya berisi ikon.
• Widget position: kiri bawah, tengah bawah, atau kanan bawah.
• Dimensi jendela percakapan: lebar 300–700px dan tinggi 400–1200px.
• Draggable launcher: memungkinkan pengunjung menyeret peluncur ke posisi lain pada halaman. Berguna saat peluncur menutupi konten penting.

Theme

Pilih pewarnaan tampilan percakapan:

• Light dan Dark adalah preset tetap yang tampil sama pada semua akun.
• Custom membuka palet warna lengkap milik Anda. Saat dipilih, kontrol warna muncul untuk latar belakang, header dan teks header, aksen yang dipakai tombol mulai sebelum percakapan, chip saran, dan tindakan penilaian, gelembung pesan dan teksnya, teks pesan AI, warna tautan, kolom input, bingkai, dan lainnya. Kontras setiap warna diperiksa terhadap latar belakangnya menurut WCAG AA, dan Anda diperingatkan jika kombinasinya sulit dibaca.

Warna header dan aksen merek berada dalam tema Custom. Light dan Dark tetap menjadi preset netral, sehingga beralih di antara keduanya tidak membawa warna khusus.

Pada Transparency, pengaturan Background menentukan tingkat tembus pandang jendela percakapan. Pengaturan ini bekerja pada semua mode tema, dengan warna lapisan ditentukan tema:

• Solid: jendela percakapan memiliki latar belakang padat. Ini pilihan bawaan.
• Glass: jendela menjadi tembus pandang dan situs di belakangnya diburamkan seperti kaca buram. Lapisan berwarna putih pada Light, gelap pada Dark, dan mengikuti warna latar pada Custom. Dalam Custom, header yang warnanya berbeda dari latar tetap mempertahankan warnanya agar identitas merek terlihat. Glass opacity mengatur seberapa kuat lapisan warna menutupi halaman, mulai dari tingkat terendah yang menjaga teks terbaca di atas situs apa pun, yaitu 50% pada Light, 65% pada Dark, dan bergantung pada warna pada Custom, hingga 95%. Jika tidak ada tingkat opasitas yang membuat teks terbaca dengan warna Custom, widget menggunakan latar padat dan pengaturan menjelaskan alasannya. Glass tetap dipilih dan kembali berlaku setelah warna teks atau latar disesuaikan agar kontras mencukupi.

Transparansi berlaku untuk Widget, termasuk pada ponsel, dan Embed. Chat Page layar penuh selalu memiliki latar padat. Pengunjung yang mengaktifkan “Reduce transparency” pada perangkat melihat gaya Solid di Chrome dan Edge, peramban yang meneruskan pengaturan ini ke situs. Pada peramban yang tidak dapat memburamkan halaman, Glass tetap hampir padat agar teks terbaca.

Saat Custom dipilih, Chat Page juga memiliki warna bilah sisi sendiri: Sidebar background, Sidebar text, Sidebar hover, dan Sidebar hover text. Ini hanya berlaku pada Chat Page layar penuh, bukan gelembung Widget atau Embed. Biarkan warna teks tidak diatur dan Chat Page otomatis memilih warna yang terbaca pada latar pilihan Anda.

Anda juga dapat mengatur radius sudut, yaitu kebulatan gelembung, kolom input, dan tombol, serta ukuran teks. Keduanya berlaku pada setiap mode tema.

Other Settings

• Voice Input: memungkinkan pengunjung merekam pesan suara dengan mikrofon di kotak percakapan. Rekaman ditranskripsikan ke kolom input agar dapat diedit sebelum dikirim. Rekaman berhenti otomatis setelah dua menit. Tersedia pada paket berbayar.
• File Attachments: memungkinkan pengunjung melampirkan gambar atau dokumen ke pesan. Aktif secara bawaan; nonaktifkan untuk menghapus tombol lampiran dari kotak percakapan.
• Auto-open Widget: otomatis membuka Widget saat halaman dimuat.
• Hide Quickchat AI Branding: menyembunyikan footer “Powered by Quickchat AI” untuk pengalaman sepenuhnya bermerek Anda, tersedia pada paket yang mencakup white-labeling.

Agar pengunjung dapat menilai percakapan, buka Conversations → Insights → Conversation Rating. Pengaturan dan hasilnya berada di tab itu; lihat Penilaian percakapan.

Text Content

Buka Channels → Your Website → Text Content untuk mengedit sapaan dan teks lain yang dilihat pengunjung:

• Header text: teks di bagian atas jendela percakapan.
• Welcome message: pesan pertama Agen AI pada awal setiap percakapan, misalnya “Hai, perlu bantuan?”.
• Show as a pop-up: sakelar yang menampilkan sapaan sebagai gelembung ucapan mengambang di samping peluncur, yang kadang disebut “teaser” atau “launcher message”, untuk menarik perhatian sebelum pengunjung mengeklik. Gelembung menampilkan teks Welcome message itu sendiri, jadi edit kolom tersebut untuk mengubah isinya.
• Conversation starters: hingga 3 contoh pesan yang ditampilkan sebelum pengunjung mulai mengetik. Mengeklik salah satunya mengirimkannya sebagai pesan pertama. Berguna untuk mengarahkan pengunjung ke keunggulan AI, misalnya “Bagaimana cara memasang widget?” atau “Integrasi apa yang didukung?”.
• Input placeholder: teks petunjuk pada kolom pesan kosong.
• Disclaimer text: teks yang ditampilkan di belakang percakapan, biasanya untuk memberi tahu bahwa pengguna berbicara dengan AI. Kami menyarankan agar tetap jelas dan terlihat.

Bagian Pre-chat Screen berada di bawah kolom-kolom tersebut pada tab Text Content yang sama. Aktifkan di sana dan edit teks header, tombol, serta pesannya.

Bahasa dan terjemahan

Secara bawaan, Text Content ditampilkan kepada semua pengunjung persis seperti yang Anda ketik. Pada paket berbayar, Anda dapat menambahkan terjemahan per bahasa agar pengunjung melihat widget dalam bahasa mereka.

1. Buka subtab Text Content dan klik Translate di Other languages. Panel Translate widget text terbuka, dengan teks utama di samping setiap terjemahan sebagai Default (source).
2. Klik Add language dan pilih bahasa. Quickchat AI menghasilkan terjemahan teks saat ini. Tinjau dan edit kolom untuk bahasa tersebut, yaitu header, sapaan, pembuka percakapan, placeholder input, layar sebelum percakapan, dan penafian. Perubahan disimpan otomatis.
3. Kolom yang dibiarkan kosong menggunakan teks bawaan, sehingga Anda hanya perlu menerjemahkan yang ingin diubah. Jika penerjemahan otomatis gagal, Anda tetap dapat memasukkan teks sendiri.

Jumlah bahasa yang dapat ditambahkan bergantung pada paket.

Cara bahasa pengunjung dipilih

Untuk Widget dan Embed, Quickchat memilih bahasa dengan urutan berikut:

1. Penggantian eksplisit yang Anda atur pada pemuat: _quickchat("language", "de"), dipanggil sebelum _quickchat("init", ...).
2. Atribut <html lang> halaman, misalnya <html lang="de"> menyajikan terjemahan Jerman. Ini cara yang disarankan: atur lang dengan benar pada setiap halaman lokal dan widget mengikutinya otomatis.
3. Bahasa peramban pengunjung, lalu teks Default jika tidak ada yang cocok.

Catatan

Jika bahasa pengunjung tidak memiliki terjemahan, mereka selalu melihat teks Default. Tidak ada bagian yang dibiarkan kosong.

Fitur lanjutan: parameter khusus

Widget dan Embed Quickchat AI memungkinkan Anda meneruskan parameter khusus saat inisialisasi. Parameter dapat digunakan untuk:

• meningkatkan analitik, karena tersedia dalam ekspor CSV pada platform Quickchat
• memasok nilai bagi API Actions dan, bila diizinkan, mempersonalisasi jawaban. AI menerima subset terfilter, bukan semua parameter; lihat Konteks model dan otorisasi

Contoh parameter khusus yang berguna:

• visitor_name: Mike
• customer_tier: VIP
• order_id: ord_123

visitor_name adalah kunci kontak yang dikenali. Kunci khusus seperti customer_tier dapat disimpan dan digunakan dalam Actions, tetapi mengirimkannya saja tidak menjamin AI akan menggunakannya dalam jawaban. Perlakukan nilai dari peramban sebagai masukan yang belum diverifikasi, bukan izin mengakses akun pelanggan.

Untuk menambahkan parameter seperti di atas, sertakan bagian berikut dalam skrip yang Anda temukan di Your Website > Install.

Widget dan Embed menggunakan bentuk pemanggilan yang sama:

_quickchat("custom_params", {
  "visitor_name": "Mike",
  "customer_tier": "VIP",
  "order_id": "ord_123",
});

Atribut ini diberikan pada setiap percakapan baru; sebaiknya batasi pada beberapa kunci saja.

Tips

Parameter khusus dengan nama snake_case, misalnya order_id dan customer_tier, dapat dimasukkan langsung ke API Actions sebagai {{metadata_order_id}}, {{metadata_customer_tier}}, dan sebagainya. Lihat Variabel AI Action untuk detailnya.

Contoh skrip:

widget

<script>
  (function(e,a,d,i,c,t=a.createElement(d)){e[c]=e[c]||function(){(e[c].q=e[c].q||[]).push(arguments)},t.src=i,t.async=1,a.body.insertAdjacentElement("beforeend",t)})(window,document,"script","https://bubble.quickchat.ai/chat.js","_quickchat");
  _quickchat("custom_params", {"visitor_name": "Mike", "customer_tier": "VIP", "order_id": "ord_123"});
  _quickchat("init", "abcdefghij");
</script>

Embed

<div id="quickchat-embedded" style="height:600px;overflow:hidden;"></div>
<script>
  (function(e,a,d,i,c,t=a.createElement(d)){e[c]=e[c]||function(){(e[c].q=e[c].q||[]).push(arguments)},t.src=i,t.async=1,a.body.insertAdjacentElement("beforeend",t)})(window,document,"script","https://bubble.quickchat.ai/chat.js","_quickchat");
  _quickchat("containerId", "quickchat-embedded");
  _quickchat("custom_params", {"visitor_name": "Mike", "customer_tier": "VIP", "order_id": "ord_123"});
  _quickchat("init", "abcdefghij");
</script>

Embed

Embed memungkinkan Anda menempatkan Agen AI Quickchat langsung di dalam halaman sebagai jendela percakapan, alih-alih gelembung mengambang. Gunakan saat percakapan harus berada di posisi tertentu, seperti kolom pusat bantuan, halaman kontak, atau bilah sisi aplikasi.

Cara menambahkan Embed

1. Dapatkan kode Embed

   • Masuk ke Quickchat AI App.
   • Buka Channels → Your Website di bilah sisi kiri.
   • Klik tab Install, lalu buka Install manually with code.
   • Salin cuplikan Embed, yang mencakup wadah <div id="quickchat-embedded"> dan skrip pemuat.

2. Buka berkas HTML situs atau halaman pada pembuat situs.

3. Tempel kode

   • Masukkan cuplikan Embed ke dalam <body> halaman.
   • Tempatkan tepat di lokasi jendela percakapan harus muncul. <div> mengendalikan ukuran; sesuaikan style="height:600px" agar cocok dengan ruang dalam tata letak.
   • Pada pembuat situs, tambahkan elemen kode atau HTML di lokasi jendela percakapan, lalu tempel cuplikan ke dalamnya.

Catatan

Embed hanya berfungsi jika pembuat situs memasukkan kode langsung ke halaman. Beberapa pembuat, seperti Wix, menampilkan elemen HTML dalam bingkai terpisah, dan Embed tidak dapat dimuat di dalam bingkai. Jika jendela percakapan tidak muncul pada halaman yang diterbitkan, tambahkan Widget melalui pengaturan kode seluruh situs, atau bagikan tautan Chat Page.