Studi Kasus Vetmo: Pasang Document Picture-in-Picture untuk Konsultasi Dokter Pet Care, Pangkas Drop-off Sesi Video dari 41 ke 9 Persen di 2026

TL;DR: Vetmo memasang Document Picture-in-Picture API agar jendela konsultasi video tetap mengambang saat klien scroll halaman resep dan riwayat hewan. Hasilnya, drop-off sesi turun dari 41 ke 9 persen dalam 6 minggu, dan rata-rata durasi konsultasi naik dari 7,4 ke 12,1 menit per April 2026.

Saat membangun platform konsultasi video Vetmo, kami menemui pola yang mengganggu. Orangtua hewan sering meninggalkan tab konsultasi karena ingin membaca riwayat vaksin atau mengetik resep di tab lain. Sesi video terputus, dokter harus mengulang penjelasan, dan banyak konsultasi berakhir lebih awal dari yang seharusnya.

Pemicunya bukan kualitas dokter. Pemicunya friksi UI. Browser memaksa pengguna memilih, tetap di tab video atau pindah ke tab informasi. Document Picture-in-Picture API mengubah pilihan itu jadi tidak perlu.

Konteks Masalah

Drop-off konsultasi di Vetmo pada Januari 2026 mencapai 41 persen, jauh di atas benchmark telemedisin manusia yang berkisar 18 hingga 25 persen menurut riset Nielsen Norman. Investigasi sesi rekaman menunjukkan 73 persen drop-off terjadi saat pengguna pindah tab untuk mengakses informasi pendamping.

Solusi konvensional adalah meletakkan informasi dalam panel samping. Tapi layar mobile menjadi penuh, dan pengalaman desktop terasa kaku. Kami butuh pendekatan yang membiarkan jendela video benar-benar lepas dari konteks halaman.

Document Picture-in-Picture API

Berbeda dengan PiP klasik yang hanya bisa untuk elemen <video>, Document Picture-in-Picture API memungkinkan seluruh DOM tree mengambang di jendela terpisah dengan kontrol penuh atas styling dan event. Dokumentasi resmi tersedia di Chrome for Developers.

Snippet inti yang kami pakai di komponen Vetmo:

const pipWindow = await documentPictureInPicture.requestWindow({
  width: 400,
  height: 600,
});
pipWindow.document.body.append(videoConsultationRoot);

Setelah jendela PiP aktif, klien bebas membuka topic cluster artikel kami tentang vaksin, mencetak resep, atau mengisi formulir riwayat tanpa kehilangan kontak mata dengan dokter.

Breakdown Hasil 6 Minggu

Implementasi memakan 3 sprint engineering. Sprint pertama untuk lifecycle PiP, kedua untuk sinkronisasi state antara halaman utama dan jendela PiP, ketiga untuk fallback ke layout side-panel untuk browser yang belum mendukung API ini (saat ini Safari masih tertinggal, lihat Can I Use).

Studi Kasus Sekunder Atmo LMS

Pendekatan serupa kami uji di Atmo LMS untuk sesi video tutor. Hasilnya selaras: drop-off video turun dari 28 ke 11 persen dengan jendela mengambang yang berisi catatan latihan. Pola yang konsisten antara dua niche memperkuat keyakinan bahwa Document Picture-in-Picture cocok untuk produk konsultasi atau pembelajaran berbasis video di Indonesia. Audit lebih jauh memerlukan kalibrasi INP Event Handler Budget karena jendela PiP menambah event listener tambahan.

Pertanyaan Umum

Apakah Document Picture-in-Picture aman di semua browser?

Belum. Chromium 116+ dan Edge sudah mendukung. Firefox dan Safari masih dalam eksperimen. Sediakan fallback side-panel untuk traffic non-Chromium yang biasanya 18 sampai 30 persen di Indonesia.

Berapa biaya engineering untuk implementasi?

Berdasarkan praktik di Vetmo, sekitar 3 sprint dengan satu engineer fullstack senior. Biaya marginal kecil bila tim sudah familiar dengan React Portals atau Vue Teleport.

Apakah API ini menggantikan kebutuhan native app?

Tidak otomatis. PiP membantu retensi sesi web, tapi notifikasi push dan akses kamera latar belakang masih lebih kuat di native. Kombinasi keduanya optimal.

Apakah cocok untuk e-commerce?

Mungkin overkill. Untuk e-commerce, structured data dan [CSS Anchor Positioning](/glosarium/css-anchor-positioning) memberi efek konversi lebih cepat dengan effort lebih kecil.

Insight Aplikatif

Drop-off bukan selalu masalah konten. Sering kali itu masalah arsitektur perhatian. Document Picture-in-Picture API memberi marketer dan developer Indonesia cara untuk merancang ulang kontrak perhatian pengguna, terutama di produk yang menggabungkan video dan informasi pendamping. Pertimbangkan API ini bila sesi pengguna idealnya melampaui satu halaman.