איך להפוך ווידג'ט AI לחלון צף מחוץ לדפדפן עם Document PiP API

דמיינו את יוני. יוני מנהל מערכת לייעוץ משכנתאות מורכבת ברחוב רוטשילד בתל אביב. באתר שלו משולב סוכן AI שקורא טפסים, מנתח תפריטי ריביות ועונה על שאלות סבוכות.

על הנייר, הכל עבד מצוין.

בפועל, הנתונים הראו זליגה מאסיבית של גולשים באמצע השיחה.

הבעיה: הלקוח שואל את סוכן ה-AI, עובר טאב – והשיחה מתה

המשתמשים של יוני נכנסו לצ'אט והתחילו לשאול שאלות. ה-AI ביקש מהם נתון מסוים, למשל גובה החזר מבוקש או עמלת פירעון מוקדם.

בשלב הזה, המשתמש עבר לטאב אחר כדי לבדוק את החשבון שלו.

כשהוא חזר לטאב של יוני? הלשונית רעננה את עצמה, השיחה נקטעה, או שהלקוח פשוט שכח לחזור.

הגדרה · Document Picture-in-Picture API

טכנולוגיית דפדפן מודרנית המאפשרת לפתוח חלון צף מעל שולחן העבודה, שמכיל רכיבי HTML ו-JavaScript מלאים ולא רק נגני ווידאו.

עבודה מול בינה מלאכותית דורשת מהמשתמש מולטי-טסקינג. להכריח את הלקוח להישאר תקוע בטאב בודד זו מכשלה חווייתית קשה.

הניסיון הראשון: פופ-אפים מעצבנים ותוספים שאף אחד לא מתקין

ברגע שיוני זיהה את הבעיה, הוא ניסה פתרונות מוכרים.

הוא ניסה לפתוח חלון דפדפן חדש בעזרת הקוד הקלאסי של window.open. הדפדפנים חסמו אותו מיד כפופ-אפ טורדני. לאחר מכן הוא שקל לבקש מהמשתמשים להוריד תוסף כרום ייעודי.

זה נכשל לחלוטין. אף לקוח לא יתקין תוסף דפדפן רק כדי לבדוק תפריט ריביות.

השיחה נקטעה שוב ושוב.

הפתרון: חלון HTML צף אמיתי מעל לכל המסך

כשהגעתי לבחון את המערכת של יוני, הצעתי לממש את ה-Document Picture-in-Picture API.

בעבר, מנגנון PiP היה מיועד רק לצפייה בסרטוני יוטיוב תוך כדי גלישה. אבל ה-Document PiP API משנה את המשחק. הוא מאפשר לקחת כל רכיב React או HTML – כולל צ'אט AI פעיל – ולהרים אותו לחלון צף עצמאי שצף מעל כל האפליקציות במחשב.

המימוש בקוד פשוט נקי.

בלחיצת כפתור קטנה בווידג'ט, הקוד קורא ל-documentPictureInPicture.requestWindow(). הרכיב עובר כהרף עין לחלון עצמאי. הנה הדגמה בסיסית איך זה עובד בקוד:

async function openAIPiP() {
  const pipWindow = await window.documentPictureInPicture.requestWindow({
    width: 380,
    height: 550,
  });
  
  const widgetContainer = document.getElementById('ai-widget');
  pipWindow.document.body.appendChild(widgetContainer);
}

כעת המשתמש פותח גיליון אקסל, עובר לאתר הבנק, או בודק דוא"ל. חלון ה-AI יושב בפינת המסך, ממשיך לקבל תשובות בזמין אמת, ומאפשר לו להקליד שאלות בלי לעצור את הניתוח.

התוצאות והלקח: UX ב-2026 חייב לצאת מגבולות הטאב

התוצאות אצל יוני היו מיידיות.

בתוך חודש אחד, אחוז השיחות שהסתיימו בהצלחה זינק. המשתמשים לא רק נשארו בשיחה – הם שאלו פי 3 יותר שאלות מורכבות כי החלון ליווה אותם בזמן העבודה.

💡

סוכני AI אינם דפי נחיתה סטטיים. הם כלי עבודה. כלי עבודה חייב להיות זמין למשתמש בכל מקום במסך.

הגבול של הלשונית בדפדפן נשבר. בעזרת כמה שורות קוד, הפכנו את סוכן ה-AI מגימיק בתחתית הדף לכלי עבודה מרכזי שנשאר עם הלקוח בכל מקום.