Updating Component Extensions: Twitch Client Beta

We recently announced an upcoming design update to component Extensions that will change the way streamers and viewers activate and interact with them. Developers have to make UI changes to their component Extensions by July 31 to capture the benefits in adoption and engagement the new model will provide.

Introducing the Extensions Sidebar

Our goal is to provide the canvas for all Extensions on Twitch to shine. When component Extensions were released, it was expected that streamers would install multiple Extensions on their channels and provide complementary experiences to their viewers. Instead, we saw that few streamers installed more than one Extension despite the great work done by developers. Since launch, it has become clear to us that we needed to improve the product. To understand how, we conducted extensive user research and came away with the following conclusions.

Component Extensions need to:

• Be easy to find and intuitive to interact with

• Prioritize the video first

• Be consistent to set up and activate on a channel

To improve the channel experience for everyone, the Extensions Sidebar will be the new design model for component Extensions. This means that component Extensions on all channels will live in the sidebar by default, and they will render on the channel in the minimized state.

By standardizing where components live on the channel, the Extensions Sidebar makes it easier for viewers to find and interact with them. For viewers, this means faster recognition of an Extension than in the previous model where Extensions could be placed anywhere on the video.

Similarly, by simplifying the configuration process, we’re taking the guesswork out of activating Extensions for streamers. Now they don’t have to worry about positioning Extensions that obstruct the video experience for viewers in unexpected ways. Consistent placement will give streamers the confidence to activate more Extensions on their channel because they can predict how a new Extension will interact with their content.

We believe that these changes will result in greater adoption of the incredible interactions developers have already built and will deliver on the promise of multiple anchor types creating complementary channel experiences.

Building Differently

To take advantage of this new design framework, developers have to make UI changes to their existing Extensions prior to GA on July 31. Following the GA launch of the Extensions Sidebar, we’ll be providing a 30-day window for developers to finalize and deploy updates to any Extensions that were not updated ahead of launch. Extensions that have not been updated for the new Sidebar design may have component support disabled until a compliant update is released after those 30 days.

This new UI model improves the way developers build components by taking away some of the complexity involved with supporting multiple states and increasing the prominence of the panel width and icon size. These benefits include:

• No need to create or manage a minimized state

• No need to create your own close/minimize system

• No more transparent iframes blocking interaction

• No more component positioning by streamers

• Components can take more than 50% of the player width when open

• Increased prominence of Extension icons

This change will have minimal impact on the overlay Extension experience. Overlay Extensions will remain visible by default on page load, but if you have elements positioned on the right side of the screen where the Sidebar now lives, you may need to update to accommodate the new Sidebar UI elements.

Learn how to update your component Extension to the new UI by reading the how-to guide. If you run into any issues while testing, please report them on the TwitchDev forum.

Let us know if you have any questions about updating component Extensions by connecting with us on Discord | Twitter | Developer Forum.

Ready to build interactive experiences on Twitch? Start now!