This is the first part of a I don’t know how many parts series on Twitch Extensions. We’ll cover how to develop them, how to EBS them, some notes on Designing and what to avoid, some practices for after release care, and touch on some marketing ideas/things for your Extension Website.
So since this is the first part, we’ll cover the basics first. What, Where, Who, How, and Why of an Extension
What is a Twitch Extension
A Twitch Extension is basically an iFrame that allows a developer to create anything they want, as long as it fits within the Guidelines set out by Twitch, and of course it’s Terms of Service and Developer Agreements
This can range from MiniGames, to QnA/Polling extensions, to Community information extensions, to game information extensions, or play with the Streamer extensions
Some examples include
- Sound Alerts – Lets users pick a sound to play on Stream, can be free or utilize bits/channel points
- Crowd Control – Provides plugins for a variety of games, to allow people to interact with the game, make it easier/harder for the Broadcaster
- Cardboard.live – Lets viewers see what cards are in your current deck, and check the state of the game board, without having to spam/ask in chat
- Borderlands 3 ECHOcast – Lets viewers check out your Borderlands 3 character, and let viewers win extra loot for their own character when the Broadcaster opens Red Chests in game
- Detroit: Community Play – Ask the community to pick/vote on the option when a multiple choice question appears during the game play of Detroit: Become Human.
- The Cohhilition – A community interaction extension, that provides access to various Community things (in this case for a single channel), without having the viewer leave the comfort of the Twitch page
Some of these descriptions are super simple to cover the salient points and many will do more things than my summary covers
Check out more extensions at Twitch’s own Extension Discovery
Where is a Twitch Extension
Twitch being a live streaming site, provides to the Broadcaster, a page, and that page will consist of a number of elements.
Depending on if the streamer is live or not the elements on the page will vary slightly. If the Broadcaster is live, you’ll land on the video/chat page, if the Broadcaster is not live, you’ll land on a “Home”/index style page
Now the part that we care about is the “Chat”/live view page, and on that page you will find a number of sections
- The Video Player
- The live Chat
- The Stream information section – The Title and Category
- A small about the Broadcaster section
- The Panels section
A Twitch Extension can be added to a couple of these sections, and has 3 main (and two auxiliary) integration points.
The Main Integration points
- Video Overlay – The Extension can cover/utilize the whole of the video player
- Panel – The Extension appears in the panels section below the stream, and has width of 318px and a maximum height of 500px
- Video Component – Basically a panel that appears over the video player but is locked to the right hand side of the player, it can utilize a varied amount of the player space
The “main” integration points are mutually exclusive, an Extension can only occupy any one of those slots at once
The Auxiliary Integration points
- Mobile Panel – The Extension is available on mobile for mobile users to interact, it will replace the chat, and dimensions wise basically similar to a panel on PC (in terms of ratio), but you would have to consider landscape views on tablets as well.
- Panel popout – Panel Extensions can be opened in a new window and can be resized by the user at will
An extension can be in one of the “main” integration points, and the mobile point.
Who is a Twitch Extension
As part of being on Twitch, extensions are able to use a number of Extension Features, as well as doing more “regular” Twitch stuff. You could run a regular chat bot that runs with your extension, the Twitch Extension Timeout with bits does this in order to run the actual timeout commands on users
So aside from the “regular” stuff like chat bots, Twitch Extensions have access to some additional features
- Bits Support – Allow Viewers, to exchange bits (a digital good) for various “digital goods” inside Extensions, this could range from an extra vote in polling extensions, or picking a victim in “Timeout With Bits”, or a cool cloak for your character in a game. Revenue generate here is split 80/20 between the Broadcaster/Developer.
- Subscription Support – Allows the Extension to check the subscription status of a viewer on the channel the extension is installed to, avoiding the need for the Extension Developer to get and maintain oAuth access tokens from the Broadcaster “separately” to the install process of the Extension
- Identitiy Link – Allows viewers to “login’ to your extension, we’ll cover this more in a later post in the series
- Chat Capabilities – Allow the Extension to send chat messages (via a HTTP POST request), usually used as a notification system to prompt viewers to perform an action in the extension, like a new poll has started, go vote, for example
- The Configuration Service – We’ll cover this in a later post as well, but it’s a way to store data on Twitch’s server that you can use in the extension, this might be something like, the name of the Broadcasters Character in a game that you would use in an API request to get information about the character
- Streamer Allowlist – allows the Extension Developer to restrict whom can install the Extension to their channel
We’ll cover each Capability/feature in future blog posts in the series
How is a Twitch Extension
We’ll cover this more, in depth in later posts, a Twitch Extension is a bundle of files uploaded to the Extension CDN (Content Delivery Network). This needs to include your HTML, JS, CSS, and any static images you want to store on the CDN (pretty handy for background images for panel extensions). Twitch has some restrictions on what an extension can load from external sources, but essentially images are fine, CSS/JS is not, CSS/JS must be local/included.
Those files are uploaded to a sub domain of Twitch, into a particular sub folder tree on that sub domain, which we will cover more in depth in a later post, when we talk about building extensions and a suitable way to test them and some related gotchas.
All Twitch Extensions have their bundles uploaded to the Twitch and before they are released (or updated) to the masses, the Twitch Extension Review team will review the Extension, to ensure it works as intended, there is no major bugs effecting activation, the Extension compiles with the Guidelines and Terms of Services, and most importantly contains nothing malicious to interfere with the Twitch website or the viewer using the extension Computer/device
A Twitch Extension is allowed to communicate offsite, the resource just has to be secured over SSL, this is commonly referred to as an EBS or Extension Backend Service, we’ll cover this more later as well!
Why is a Twitch Extensions?
But Why is a Twitch Extension (any use) I hear you cry?
A Twitch Extension provides ways for the Streamers Community to perform rich interactions, without leaving the Twitch Broadcasters page, which means you keep the Viewer watching the Stream or interacting with Chat, with relatively easy access to Twitch API’s, without long additional steps for Viewer Authentication
Summary
That is it for Part 1 in this series on Twitch Extensions, I’ve cover the basic What, Where, Who, How of Twitch Extensions
Parts will either be weekly or bi-weekly, we will see how we go!
BUT MOTHER I CRAVE VIOLENCE
Well, until I write the next part if you want to read more about the Developer Side of Extensions, you can pop a visit over the to the Documentation or take a look at Twitch’s Introductory Page and you can always join us on the “TwitchDev Discord Server”, visit the Developer Support Page for the current invite link!
Were the sub headings supposed to make sense? No not really.
Why you think you are good enough to even write blog posts on Extensions? I made a one or two of them Extensions of various types.