Copy page

Pengembang

SDK Widget Web Chat

Integrasikan widget web chat Qwetty ke situs web Anda untuk komunikasi pelanggan secara real-time.

Instalasi

Tambahkan script widget ke situs web Anda:

Code
<script src="https://app.qwetty.com/webchat/widget.js"
  data-channel-id="YOUR_CHANNEL_ID">
</script>

Opsi konfigurasi

Berikan konfigurasi melalui atribut data- pada tag script:

Atribut	Deskripsi	Default
data-channel-id	ID channel web chat Anda (wajib)	—
data-position	Posisi widget: left atau right	right
data-color	Warna utama (hex)	#0066ff
data-title	Judul jendela chat	"Chat with us"

Cara kerja

1. Widget dimuat dan menampilkan tombol chat di halaman Anda
2. Ketika pengunjung mengklik, jendela chat terbuka
3. Jika "require form before chat" diaktifkan, pengunjung mengisi detail mereka terlebih dahulu
4. Sesi chat tamu dibuat di backend Qwetty
5. Pesan dipertukarkan secara real-time melalui WebSocket
6. Tim Anda melihat percakapan di inbox Qwetty

Sesi tamu

Pengunjung web chat tidak perlu login. Setiap pengunjung mendapat sesi tamu yang terikat ke channel. Jika pengunjung memberikan nama atau email mereka (melalui formulir pra-chat), kontak dibuat di direktori Anda.

Contoh framework

React

Code
import { useEffect } from 'react';

function QwettyChat({ channelId }) {
  useEffect(() => {
    const script = document.createElement('script');
    script.src = 'https://app.qwetty.com/webchat/widget.js';
    script.dataset.channelId = channelId;
    document.body.appendChild(script);
    return () => document.body.removeChild(script);
  }, [channelId]);

  return null;
}

Next.js

Code
import Script from 'next/script';

export default function Layout({ children }) {
  return (
    <>
      {children}
      <Script
        src="https://app.qwetty.com/webchat/widget.js"
        data-channel-id="YOUR_CHANNEL_ID"
        strategy="lazyOnload"
      />
    </>
  );
}

Langkah selanjutnya

• Widget Web Chat — Penyiapan channel dan konfigurasi desain
• Konfigurasi Channel — Pengaturan widget lanjutan