Pop Out Support for Extensions
The current set of Extension anchor points have enabled some great tools for our broadcasters, but the current form factor of existing Extensions anchor points are a limiting characteristic for developers who would like to build deep, rich, interactive applications on Twitch.
Our proposal is to enable Extensions to be undocked from the channel page completely similarly to how chat pop out works today. This change puts the user experience in the viewers’ hands and provides Extension developers with the dedicated real estate necessary to realize their vision for these compelling experiences.
We want to enable developers to build rich and engaging experiences that can be shared with the entire Twitch community.
Today, the existing set of available Extensions anchor points asks developers to choose between visibility and complete control over available real estate. In panels, developers have a limited region in which to deliver their experience, and viewers have to disengage with the broadcaster’s content in order to scroll down to the panels area. In video overlays and components, developers are encouraged to provide value while not distracting from the content being presented underneath in the video player.
We believe that by adding the ability for viewers to pop out Extensions will make way for new lean-in experiences, particularly for highly interactive and engaging games and applications.
Similarly to the panel anchor, Extensions that are popped out of the channel page will be in complete control of the developer. The window containing the Extension will contain a small amount of Twitch-controlled chrome with information about the Extension, a link to the Extension’s details page, UI for reporting issues, etc. Hosted inside this UI is the iframe containing the developer-controlled user interface representing the Extension experience.
The Extension iframe will resize to take up the full size of the new window, minus the minimal Twitch-controlled UI wrapping the Extension. Extension developers should rely on responsive styling best practices to provide an interface that reacts appropriately to window resizing.
To determine whether the Extension is currently popped out or not, developers can inspect the query string of their iframe for the
popout parameter. While popped out from the channel page, Extension URLs will contain a set of query parameters like this:
On the channel page, viewers will be presented with the option to pop out an Extension in the Twitch UI around the iframe.
Once the Extension is popped out of the channel page, a placeholder will remain on the channel page where the Extension had been previously. The placeholder contains a button to return the Extension to its original position on the channel page.
What about video overlays and components?
Initially, we will roll out pop out support for panel Extensions as well as live configuration views, as their user interfaces most naturally fit the pop out model. We are considering a couple options for enabling pop out support for video overlays and component extensions as a future update:
- Require developers to handle the pop out state provided by query parameter, customizing the user interface for an experience undocked from the channel page.
- Allow developers to specify another view entry point for popped out Extensions, similar to how mobile views work today.