A panel extension appears in the panel area below the video player. Panel Extensions remain active even when the channel is not live.
Follow these guidelines for Panels:
-
Online/offline — Consider how panels work offline, as well as online. Panels can provide a continued reason for viewers to stay on a stream, even if the streamer is offline.
-
Uses beyond game content — Since panels do not reside on video content, they do not have to be as tightly coupled to the streamer’s content as other types of Extensions. Panels are great for displaying high-level stats about the stream, gear a streamer uses, or other enjoyable content that has no relationship to the content they stream. Panels also can be treated like a mobile web app, housing a game or productivity app..
-
Layout — Panel Extensions are limited to 318px wide x 496px high, to avoid iframe scrolling. Within these limits, try to allow 10px of inner padding for any text within your extension, for maximum readability.
-
Light vs. dark mode — Twitch allows users to switch between the default light theme and a dark theme. Responding to this preference ensures your extension does not stand out in a channel UI when users change their preferences. Below are example palettes we use for Twitch to support light and dark mode. You can listen for a user switching between light and dark mode using the onContextJavaScript helper function.
If you want to support light and dark mode, we recommend the following background colors:Attribute Name Light Mode Background Color Dark Mode Background Color Background Color White #fff Twitch Dark Purple #201c2b Background Color - Accent Twitch Purple #6441A4 Twitch Purple #6441A4
Here are recommended text colors, when supporting light and dark mode:Attribute Name Light Mode Text Color Dark Mode Text Color Default Text Twitch Dark Grey #232127 Twitch Light Grey #e5e3e8 Links Twitch Purple #6441A4 Twitch Light Purple #e2dbf0 Text Overlays Twitch Light Grey #e5e3e8 Twitch Light Grey #e5e3e8