Live chat

Pasang widget chat di website Anda. Pengunjung menulis di widget itu, dan pesannya masuk ke inbox bersama di samping channel Anda yang lain.

Sebelum mulai

• Website yang bisa Anda tambahi satu baris kode sebelum tag penutup </body>, atau orang yang bisa melakukannya.
• Paket yang menyertakan live chat (paket Full).

Buat channel

1. Di KonekSip buka Platform → Live chat, tekan Tambah Channel, ketik nama (hanya tim Anda yang melihatnya), lalu tekan Kirim. Kemudian buka kartu baru dengan Detail.
2. Atur judul dan sapaan yang dilihat pengunjung, lalu pilih warna.
3. Di Website yang diizinkan tulis domain yang boleh menampilkan widget, satu per baris (subdomain ikut diizinkan). Kosongkan untuk mengizinkan semua website.
4. Centang Minta nama dan email sebelum pesan pertama jika Anda ingin tahu siapa yang menulis. Pastikan Tampilkan widget di website saya tercentang, lalu tekan Simpan.

Pasang di website Anda

Salin kode di bagian atas halaman channel dan tempel sebelum tag penutup </body> di halaman Anda. Bentuknya seperti ini:

<script async
  src="https://…/webchat/widget.js"
  data-key="…"></script>

Buka website Anda. Tombol bulat muncul di kanan bawah. Kirim pesan darinya: chat muncul di Inbox, dan balasan Anda langsung tampil di widget.

Aplikasi satu halaman dan kebijakan keamanan

Pasang kode sekali, di halaman atau layout yang selalu dimuat. Widget dimuat di setiap halaman yang memuat kode itu, dan chat seorang pengunjung berlanjut dari halaman ke halaman.

Jika situs Anda mengirim Content-Security-Policy, izinkan alamat server chat (host pada kode di atas) untuk skrip dan koneksi, termasuk WebSocket, dan izinkan gaya inline, karena widget menggambar dirinya dengan elemen style:

Content-Security-Policy:
  script-src 'self' https://chat.example.com;
  connect-src 'self' https://chat.example.com wss://chat.example.com;
  style-src 'self' 'unsafe-inline'

Aplikasi mobile

Tidak ada SDK yang perlu dipasang. Buka halaman chat di WebView aplikasi Android, iOS, Flutter, atau React Native Anda:

https://<gateway>/webchat/embed?key=<site key>&app=<app id>

Halaman channel menampilkan alamat ini dengan site key Anda yang sudah terisi. Isi app dengan ID aplikasi Anda (application id di Android, bundle id di iOS). Agar hanya aplikasi Anda yang bisa chat, daftarkan ID itu di Aplikasi yang diizinkan pada halaman channel; setelah Anda mendaftarkan website atau aplikasi, hanya yang terdaftar yang bisa chat.

Parameter opsional: name, email, dan sig jika aplikasi Anda sudah mengenal penggunanya (form dilewati, lihat Pengguna yang sudah login), lang (id atau en), dan close=1 untuk menampilkan tombol tutup.

React Native (react-native-webview)

import { WebView } from 'react-native-webview';

<WebView
  source={{ uri: 'https://…/webchat/embed?key=…&app=com.example.shop' }}
  javaScriptEnabled
  domStorageEnabled
  onMessage={(e) => {
    const m = JSON.parse(e.nativeEvent.data);
    if (m.type === 'close') navigation.goBack();
  }}
/>

Flutter (webview_flutter)

final controller = WebViewController()
  ..setJavaScriptMode(JavaScriptMode.unrestricted)
  ..addJavaScriptChannel('KonekSip', onMessageReceived: (m) {
    // m.message is the JSON text
  })
  ..loadRequest(Uri.parse('https://…/webchat/embed?key=…&app=com.example.shop'));

Android (Kotlin)

webView.settings.javaScriptEnabled = true
webView.settings.domStorageEnabled = true
webView.addJavascriptInterface(object {
    @JavascriptInterface fun postMessage(json: String) { /* handle */ }
}, "KonekSip")
webView.loadUrl("https://…/webchat/embed?key=…&app=com.example.shop")

iOS (Swift)

let config = WKWebViewConfiguration()
config.userContentController.add(self, name: "KonekSip") // WKScriptMessageHandler, message.body is the JSON text
let web = WKWebView(frame: .zero, configuration: config)
web.load(URLRequest(url: URL(string: "https://…/webchat/embed?key=…&app=com.example.shop")!))

Aktifkan JavaScript dan penyimpanan DOM di WebView. Tanpa penyimpanan, chat melupakan pengunjung setiap aplikasi dibuka.

Halaman memberi tahu aplikasi Anda lewat pesan JSON, {"source":"koneksip","type":"..."}: ready (chat sudah dimuat, dengan ID visitor), unread dengan count (balasan yang masuk saat halaman tidak terlihat), close (tombol tutup ditekan), dan refused (aplikasi ini tidak diizinkan, atau channel dimatikan). Jam mengikuti zona waktu ponsel.

Buka layar yang memuat chat di aplikasi Anda dan kirim pesan: pesan muncul di Kotak Masuk. Aplikasi Android butuh izin INTERNET, yang sudah dimiliki aplikasi yang memakai jaringan.

Notifikasi push

