# BUKU PANDUAN PENGGUNA: MODUL OMNICHANNEL CHATROOM (WHATSAPP & MEDIA SOSIAL)
## Bintoro ERP — Enterprise Customer Relationship & Communication Hub

---

**Dokumen Referensi:** SOP-CRM-CHAT-01  
**Versi Sistem:** 2026.1 (Release Branch `didiksubi`)  
**Penulis:** Tim Sistem Informasi & Komunikasi Digital PT Hazam Investama Group  
**Tanggal Rilis:** 02 November 2026  

---

## DAFTAR ISI

1. [Bab 1: Konsep & Arsitektur Omnichannel Chatroom](#bab-1-konsep--arsitektur-omnichannel-chatroom)
   - 1.1 Peran Chatroom sebagai Sentral Komunikasi & SSOT Pelanggan
   - 1.2 Integrasi WhatsApp Coexistence & Meta Cloud API Resmi
   - 1.3 Integrasi Instagram Direct, Facebook Messenger, & Multi-Channel
   - 1.4 Prinsip "Single Inbox": Bebas Berpindah Tanpa Keluar dari Handphone Fisik
2. [Bab 2: Anatomi 3-Kolom Antarmuka & Navigasi Cepat](#bab-2-anatomi-3-kolom-antarmuka--navigasi-cepat)
   - 2.1 Panel Kiri: Daftar Obrolan, Filter Channel, & Pencarian Kontak
   - 2.2 Panel Tengah: Aliran Pesan Real-Time & Ruang Percakapan Aktif
   - 2.3 Panel Kanan: Profil Pelanggan 360°, Integrasi CRM, & Grup Proyek
   - 2.4 Command Bar Atas: Navigasi Cepat, Switch Status, & Pintasan Menu
3. [Bab 3: Manajemen Status Dinas Agent, Klaim Chat, & SLA Respon](#bab-3-manajemen-status-dinas-agent-klaim-chat--sla-respon)
   - 3.1 Mode Dinas Sales/CS (Online vs Offline)
   - 3.2 Mekanisme Klaim Chat (Claim Conversation) & Penugasan Ulang (Reassign)
   - 3.3 Indikator SLA Handled Time & Peringatan Dini Chat Menunggu (Overdue)
   - 3.4 Etika Respon Cepat & Tata Kelola Beban Kerja Tim
4. [Bab 4: Komposisi Pesan, Lampiran Media, & Template Balasan Cepat](#bab-4-komposisi-pesan-lampiran-media--template-balasan-cepat)
   - 4.1 Menulis Pesan Teks, Pemformatan (Bold, Italic, Monospace), & Shift+Enter
   - 4.2 Mengirim Gambar, Video, Dokumen PDF/Excel, Audio, & Stiker
   - 4.3 Penampil Media Lightbox (Zoom, Putar, & Layar Penuh)
   - 4.4 Penggunaan Template Balasan Cepat (`Template CS` / Shortcut `/`)
   - 4.5 Pembuka Sesi 24 Jam Meta Cloud API (Salam Islami Resmi & Salam Waktu Otomatis)
5. [Bab 5: Kolaborasi Tim Lapangan & Grup WhatsApp Proyek](#bab-5-kolaborasi-tim-lapangan--grup-whatsapp-proyek)
   - 5.1 Membuka & Memantau Grup WhatsApp Proyek Lapangan
   - 5.2 Identifikasi Pengirim Pesan & Menghubungi Personil Lapangan Langsung
   - 5.3 Fitur Balas Kutipan (Quoted Reply via Double-Click) & Reaksi Emoji
   - 5.4 Meneruskan Pesan (Forward) & Menyalin Nomor Kontak
6. [Bab 6: Integrasi Penuh CRM (Simpan Pelanggan, Pipeline, & Cross-Selling)](#bab-6-integrasi-penuh-crm-simpan-pelanggan-pipeline--cross-selling)
   - 6.1 Mendaftarkan Kontak Baru ke CRM (`+ Simpan ke CRM`) dengan Data Terisi Otomatis
   - 6.2 Memperbarui Tahapan Penjualan (Pipeline Stage) Langsung dari Chat
   - 6.3 Peluang Cross-Selling Antar-Unit Bisnis (Clean, Pest, Build, Architect, Interior, Pool)
   - 6.4 Meninjau Riwayat Proyek, Surat Kontrak (SO), dan Invoice Pelanggan
7. [Bab 7: Standar Operasional Prosedur (SOP Langkah-demi-Langkah)](#bab-7-standar-operasional-prosedur-sop-langkah-demi-langkah)
   - 7.1 SOP 1: Penanganan Pesan Masuk Baru & Klaim Chat Prospek
   - 7.2 SOP 2: Konsultasi Layanan & Pengiriman Template RAB/Penawaran
   - 7.3 SOP 3: Mendaftarkan Prospek Chat Menjadi Klien Resmi CRM
   - 7.4 SOP 4: Serah Terima Chat (Handover) Saat Pergantian Shift Kerja
8. [Bab 8: FAQ & Panduan Penyelesaian Kendala (Troubleshooting)](#bab-8-faq--panduan-penyelesaian-kendala-troubleshooting)
   - 8.1 Pesan Tertunda (Pending) atau Gagal Terkirim
   - 8.2 Sesi 24 Jam Meta WhatsApp Berakhir (Pesan Gagal Terkirim ke API Resmi)
   - 8.3 Notifikasi Suara atau Banner Desktop Tidak Muncul di Komputer
   - 8.4 Foto atau Dokumen Lampiran Tidak Mau Muncul
   - 8.5 Menghubungkan Kembali QR Code WhatsApp jika Terputus

---

## BAB 1: KONSEP & ARSITEKTUR OMNICHANNEL CHATROOM

### 1.1 Peran Chatroom sebagai Sentral Komunikasi & SSOT Pelanggan
Dalam era interaksi digital modern, jalur masuk utama prospek dan pelanggan Bintoro Group (Bintoro Clean, Bintoro Pest, Bintoro Build, Bintoro Architect, Bintoro Interior, Bintoro Pool, Bintoro Mover) bermula dari obrolan WhatsApp dan Media Sosial. 

Modul **Omnichannel Chatroom CRM** berfungsi sebagai sentral percakapan terpadu (*Single Source of Truth / SSOT Communication Hub*). Seluruh interaksi pesan dari berbagai saluran disatukan dalam satu antarmuka kerja, menjamin bahwa:
1. Tidak ada pesan prospek atau pelanggan yang tercecer atau terlambat ditangani.
2. Riwayat obrolan tersimpan aman di database korporasi sehingga tidak hilang saat terjadi pergantian staf (*agent turnover*).
3. Tim Sales, Customer Service (CS), dan Manajemen memiliki visibilitas penuh atas kualitas pelayanan, kecepatan respon (*SLA*), dan kepuasan pelanggan.

### 1.2 Integrasi WhatsApp Coexistence & Meta Cloud API Resmi
Sistem Chatroom Bintoro mengadopsi teknologi mutakhir **Dual-Engine WhatsApp**:
* **WhatsApp Coexistence (Baileys Engine)**:
  - Memungkinkan nomor WhatsApp fisik di handphone marketing/kantor (contoh: nomor Bintoro Clean `0821 1212 2020` atau Bintoro Pest) tetap aktif di perangkat mobile masing-masing.
  - Percakapan grup koordinasi proyek lapangan, media foto, stiker, dan obrolan personal otomatis tersinkronisasi dua arah secara langsung (*real-time WebSocket bi-directional sync*).
* **Meta WhatsApp Cloud API Resmi**:
  - Digunakan untuk pengiriman pesan skala korporasi yang terverifikasi (Centang Hijau Resmi Meta).
  - Dilengkapi sistem template percakapan interaktif dan kepatuhan penuh terhadap kebijakan privasi Meta (kebijakan *24-Hour Customer Care Window*).

### 1.3 Integrasi Instagram Direct, Facebook Messenger, & Multi-Channel
Selain WhatsApp, Chatroom secara mulus menghubungkan pesan masuk langsung (*Direct Message / DM*) dari akun resmi Instagram dan Facebook Bintoro Group. Seluruh notifikasi komentar dan obrolan pribadi dapat dijawab langsung dari ruang obrolan yang sama tanpa perlu login ke aplikasi media sosial pihak ketiga.

### 1.4 Prinsip "Single Inbox": Bebas Berpindah Tanpa Keluar dari Handphone Fisik
Staf sales dan operasional di lapangan dapat tetap membawa smartphone masing-masing saat bertugas, sementara tim customer service di kantor dapat memantau dan membalas obrolan yang sama melalui browser komputer desktop. Sistem memastikan tidak ada konflik sesi (*session conflict*), dan pesan yang dibalas dari Chatroom web akan langsung tampak di WhatsApp handphone dengan status terbaca yang sinkron.

---

## BAB 2: ANATOMI 3-KOLOM ANTARMUKA & NAVIGASI CEPAT

Modul Chatroom didesain dengan tata letak **3-Kolom Modern (Three-Pane Layout)** yang memaksimalkan efisiensi kerja tim tanpa perlu banyak berpindah halaman:

![Anatomi 3-Kolom Chatroom Bintoro ERP](/assets/tutorial/01_overview_3kolom.png)
*Gambar 1: Gambaran Umum Antarmuka Omnichannel Chatroom 3-Kolom Bintoro ERP*

```
┌──────────────────────────┬─────────────────────────────────────┬──────────────────────────┐
│   PANEL KIRI (380px)     │         PANEL TENGAH (FLEX)         │    PANEL KANAN (340px)   │
├──────────────────────────┼─────────────────────────────────────┼──────────────────────────┤
│ • Bilah Pencarian Cerdas │ • Header Obrolan & PIC Handled By   │ • Profil Lengkap Klien   │
│ • Filter Channel:        │ • Dropdown Pipeline Stage & BU      │ • Tautan Data CRM        │
│   [Semua] [WA] [IG] [Grp]│ • Tombol Claim Chat & Reassign      │   [+ Simpan ke CRM]      │
│ • Filter Dropdown BU/Nomor─────────────────────────────────────┤ • Riwayat Transaksi & SO │
│ • Daftar Kartu Chat:     │ • Stream Percakapan Real-Time       │ • Riwayat Invoice Terbit │
│   - Foto Avatar / Inisial│   - Bubble Pesan Klien & CS         │ • Daftar Anggota Grup WA │
│   - Nama Kontak & No WA  │   - Penampil Foto, Video, & Dokumen │ • Catatan Internal Sales │
│   - Cuplikan Pesan Akhir │   - Quoted Reply & Reaksi Emoji     │                          │
│   - Badge Jam / Tanggal  ├─────────────────────────────────────┤                          │
│   - Indikator SLA & Unread│ • Input Balasan & Quoted Bar Preview│                          │
│                          │ • Tombol Media, Salam, & Template CS│                          │
└──────────────────────────┴─────────────────────────────────────┴──────────────────────────┘
```

### 2.1 Panel Kiri: Daftar Obrolan, Filter Channel, & Pencarian Kontak
Panel kiri menyajikan seluruh percakapan yang masuk secara berurutan berdasarkan waktu pesan terbaru:
* **Bilah Pencarian Cerdas**: Ketik nama kontak, nomor handphone (misal `0812...`), atau kata kunci cuplikan percakapan untuk menyaring daftar obrolan secara seketika (*instant debounced search*).
* **Filter Channel**:
  - `Semua`: Menampilkan seluruh percakapan dari semua saluran.
  - `WA`: Obrolan personal nomor WhatsApp.
  - `IG`: Pesan langsung (*Direct Message*) Instagram.
  - `Grup`: Khusus grup koordinasi WhatsApp proyek lapangan.
* **Dropdown Unit Bisnis / Nomor WhatsApp**: Memilih nomor dinas yang ingin dipantau (misal nomor CS Bintoro Clean, CS Bintoro Pest, atau nomor Hotline Proyek).
* **Kartu Percakapan (Conversation Card)**:
  - Avatar kontak atau foto profil WhatsApp.
  - Nama penanda kontak dan nomor telepon resmi.
  - Cuplikan pesan teks terakhir (*last message snippet*) dengan penanda standar WhatsApp:
    * **`✓✓ Anda:` (Centang Ganda & Label Anda)**: Jika pesan terakhir dikirimkan oleh staf/agen dari CRM maupun handphone, sehingga staf langsung tahu percakapan tersebut sudah dibalas tanpa perlu membuka ruang chat.
    * **Pesan Konsumen / Grup**: Jika pesan terakhir berasal dari pelanggan (ditampilkan dengan teks tebal jika ada pesan baru yang belum dibaca).
  - Waktu pesan terakhir dalam format WIB (`HH:mm` untuk hari ini, `Kemarin`, atau `dd/MM/yyyy`).
  - Badge angka merah untuk pesan yang belum terbaca (*unread counter*).
  - Lencana kanal (*channel pill*) berwarna hijau untuk WhatsApp dan merah untuk Instagram.

![Panel Kontak & Filter SLA](/assets/tutorial/03_panel_kontak_sla.png)  
*Gambar 2: Panel Kiri — Filter Saluran, Bilah Pencarian, & Kartu Obrolan Prospek*

### 2.2 Panel Tengah: Aliran Pesan Real-Time & Ruang Percakapan Aktif
Merupakan area utama interaksi dengan pelanggan:
* **Header Ruang Obrolan**:
  - Menampilkan nama kontak aktif, nomor handphone, dan status online/terakhir dilihat.
  - **Nama Agen Penangan (Handled By)**: Menunjukkan staf sales/CS yang sedang memegang obrolan tersebut.
  - **Tombol Klaim Chat**: Tombol cepat untuk mengambil alih obrolan ke akun Anda.
  - **Dropdown Tahapan Pipeline**: Mengubah status lead pelanggan (misal: *Hot Lead, Survey, Negosiasi, Closing*).
  - **Dropdown Unit Bisnis / Cross-Selling**: Menandai unit bisnis kebutuhan pelanggan atau merujuk ke divisi saudara.
* **Stream Percakapan**:
  - Menampilkan pesan pelanggan (sisi kiri abu-abu terang) dan balasan staf/agen (sisi kanan hijau gradien Bintoro).
  - Ikon centang pengiriman WhatsApp:
    - `🕒 Jam Pasir`: Pesan sedang dalam antrean pengiriman.
    - `✓ Centang Satu Abu-abu`: Pesan berhasil keluar ke server WhatsApp.
    - `✓✓ Centang Dua Abu-abu`: Pesan telah diterima di handphone pelanggan.
    - `✓✓ Centang Dua Biru`: Pesan telah dibuka dan dibaca oleh pelanggan.
* **Bilah Input Komposer**:
  - Input teks multi-baris otomatis menyesuaikan tinggi (*auto-expanding textarea*).
  - Kotak preview kutipan pesan (*Quoted Reply Box*) saat membalas pesan tertentu.
  - Tombol lampiran berkas, menu template cepat, tombol salam resmi Meta, dan tombol kirim pesan.

![Stream Percakapan & Status Balasan](/assets/tutorial/05_chat_stream_bubbles.png)  
*Gambar 3: Panel Tengah — Aliran Obrolan Real-Time & Riwayat Respons Staf*

### 2.3 Panel Kanan: Profil Pelanggan 360°, Integrasi CRM, & Grup Proyek
Panel drawer cerdas di sisi kanan yang menyajikan konteks lengkap pelanggan:
* **Status Identitas Pelanggan**:
  - Jika kontak belum terdaftar di database CRM: Muncul tombol emas **`+ Simpan ke CRM`**.
  - Jika kontak sudah terdaftar: Muncul lencana hijau **`Klien Terdaftar CRM`** lengkap dengan Customer ID resmi.
* **Hubungan Transaksi & Proyek**:
  - Menampilkan data proyek berjalan, nomor Sales Order (SO), estimasi nilai kontrak, dan ringkasan invoice pembayaran.
* **Daftar Peserta Grup Proyek**:
  - Untuk percakapan grup WhatsApp proyek, panel kanan menampilkan daftar seluruh personil (Owner Rumah, Arsitek, Site Manager, Pengawas Lapangan, dan Vendor). Staf CS dapat mengklik tombol obrolan personal atau menyalin nomor telepon peserta secara cepat.

---

## BAB 3: MANAJEMEN STATUS DINAS AGENT, KLAIM CHAT, & SLA RESPON

![Command Bar & Status Dinas](/assets/tutorial/02_command_bar_sla.png)  
*Gambar 4: Bilah Navigasi Atas — Status Online/Offline Dinas, Tombol Aturan SLA, & Template CS*

### 3.1 Mode Dinas Sales/CS (Online vs Offline)
Di pojok kanan atas bilah navigasi (*Command Bar*), terdapat tombol status dinas:
* **Online (Dinas)**: Lencana hijau menyala. Sistem menandai Anda aktif bertugas dan siap menerima pembagian obrolan masuk baru.
* **Offline (Lepas Dinas)**: Lencana abu-abu. Digunakan saat jam istirahat, di luar jam kerja dinas, atau cuti. Chat masuk baru akan dialihkan kepada staf lain yang sedang berstatus Online.

### 3.2 Mekanisme Klaim Chat (Claim Conversation) & Penugasan Ulang (Reassign)
Guna mencegah tumpang tindih jawaban (*double-reply*) yang membingungkan pelanggan, Bintoro Chatroom menerapkan sistem kepemilikan percakapan:
1. **Klaim Mandiri (Claim Chat)**:
   - Ketika ada chat masuk dari prospek baru yang belum memiliki penangan (*Unassigned*), klik tombol **`Klaim Chat`** di header atas obrolan.
   - Status penangan akan otomatis berubah menjadi nama Anda, dan staf lain akan melihat bahwa chat tersebut sedang Anda layani.
2. **Penugasan Ulang (Reassign Agent)**:
   - Jika kebutuhan pelanggan lebih tepat ditangani divisi spesialis lain (misal dari CS Umum dialihkan ke Sales Engineer Desain Arsitek), klik tombol **`Alihkan / Reassign`**.
   - Pilih nama rekan sales target pada daftar staf online, lalu konfirmasi pengalihan. Seluruh riwayat obrolan otomatis tersedia bagi staf penerima.

### 3.3 Indikator SLA Handled Time & Peringatan Dini Chat Menunggu (Overdue)
Bintoro ERP memegang teguh standar pelayanan prima dengan Service Level Agreement (SLA) respon tercepat di industri jasa rancang bangun dan kebersihan:
* **Hijau (< 5 Menit)**: Waktu tunggu ideal. Respon diberikan secara tanggap dan profesional.
* **Kuning (5 – 15 Menit)**: Waktu tunggu moderat. Staf harus segera membalas atau mengabarkan status antrean.
* **Merah (> 15 Menit / Overdue)**: Peringatan kritis keterlambatan respon. Sistem mencatat waktu keterlambatan pada rekap KPI bulanan dan dapat memicu notifikasi eskalasi langsung ke manajemen operasional.

---

## BAB 4: KOMPOSISI PESAN, LAMPIRAN MEDIA, & TEMPLATE BALASAN CEPAT

### 4.1 Menulis Pesan Teks & Pemformatan
* **Kirim Cepat**: Tekan tombol `Enter` pada keyboard untuk mengirim pesan seketika.
* **Baris Baru**: Tekan kombinasi tombol `Shift + Enter` untuk membuat baris paragraf baru tanpa langsung terkirim.
* **Pemformatan Standar WhatsApp**:
  - `*teks tebal*` → menghasilkan teks **tebal**.
  - `_teks miring_` → menghasilkan teks *miring*.
  - `~teks coret~` → menghasilkan teks ~coret~.
  - ` ```teks monospace``` ` → menghasilkan teks `kode / monospace`.

### 4.2 Mengirim Gambar, Video, Dokumen, Audio, & Stiker
Klik tombol klip kertas / tombol media di samping baris input:
* **Foto / Gambar**: Mendukung format JPG, PNG, WEBP. Dapat dikirim dengan atau tanpa takarir (*caption*).
* **Dokumen Bisnis**: Mendukung format PDF (Proposal, Surat Penawaran, Faktur), Spreadsheet Excel XLSX (Estimasi RAB), dan Dokumen Word.
* **Video Penjelasan**: Mendukung video MP4 dokumentasi pengerjaan lapangan atau metode survei.
* **Drag-and-Drop & Paste Langsung**: Anda dapat menyalin (*copy*) gambar dari clipboard atau tangkapan layar (screenshot), lalu menekan `Ctrl + V` (atau `Cmd + V` di Mac) langsung di dalam ruang chatroom untuk mengirim foto secara instan.

### 4.3 Penampil Media Lightbox (Zoom, Putar, & Layar Penuh)
Klik foto atau lampiran dokumen apa pun di aliran chat untuk membuka jendela **Media Lightbox**:
* **Zoom In / Out**: Perbesar detail denah arsitektur atau foto titik rayap menggunakan tombol pembesar atau scroll mouse.
* **Putar Foto (Rotate)**: Putar posisi foto 90 derajat searah jarum jam jika orientasi foto kiriman teknisi miring.
* **Unduh Asli (Download)**: Simpan berkas resolusi tinggi asli ke perangkat Anda.

### 4.4 Penggunaan Template Balasan Cepat (`Template CS` / Shortcut `/`)
Untuk mempercepat pengetikan kalimat SOP standar, gunakan fitur Template CS:
1. Klik tombol **`Template CS`** di Command Bar atas atau ketik tanda garis miring (`/`) di kolom input pesan.
2. Muncul jendela pemilih template cepat yang dikelompokkan berdasarkan kategori:
   - *Sapaan Awal & Pengenalan Diri*
   - *Penjelasan Layanan & Spesifikasi Teknis*
   - *Jadwal Survei Lokasi Gratis*
   - *Metode Pembayaran Resmi PT Bintoro Sinergi Korpora*
3. Klik template yang diinginkan. Sistem otomatis mengganti variabel pintar (seperti `{nama_pelanggan}`) sesuai nama lawan bicara.

### 4.5 Pembuka Sesi 24 Jam Meta Cloud API (Salam Islami & Salam Waktu)
Sesuai kebijakan resmi Meta WhatsApp Cloud API, jika pelanggan tidak membalas dalam 24 jam terakhir, jendela pesan terbuka bebas (*freeform session*) akan tertutup sementara:
* Untuk membuka kembali percakapan secara sah tanpa risiko nomor terblokir, klik tombol **`🕌 Salam Resmi`** di atas input pesan.
* Pilih:
  - **Salam Islami Resmi**: *"Assalamu'alaikum Warohmatullahi Wabrokaatuh"* (Default Utama Bintoro Group).
  - **Salam Berdasarkan Waktu**: Sistem secara cerdas mendeteksi jam saat ini dan merekomendasikan tombol: *Selamat Pagi, Selamat Siang, Selamat Sore, atau Selamat Malam*.
* Begitu template salam dikirimkan, sesi obrolan 24 jam resmi kembali terbuka penuh.

![Area Komposisi Pesan & Sesi 24 Jam](/assets/tutorial/06_composer_24jam.png)  
*Gambar 5: Komposer Pesan — Tab Balas WA vs Catatan Internal, Lampiran, & Indikator Sesi 24 Jam Meta*

![Modal Pilihan Salam Resmi Meta](/assets/tutorial/07_modal_salam_picker.png)  
*Gambar 6: Modal Pemilih Salam Resmi Pembuka Sesi WhatsApp Meta Cloud API*

---

## BAB 5: KOLABORASI TIM LAPANGAN & GRUP WHATSAPP PROYEK

### 5.1 Membuka & Memantau Grup WhatsApp Proyek Lapangan
Pada proyek konstruksi bangun baru (Bintoro Build), renovasi, interior, maupun pengendalian hama gedung bertingkat, koordinasi teknis harian dilakukan melalui grup WhatsApp:
* Pilih filter **`Grup`** pada Panel Kiri untuk menyaring seluruh percakapan grup proyek yang tertaut di handphone operasional.
* Seluruh diskusi, foto progres harian tukang, dan instruksi perubahan pekerjaan (*CCO*) dapat ditinjau oleh pimpinan dan tim estimator secara terpusat di kantor.

### 5.2 Identifikasi Pengirim Pesan & Menghubungi Personil Langsung
Di dalam gelembung obrolan grup WhatsApp:
* Setiap nama peserta tampil dengan warna pembeda yang jelas di bagian atas gelembung (*bubble header*).
* **Klik Nama Pengirim**: Klik nama pengirim di header gelembung chat untuk memunculkan opsi cepat:
  - Buka chat pribadi (*Direct Chat*) ke nomor personil tersebut.
  - Salin nomor handphone ke papan klip (*clipboard*).

### 5.3 Fitur Balas Kutipan (Quoted Reply) & Reaksi Emoji
* **Balas Cepat (Double-Click)**: Klik ganda (*double click*) pada gelembung obrolan pesan yang ingin dikutip. Kotak kutipan otomatis terisi di atas baris ketik pesan.
* **Reaksi Emoji (Reaction)**: Arahkan kursor (*hover*) ke gelembung pesan, lalu klik ikon wajah tersenyum untuk memberikan reaksi cepat (👍, ❤️, 😂, 🙏, 👏). Reaksi akan langsung tersinkron ke WhatsApp handphone seluruh peserta grup.

### 5.4 Meneruskan Pesan (Forward)
Gunakan tombol menu panah bawah pada pesan (berlaku untuk pesan yang Anda kirim sendiri maupun pesan yang diterima dari konsumen) lalu pilih **`Teruskan Pesan (Forward)`** untuk membagikan draf penawaran, dokumen PDF, foto lapangan, atau instruksi teknis ke kontak konsumen lain atau grup proyek tanpa perlu mengetik ulang atau mengunggah ulang berkas. Sistem akan mempertahankan nama asli berkas PDF/dokumen saat diteruskan.

---

## BAB 6: INTEGRASI PENUH CRM (SIMPAN PELANGGAN, PIPELINE, & CROSS-SELLING)

### 6.1 Mendaftarkan Kontak Baru ke CRM (`+ Simpan ke CRM`)
Salah satu keunggulan terbesar Bintoro ERP adalah hubungan langsung antara obrolan WhatsApp dengan Master Data Pelanggan:
1. Saat menerima prospek dari nomor baru yang belum ada di database, buka panel kanan dan klik tombol **`+ Simpan ke CRM`**.
2. Sistem otomatis membuka formulir lengkap penambahan pelanggan baru (`customers-create.html`) dengan **Nomor WhatsApp dan Nama Kontak telah terisi otomatis (*prefilled*)**.
3. Lengkapi data domisili, email, dan alamat proyek, lalu klik Simpan.
4. Sistem otomatis mengalihkan Anda kembali ke Chatroom. Kontak seketika terhubung dengan Customer ID resmi, dan lencana berubah menjadi hijau **`Klien CRM`**.

![Header Percakapan & Tombol Simpan CRM](/assets/tutorial/04_header_chat_crm.png)  
*Gambar 7: Header Ruang Obrolan — Pendaftaran Pelanggan Baru (`+ Simpan ke CRM`) & Pipeline Stage*

### 6.2 Memperbarui Tahapan Penjualan (Pipeline Stage)
Di header atas ruang obrolan, staf sales dapat memperbarui fase prospek secara instan tanpa keluar dari chatroom:
* `New Lead`: Kontak baru masuk yang baru pertama kali menyapa.
* `Contacted / Konsultasi`: Sedang mendiskusikan kebutuhan ruang, luas bangunan, atau jenis hama.
* `Survey / Kunjungan`: Jadwal survei lokasi telah disepakati bersama estimator lapangan.
* `Negosiasi / RAB Terbit`: Proposal penawaran harga telah diserahkan dan sedang diulas oleh klien.
* `Deal Won (Closing)`: Kesepakatan tercapai, siap diterbitkan dokumen Sales Order (SO) dan Invoice.

### 6.3 Peluang Cross-Selling Antar-Unit Bisnis
Jika seorang pelanggan Bintoro Clean yang sedang berkonsultasi jasa cuci karpet menyampaikan bahwa rumahnya memiliki masalah rayap atau atap bocor:
* Klik dropdown **Unit Bisnis** di header chat.
* Pilih rekomendasi unit bisnis saudara (misal: *Bintoro Pest* atau *Bintoro Build*).
* Sistem secara otomatis meneruskan ringkasan kebutuhan prospek ke antrean sales unit bisnis terkait (*cross-selling lead referral*), menciptakan sinergi penjualan lintas unit korporasi.

---

## BAB 7: STANDAR OPERASIONAL PROSEDUR (SOP LANGKAH-DEMI-LANGKAH)

```
┌────────────────────────────────────────────────────────────────────────┐
│               SOP-CRM-CHAT-01: ALUR PENANGANAN CHAT RESMI               │
└───────────────────────────────────┬────────────────────────────────────┘
                                    │
                                    ▼
┌────────────────────────────────────────────────────────────────────────┐
│ 1. NOTIFIKASI MASUK & KLAIM OBROLAN                                    │
│    • Dengar nada dering notifikasi & cek lencana unread merah.         │
│    • Pastikan status Anda 'Online (Dinas)'.                            │
│    • Buka chat & klik 'Klaim Chat' (SLA < 5 menit).                    │
└───────────────────────────────────┬────────────────────────────────────┘
                                    │
                                    ▼
┌────────────────────────────────────────────────────────────────────────┐
│ 2. SAPAAN RESMI & KONSULTASI AWAL                                      │
│    • Awali dengan salam resmi Bintoro / buka sesi Meta Cloud API.      │
│    • Gunakan Template CS perkenalan nama staf dan divisi layanan.      │
│    • Identifikasi kebutuhan pelanggan secara aktif dan empatik.        │
└───────────────────────────────────┬────────────────────────────────────┘
                                    │
                                    ▼
┌────────────────────────────────────────────────────────────────────────┐
│ 3. PENCATATAN PROSPEK KE DATABASE CRM                                  │
│    • Klik '+ Simpan ke CRM' di panel kanan.                            │
│    • Simpan profil lengkap pelanggan (Nama, No HP, Alamat, Kategori).  │
│    • Perbarui Pipeline Stage ke 'Konsultasi' atau 'Jadwal Survey'.     │
└───────────────────────────────────┬────────────────────────────────────┘
                                    │
                                    ▼
┌────────────────────────────────────────────────────────────────────────┐
│ 4. PENAWARAN HARGA, SURVEI, & CLOSING DEAL                             │
│    • Kirimkan dokumen proposal / RAB PDF langsung via tombol lampiran. │
│    • Setelah deal disetujui, ubah stage ke 'Deal Won'.                 │
│    • Sistem Finance otomatis mendeteksi kontrak untuk penerbitan SO.   │
└────────────────────────────────────────────────────────────────────────┘
```

---

## BAB 8: FAQ & PANDUAN PENYELESAIAN KENDALA (TROUBLESHOOTING)

### 8.1 Pesan Menampilkan Ikon Jam Pasir dan Tertunda (*Pending*)
* **Penyebab**: Koneksi jaringan internet lokal mengalami gangguan sementara, atau service background sync Baileys sedang melakukan sinkronisasi ulang buffer pesan.
* **Solusi**: 
  1. Periksa stabilitas koneksi internet kantor Anda.
  2. Klik tombol **`Refresh Semua Data`** di pojok kanan atas Command Bar.
  3. Jangan menghapus pesan; sistem memiliki mekanisme otomatis kirim ulang (*auto-retry queue*).

### 8.2 Sesi 24 Jam WhatsApp Meta Berakhir
* **Penyebab**: Pelanggan tidak membalas lebih dari 24 jam sehingga pengiriman pesan teks bebas (*freeform message*) ditolak oleh Meta Cloud API.
* **Solusi**: 
  1. Klik tombol **`🕌 Salam Resmi`** di atas baris ketik pesan.
  2. Kirim template resmi *"Assalamu'alaikum Warohmatullahi Wabrokaatuh"* atau sapaan waktu resmi (*Selamat Pagi/Siang/Sore/Malam*).
  3. Begitu template terkirim, jendela obrolan 24 jam otomatis aktif kembali.

### 8.3 Notifikasi Suara atau Pop-Up Desktop Tidak Muncul
* **Penyebab**: Izin notifikasi (*Notification Permission*) dan pemutaran audio otomatis (*Autoplay Audio*) diblokir oleh browser Chrome/Edge.
* **Solusi**:
  1. Klik ikon gembok di samping bilah alamat URL browser (kiri atas).
  2. Ubah setelan **Notifikasi** dan **Suara** menjadi **Izinkan (Allow)**.
  3. Muat ulang halaman (*Refresh*) browser Anda.

### 8.4 Foto atau Dokumen Lampiran Tidak Mau Terbuka di Lightbox
* **Penyebab**: Media yang dikirimkan berukuran sangat besar atau sedang dalam proses enkripsi unduhan dari WhatsApp Web gateway.
* **Solusi**:
  1. Tunggu 2-3 detik hingga proses caching selesai.
  2. Klik tombol menu titik tiga pada pesan dan pilih **`Unduh Berkas Asli`** untuk membuka dokumen secara langsung di aplikasi pembaca PDF komputer Anda.

### 8.5 Memastikan Sesi WhatsApp Handphone Tetap Terhubung
* **Ketentuan Operasional**:
  1. Pastikan handphone fisik marketing/operasional selalu menyala dan terhubung dengan jaringan internet (Wi-Fi atau data seluler).
  2. Jangan melakukan *Log Out from all devices* pada aplikasi WhatsApp di ponsel.
  3. Jika sesi terputus karena pembaruan sistem WhatsApp, hubungi Super Administrator untuk memindai ulang (*re-scan*) QR Code di ruang server.

---

**Hak Cipta © 2026 PT Hazam Investama Group / Bintoro ERP.**  
Seluruh hak cipta dilindungi undang-undang. Dokumen ini merupakan standar operasional internal Bintoro Group.
