Decoding Picture-in-Picture (PiP) Web APIs for Salesforce Integration

In today’s digital landscape, the Picture-in-Picture (PiP) feature has become a powerful tool for enhancing user experience across web applications, from video conferencing to streaming services. This functionality enables media content to remain visible in a small, floating, resizable window, allowing users to multitask across different tabs and applications. But how can PiP be leveraged within the Salesforce ecosystem? Let’s explore the potential of PiP, key features, limitations, and possibilities in Salesforce.

Image/GIF Credits - Google Meet Help

What is PiP in Web Browsers?

Picture-in-Picture (PiP) is a browser feature that allows media content, such as video or audio, to continue playing in a small, overlaying window while users navigate other parts of the web. Popular platforms like Google Meet and Zoom extensively use PiP, enabling users to keep essential interactions visible without interrupting their browsing experience.

Key Features:

• Floating, Resizable Window: The PiP window remains on top of other tabs, allowing continuous visibility of media content.

• Media and Non-Media Integration: Originally designed for media, PiP now supports custom, non-media applications as well.

• API Control: Developers can programmatically trigger PiP using the PiP API, enabling flexibility in user interactions.

Exploring PiP in Salesforce: Practical Applications and Demos

Our team explored the feasibility of integrating PiP into Salesforce in the video demonstration. Here’s a breakdown of our findings:

1. Media Content in Salesforce: We experimented with a Lightning Web Component (LWC) that accesses the user’s camera within a PiP window, similar to Google Meet’s PiP view. This application shows the potential for Salesforce components, such as live camera feeds, to function smoothly in PiP mode. However, auto-triggering PiP for non-media content is restricted, requiring manual activation by the user.

2. Non-Media Content Integration: Beyond media content, we showcased how standard HTML content could also be used within PiP. In one example, we embedded case information from Salesforce, allowing a service agent to keep track of high-priority cases while navigating across tabs. However, user interaction remains essential when opening PiP windows for such content without browser support for non-media auto-triggering.

3. Nested Components for Complex Interactions: For more complex use cases, such as nested components within an Aura app, PiP offers the flexibility to incorporate multiple LWCs. This approach allows for creating highly functional PiP windows that aggregate data from various Salesforce components, enhancing the efficiency of service agents and other users in high-interaction roles.

4. PiP for Developer Workflows: For developers working on Salesforce applications, PiP can serve as a secondary screen for testing or monitoring changes in real-time. By enabling PiP in the local development environment, developers can streamline workflows, minimize tab-switching, and improve productivity. This use case leverages PiP’s ability to render content in a persistent, resizable window that updates dynamically based on code changes.

Here is a video walk-thru on the same:

Limitations of PiP in Salesforce

While PiP offers exciting possibilities, there are current limitations:

• Browser Restrictions: PiP functionality varies across browsers. Chrome offers full support, but other browsers are at different stages of PiP compatibility, impacting consistent functionality.

• Media-Only Auto-Trigger: Auto-triggering PiP windows are limited to video and audio content, mainly to prevent spammy or intrusive pop-ups.

• Single PiP Window Limit: Only one PiP window can be active at a time. This restriction prevents multiple PiP views from appearing simultaneously, ensuring a focused experience.

The Road Ahead for PiP in Salesforce

With anticipated updates in browser PiP capabilities, there may be new opportunities to integrate PiP more seamlessly in Salesforce applications. For example, service agents could one day have floating, auto-updating PiP views for live customer data or open cases, freeing them from the limitations of manual activation.

As PiP functionality matures, developers and Salesforce professionals should stay informed about emerging API capabilities and browser support, which could unlock a new level of interactivity and efficiency in the Salesforce environment.

Resources

For those interested in exploring PiP APIs and their potential in Salesforce, here are some valuable resources:

• Picture-in-Picture API Documentation

• Chrome Media Updates

• Document Picture-in-Picture Specification

PiP is evolving rapidly, bringing new functionality to the web. Although limited in Salesforce, PiP holds great promise for innovative applications as web standards advance.

Thanks

To Kapil Chauhan – our Sr. Salesforce Consultant, who shared his research and collaborated with us on this video.

Let’s Talk

Got questions? We're here to assist! We hope this guide helps you get deeper insights about Picture-in-Picture (PiP) Web APIs for Salesforce Integration. Feel free to leave a comment below or reach out to us on our social media platforms.

Drop a note with your queries to move forward with the conversation 👇🏻