# Tur Antarmuka & Setup Channel Pertama


Setelah [login pertama](/panduan/memulai/login), langkah selanjutnya
adalah mengenal navigasi utama aplikasi dan menghubungkan minimal satu
channel komunikasi. Halaman ini memberikan tur singkat antarmuka dan
contoh alur setup WhatsApp end-to-end.

![Layout dasar aplikasi](/screenshots/dashboard.png)

## Navigasi utama

Setelah login, Anda akan melihat layout tiga bagian:

1. **Sidebar kiri** — navigasi utama.
2. **Konten tengah** — halaman aktif (inbox, dashboard, dst).
3. **Avatar di pojok kanan atas** — menu profil dan logout.

### Sidebar — menu utama

| Menu | Rute | Peran yang bisa mengakses |
|------|------|---------------------------|
| Dashboard | `/dashboard` | Supervisor, Admin |
| Inbox | `/inbox` | Semua |
| Contacts | `/contacts` | Semua |
| Quick Replies | `/quick-replies` | Semua |
| Analytics | `/analytics` | Supervisor, Admin |
| Campaigns | `/campaigns` | Supervisor, Admin |
| SLA Policies | `/sla-policies` | Admin (edit), Supervisor (baca) |
| Outgoing Webhooks | `/outgoing-webhooks` | Admin |
| User Management | `/user-management` | Admin |
| Integrations | `/integrations` | Admin |
| Settings | `/settings` | Admin |
| Profile | `/profile` | Semua |

Menu yang tidak relevan dengan peran Anda akan disembunyikan otomatis
oleh frontend. Jika Anda agent reguler, Anda tidak akan melihat menu
**Integrations** atau **User Management**.

### Indikator status

Di header atas aplikasi, Anda akan melihat:

- **Avatar + nama** — pengguna yang login.
- **Badge online/offline** — status presence yang dipublikasikan via
  WebSocket ke rekan setim. Klik untuk mengubah ke `away` manual.
- **Lonceng notifikasi** — unread notification count (mention,
  transfer masuk, SLA warning).

## Setup channel pertama (WhatsApp end-to-end)

Contoh paling umum: menghubungkan nomor WhatsApp Business API melalui
Meta Cloud API. Anda harus admin untuk langkah ini.

### Prasyarat

- **Meta Business Account** yang sudah aktif di business.facebook.com.
- **Meta App** dengan produk WhatsApp Business API ditambahkan.
- **Phone Number ID** WhatsApp Business yang sudah diverifikasi.
- **System User Access Token** dengan scope `whatsapp_business_messaging`
  dan `whatsapp_business_management`.

Panduan lengkap Meta: lihat [Integrasi WhatsApp](/panduan/integrasi/whatsapp).

### Langkah-langkah

1. Login ke OmniStream sebagai admin.
2. Buka `/integrations`.
3. Pilih card **WhatsApp** dan klik **Connect**.
4. Form muncul meminta:
   - **App Secret** — untuk validasi HMAC webhook dari Meta
   - **Verify Token** — string acak yang akan Anda berikan ke Meta
   - **Access Token** — System User access token
   - **Phone Number ID** — dari Meta Business Manager
5. Klik **Save**.
6. Kembali ke Meta Business Manager → WhatsApp → Configuration →
   **Webhooks**. Set callback URL ke:
   ```
   https://<domain_anda>/webhook/whatsapp
   ```
   dengan verify token yang Anda isi di langkah 4.
7. Subscribe ke event `messages`, `message_template_status_update`,
   dan `messaging_postbacks`.
8. Meta akan memvalidasi callback URL dengan GET challenge — OmniStream otomatis merespons.

### Verifikasi koneksi

1. Kirim pesan dari nomor HP Anda ke nomor WhatsApp Business.
2. Pesan seharusnya muncul di `/inbox` dalam beberapa detik.
3. Balas pesan dari OmniStream. Pelanggan di HP harus menerima
   balasan via WhatsApp resmi.

Jika pesan tidak muncul, periksa bahwa callback URL di Meta App Dashboard sudah benar, dan bahwa semua kredensial yang dimasukkan di langkah 4 sesuai dengan yang ada di Meta. Penelusuran rinci ada di [Integrasi WhatsApp](/panduan/integrasi/whatsapp).

## Langkah berikutnya setelah setup

Setelah channel terhubung:

1. **Tambah agent** di `/user-management` — lihat
   [Manajemen pengguna](/panduan/admin/manajemen-pengguna).
2. **Buat divisi** untuk mengelompokkan agent per fungsi bisnis.
3. **Konfigurasi kebijakan SLA** di `/sla-policies` — lihat
   [Kebijakan SLA](/panduan/admin/kebijakan-sla).
4. **Buat quick reply standar** di `/quick-replies`.
5. **Aktifkan CSAT** di `/csat` bila ingin survei kepuasan otomatis.
6. **Pasang outgoing webhook** di `/outgoing-webhooks` bila Anda
   ingin meneruskan event ke sistem eksternal.

## Tombol shortcut umum

| Shortcut | Aksi |
|----------|------|
| `Enter` di kotak pesan | Baris baru |
| `Ctrl + Enter` (`Cmd + Enter` di Mac) di kotak pesan | Kirim pesan |
| `/` di awal textarea | Buka quick reply picker |
| `Esc` | Tutup modal atau picker |

> **Catatan:** OmniStream belum menyediakan keyboard shortcut global
> yang kompleks (seperti Gmail `g + i`). Fitur ini direncanakan untuk
> v1.1.

## Langkah kerja khas hari pertama

1. Login dengan kredensial admin.
2. Ganti password default.
3. Buka `/integrations`, hubungkan WhatsApp.
4. Buat agent tambahan di `/user-management`.
5. Buat minimal 1 divisi.
6. Set 1 kebijakan SLA default.
7. Buat 5 quick reply awal.
8. Kirim tes pesan dari HP Anda ke nomor WhatsApp Business.
9. Verifikasi di `/inbox`.

Selamat! Workspace Anda siap digunakan tim.

---

Baca selanjutnya: [Inbox Agent](/panduan/agent/inbox) untuk mulai
bekerja, atau [FAQ](/panduan/faq) untuk pertanyaan umum.