Digital Transformation
Document Picture-in-Picture API
TL;DR: Document Picture-in-Picture (Document PiP) adalah API browser modern yang mengizinkan web app membuka jendela kecil floating berisi DOM interaktif penuh, bukan hanya elemen video. Per 2026 fitur ini sudah Baseline Newly Available di Chromium 116+ dan dipakai untuk kontrol player, dashboard live, atau chat support yang tetap aktif saat user pindah tab.
Apa itu Document Picture-in-Picture API?
Document Picture-in-Picture API memperluas konsep PiP klasik yang sebelumnya terbatas pada elemen video HTML5. API ini membuka jendela browser kecil yang berdiri sendiri, tetapi tetap berbagi konteks JavaScript dengan halaman induk. Hasilnya, marketer dan developer bisa menampilkan kontrol custom, mini-form, atau widget chat di jendela floating tanpa kehilangan state aplikasi.
Konsepnya mirip Popover API yang juga memunculkan UI di atas konten lain, bedanya Document PiP menggunakan jendela OS yang persisten lintas tab.
Cara Kerja
Pemanggilan utama berbentuk documentPictureInPicture.requestWindow({ width, height }). Browser membuka jendela baru kosong, lalu developer memindahkan DOM ke dalamnya. Listener enter dan pagehide dipakai untuk sinkronisasi state. Karena masih satu konteks JS, store global seperti React context atau Zustand tetap berfungsi.
| Aspek | Document PiP | Video PiP klasik |
|---|---|---|
| Konten | DOM apapun (form, tombol, dashboard) | Hanya elemen <video> |
| State sharing | Sama dengan halaman induk | Hanya kontrol video |
| Use case | Mini-chat, live monitor, kalkulator | Pemutar video |
| Browser support | Chromium 116+ (Baseline 2024) | Semua browser modern |
Kenapa Penting?
Untuk produk Indonesia yang berfokus pada produktivitas dan retensi, Document PiP memberi ruang interaksi tanpa menyita perhatian penuh. Contoh aplikatif: dashboard analitik real-time di Atmo LMS yang tetap terlihat saat tutor membuka tab catatan, atau widget chat customer support di Vetmo yang tidak hilang ketika klien membuka tab pencarian klinik. Praktik standar di industri menunjukkan retensi sesi naik 12-18% saat user bisa multitask tanpa berpindah konteks.
Pertanyaan Umum
Apakah Document PiP sama dengan jendela popup biasa?
Tidak. Jendela popup biasa dikontrol popup blocker dan tidak selalu di atas. Document PiP wajib selalu di atas, ukurannya dibatasi browser, dan tertutup otomatis saat tab induk ditutup.
Browser apa saja yang mendukung?
Per 2026 Chromium 116+ (Chrome, Edge, Opera, Brave). Safari dan Firefox belum implementasi penuh. Selalu sediakan fallback ke modal biasa.
Istilah Terkait