Balasan hanya terlihat saat halaman chat terbuka. Untuk menjangkau ponsel yang terkunci atau aplikasi yang tertutup, kirim notifikasi dari backend Anda sendiri dengan penyedia push yang sudah Anda pakai (Firebase, OneSignal, APNs). KonekSip tidak menyimpan kunci push Anda.

1. Pesan ready membawa ID pengunjung: {"type":"ready","visitor":"..."}. Simpan ID itu, bersama token push perangkat, di backend Anda.
2. Di channel, buka Webhook & API dan isi dengan alamat backend Anda.
3. KonekSip mengirim event message.sent untuk setiap balasan. Jika visitor_online bernilai false, cari token push pengunjung di to lalu kirim notifikasinya.

{
  "type": "message.sent",
  "data": {
    "to": "3f9c2a6e8b1d4570a9e2c4f6",
    "message": "Hi! Yes, it is still available.",
    "visitor_online": false
  }
}

Pengguna yang sudah login

Jika pengguna sudah login di website atau aplikasi Anda, jangan minta nama dan email lagi: kirim keduanya ke chat dan form dilewati.

Tandatangani email agar KonekSip mempercayainya. Siapa pun bisa membuka chat dengan site key Anda dan mengetik alamat apa saja, jadi email yang tidak ditandatangani tidak pernah bergabung ke customer yang sudah ada; ia mendapat customer sendiri. Buat tanda tangan di server Anda sendiri dengan rahasia yang tampil di halaman channel (HMAC SHA-256 dari email huruf kecil, dalam heksadesimal), dan jangan menaruh rahasia di halaman atau aplikasi, hanya tanda tangannya:

PHP

$signature = hash_hmac('sha256', strtolower($email), $secret);

Node.js

const signature = crypto.createHmac('sha256', secret).update(email.toLowerCase()).digest('hex');

Periksa kode Anda dengan contoh ini: dengan rahasia my-secret dan email [email protected], tanda tangannya harus 3b97ef0298fdb02344b45a8faa68e8410adee057b1b2f5a1833cce5ff42b737b.

Di website

<script async
  src="https://…/webchat/widget.js"
  data-key="…"
  data-name="Budi Santoso"
  data-email="[email protected]"
  data-sig="<signature>"></script>

window.koneksipChat baru ada setelah skrip termuat. Jika Anda langsung tahu penggunanya, berikan di tag seperti di atas. Jika baru tahu belakangan, panggil dari onload skrip, atau setelah skrip termuat:

<script async src="https://…/webchat/widget.js" data-key="…"
  onload="koneksipChat.identify({ name: 'Budi Santoso', email: '[email protected]', sig: '<signature>' })"></script>

Saat pengguna login atau logout sementara halaman tetap terbuka, panggil:

window.koneksipChat.identify({ name: 'Budi Santoso', email: '[email protected]', sig: signature });
window.koneksipChat.reset(); // saat pengguna logout

Di aplikasi mobile

Tambahkan name, email, dan sig ke alamat halaman chat (nilainya di-URL-encode):

https://…/webchat/embed?key=…&app=com.example.shop&name=Budi%20Santoso&email=budi%40example.com&sig=<signature>

Satu browser atau ponsel menyimpan chat satu orang. Saat pengguna lain login, atau tidak ada yang login, chat dimulai dengan pengunjung baru, sehingga tidak ada yang melihat chat pemakai perangkat sebelumnya.

Pengunjung dan customer

• Setiap browser mendapat ID pengunjung acak, sehingga chat berlanjut saat pengunjung kembali. Pengunjung yang belum memberi nama tampil sebagai Visitor dengan empat karakter.
• Saat pengunjung mengetik nama dan email, KonekSip membuat customer untuknya. Email yang ditandatangani server Anda sendiri (lihat Pengguna yang sudah login) bergabung ke customer yang sudah memiliki email itu.
• Email yang diketik pengunjung tidak diverifikasi, jadi tidak pernah bergabung ke customer yang sudah ada. Jangan membagikan detail akun pribadi karenanya.
• Jika pengunjung sudah meninggalkan halaman, balasan Anda disimpan dan ditampilkan saat widget dibuka lagi.

Yang didukung

• Chat pengunjung masuk ke Inbox dan bisa ditugaskan, diberi prioritas, dan dibalas seperti percakapan lain. Balasan otomatis, workflow, dan balasan AI juga berfungsi.
• Chat hanya teks: tanpa gambar, file, indikator mengetik, atau tanda terbaca.
• Tidak ada jendela 24 jam: Anda bisa membalas kapan saja, selama pengunjung membuka widget lagi untuk melihatnya.
• Di luar jam operasional (Pengaturan → Organisasi), widget menampilkan pesan di luar jam di atas chat, dan pengunjung juga menerimanya sebagai balasan, sekali tiap 12 jam. Kampanye, phonebook, dan template hanya untuk WhatsApp. Widget mengikuti bahasa browser pengunjung (Indonesia atau Inggris).
• Untuk menahan spam, satu alamat bisa memulai 30 chat baru per jam dan mengirim 30 pesan per menit. Pengunjung yang melewatinya melihat Terlalu banyak pesan dengan jumlah detik menunggu, dan bisa mengetuk pesan untuk mengirim ulang.

Pemecahan masalah