Chat di Situs Web

1. Buat perangkat Situs web

Buka halaman Perangkat, pilih Tambah Perangkat, lalu pilih saluran Situs web. Perangkat ini tidak memerlukan nomor telepon dan tidak perlu dipindai QR.

2. Salin potongan kode

Pada perangkat tersebut, klik Sambungkan. Salin potongan kode berikut dan tempel tepat sebelum tag penutup </body> di setiap halaman yang ingin menampilkan obrolan.

<script src="https://qwikchat.app/public/widget.js"
        data-qwikchat="wk_xxxxxxxxxxxxxxxxxxxx" async></script>

Ganti nilai data-qwikchat dengan kunci milik perangkat Anda. Kunci ini bersifat publik — aman terlihat di kode sumber halaman, dan hanya bisa dipakai untuk membuka percakapan. Kunci ini berbeda dari API key perangkat, yang harus tetap dirahasiakan.

3. Daftarkan alamat situs Anda

Pada panel yang sama, isi Alamat situs yang diizinkan — satu alamat per baris, misalnya https://tokoanda.com. Obrolan hanya akan tampil di alamat yang terdaftar di sini.

Pilihan tambahan

Potongan kode menerima dua atribut opsional: data-label untuk mengubah teks tombol dan judul jendela, dan data-accent untuk warna tombol dalam format heksadesimal.

<script src="https://qwikchat.app/public/widget.js"
        data-qwikchat="wk_xxxxxxxxxxxxxxxxxxxx"
        data-label="Chat dengan kami"
        data-accent="#0071E3" async></script>

Jika situs Anda punya bilah melayang di bawah

Tombol obrolan mengambang di pojok kanan bawah dan selalu berada paling atas, sehingga ia bisa menutupi bilah melayang milik situs Anda — misalnya bilah "Beli sekarang" atau pemberitahuan cookie. Tombol tersebut memberitahukan lebarnya sendiri lewat variabel CSS --qc-launcher-width, jadi sisakan ruang untuknya:

.bilah-melayang-saya {
  padding-right: var(--qc-launcher-width, 0px);
}

Nilainya sudah termasuk jarak dari tepi layar dan diukur langsung dari tombol, sehingga tetap tepat meski tombol memakai label atau logo. Jika obrolan tidak dipasang di halaman itu, nilainya kosong dan 0px dipakai — aturan di atas aman ditulis di semua halaman. Tersedia juga --qc-launcher-height bila Anda ingin memberi jarak ke atas, bukan ke samping.

Yang perlu diketahui

Obrolan berjalan di dalam <iframe>, sehingga tampilan situs Anda tidak akan berubah dan gaya situs Anda tidak memengaruhi tampilan obrolan. Di layar kecil, jendela obrolan otomatis menjadi satu layar penuh.

Percakapan dari situs web muncul di Kotak Masuk bersama percakapan WhatsApp dan Telegram, dan bisa diambil alih oleh tim Anda kapan saja seperti percakapan lainnya.

Jika Anda mengganti kunci lewat tombol Ganti kunci, semua percakapan yang sedang berjalan akan terputus dan potongan kode di situs Anda harus diperbarui.