# Livechat → Balas via Telegram

Widget livechat untuk website, tapi semua balasan admin dilakukan lewat **Telegram** (kayak di screenshot yang kamu kasih). Alurnya:

```
Visitor buka widget di website
        │
        ▼
Pesan masuk ke server (Node.js)
        │
        ▼
Server kirim notifikasi ke GRUP TELEGRAM kamu
        │
        ▼
Admin balas pakai:  /reply {room_id} {pesan}
        │
        ▼
Server terima command → kirim balik ke widget (realtime, via Socket.io)
```

## 1. Struktur Project

```
livechat-telegram/
├── server.js         # server utama (Express + Socket.io)
├── bot.js            # logic bot Telegram (notifikasi + command /reply)
├── db.js             # penyimpanan data (lowdb, file db.json)
├── public/
│   ├── widget.js     # script widget yang ditempel di website
│   └── demo.html     # contoh halaman website buat testing
├── .env.example
└── package.json
```

## 2. Setup Bot Telegram

1. Chat **@BotFather** di Telegram → `/newbot` → ikuti instruksi → dapat **BOT_TOKEN**.
2. Buat grup Telegram khusus buat notifikasi livechat, lalu masukkan bot kamu ke grup itu.
3. Cari **Chat ID grup**: tambahkan bot **@RawDataBot** sementara ke grup, dia akan kirim pesan berisi JSON, cari `"chat":{"id": -100xxxxxxxxxx}` — itu **ADMIN_CHAT_ID** kamu. Setelah dapat, @RawDataBot boleh dikeluarkan lagi dari grup.

## 3. Install & Jalankan

```bash
cd livechat-telegram
npm install

cp .env.example .env
# lalu isi .env:
# BOT_TOKEN=...
# ADMIN_CHAT_ID=...

node server.js
```

Kalau berhasil akan muncul:
```
✅ Livechat server jalan di http://localhost:3000
```

## 4. Coba Widget-nya

Buka `http://localhost:3000/demo.html` di browser → klik ikon 💬 di kanan bawah → kirim pesan.

Pesan itu akan otomatis nongol di grup Telegram kamu, mirip format di screenshot:

```
💬 LIVECHAT BARU DIBUKA

🆔 Room ID: 101
👤 User: Guest-5f0eb2
🌐 Site: Direct

Balas:
/reply 101 isi_pesan
```

Balas dari Telegram dengan:
```
/reply 101 halo, ada yang bisa dibantu?
```

Bot akan konfirmasi `✅ Balasan terkirim ke Room #101`, dan pesannya langsung muncul realtime di widget website (tanpa refresh).

## 5. Pasang di Website Asli

Tinggal taruh 2 baris ini sebelum `</body>` di halaman website kamu:

```html
<script>
  window.LIVECHAT_SERVER_URL = 'https://domain-server-livechat-kamu.com';
</script>
<script src="https://domain-server-livechat-kamu.com/widget.js"></script>
```

> Ganti `LIVECHAT_SERVER_URL` sesuai domain tempat kamu deploy `server.js` (Railway, VPS, Render, dll — bukan domain website utamanya).

## 6. Catatan Deploy

- Bot pakai **polling** (bukan webhook), jadi tidak butuh domain HTTPS khusus untuk Telegram-nya — cukup jalankan servernya terus-menerus (pakai `pm2` di VPS, atau platform seperti Railway/Render yang auto-keep-alive).
- Data disimpan di `db.json` (dibuat otomatis). Untuk produksi dengan traffic besar, nanti bisa upgrade ke PostgreSQL/MySQL — struktur `db.js` sengaja dipisah biar gampang diganti.
- CORS di `server.js` masih `origin: '*'` (bebas semua domain) — kalau widget cuma dipasang di 1-2 domain tertentu, sebaiknya dibatasi biar lebih aman.

## 7. Menambah Fitur (opsional ke depan)
- Notifikasi jika room belum dibalas lebih dari X menit
- Multi-admin (siapa yang klaim room mana)
- Riwayat chat ditampilkan di dashboard web, bukan cuma Telegram
- Upload gambar/file dari visitor
