We’ve all been in a busy stream with hundreds chatting all at once, and we all wish that could be our stream. But what happens when your live stream starts gaining a lot of chatty chatters? How do you deal with it?
Additionally, under Alert Types, it is possible to further customize each individual alert with different icons, colors, and sounds by clicking on the desired alert type and making the necessary adjustments in the pop-up window. Below you will find a list of all media formats that are currently compatible with Twitch Alerts. Twitch Alert Sounds Free Listening on SoundCloud. Help your audience discover your sounds. Let your audience know what to hear first. With any Pro plan, get Spotlight to showcase the best of your music & audio at the top of your profile. Learn more about Pro. Where to get Alert Sounds for Twitch, YouTube, and Facebook. After you click the plus sign you can browse our sound gallery. The gallery includes a variety of free and premium sounds. Unlock premium sounds by subscribing to Streamlabs Prime. We've curated dozens of modern sounds exclusively available to you.
Although there are plenty of brilliant Twitch bots that you can use, nothing beats another person keeping control of your chat, keeping users entertained and just letting you focus on your stream and the gameplay.
Are you looking to learn more about Twitch’s chat rules or looking for some good examples? We’ve written about that too and you can find it here:
What are moderators?
Commonly known as ‘Mods’, moderators keep your chat organised, conversation flowing and up to the standards of rules created by streamer. You can tell who is a moderator by the ‘green sword’ icon next to their name.
Do I need a moderator?
It comes down to a couple of questions:
- If you are being mercilessly trolled or spammed, then definitely yes.
- Is your chat is busy and you can’t keep up with it, then you probably do.
- If you prefer to focus on the gameplay and getting headshots, then it is worth considering.
Next up, how do you choose a moderator for your stream?
How to choose a moderator for your stream
If you have any trusted close friends who watch your stream, day-in and day out, they are the first that come to mind as moderators for your channel.
Loyal viewers come next, those you know will be there day-in, day-out and will look after your stream for you.
How do you make somebody a moderator?
Using the chat command functionality, you are able to make somebody a mod by using the following:
This command will allow you to promote a user to a channel moderator.
How do you unmod somebody on Twitch?
To unmod, you use the following chat command:
There are loads of other chat commands, let’s go through some of them here.
What are mod commands and how do you use them?
Both streamers and moderators have a number of commands and features that allow them to moderate their stream and channel chat. I have listed the commonly used ones here:
- Change your name colour: /color <colorname>
- Ban a user from your chat: /ban <username>
- Time a user out for a specific time: /timeout <username> [seconds]
- Limit chat to subscribers only: /subscribers
- Host another channel: /host <channel>
- Change chat to emote only: /emoteonly
- Change a user to a moderator: /mod <username>
- List all the channel’s VIPs: /vips
Twitch has produced a full list of all the available chat commands here: Chat Commands
You are able to create your own commands by using a moderator bot, you can learn more about these in our guide to Twitch Tools.
Do twitch moderators get paid? — No, unless there is a special circumstance where a media company (such as IGN) is streaming, it is very unlikely that they get paid.
Are there any guides about being a moderator? — There is a great post by @JugoLama on being a moderator here, and another great post here.
Want to learn more about us? You can find out here here:
- Who Are We? — theemergence.co.uk/who-are-we/
- Our Twitch Guides — theemergence.co.uk/guides/
- Twitter — twitter.com/emergencegg
- Twitch — twitch.tv/theemergence
- Discord — discordapp.com/invite/VxFA7Xc
P.S. There are more useful guides on this across the internet:
What is a Twitch Extension?
A Twitch Extension is a webpage that sits inside Twitch and communicates with Twitch to provide extra functionality. For example, the Hearthstone Deck Tracker extension adds an interactive overlay allowing viewers to browse through the cards the streamer is using and their effects.
Twitch Extensions can appear in one of three views:
- Panel Extension - Displays in a box under the video.
- Overlay Extension - Displays on top of the whole video as a transparent overlay.
- Component Extension - Displays as part of the video, taking up part of the screen. Component Extensions can be hidden by viewers.
How do Extensions work?
A Twitch Extension sits in a specially sandboxed iframe inside Twitch and communicates with its parent via
What can I do with an Extension?
Being a webpage, an extension can do almost anything you can already do on the web, such as play sounds and show video. We provide some special functionality for you including:
|[Posting in Chat]||[Read Information about the Game and Video]|
|[Follow Channels][Twitch.ext.actions.followChannel]||[Get the user’s Language]|
[Client Query Parameters]
|[Get Subscription Status][isSubscriptionStatusAvailable]|
Build your first Extension
It’s easier than you might think to make a simple Twitch Extension. Extensions are simply webpages, and the only basic requirement is to import the Extension Helper.
Here’s an extension that just says ‘Hello, world!’:
Configure the Extension
Configuring an Extension requires a few steps:
Visit https://dev.twitch.tv/console/extensions, and click Create Extension.
Type a unique name for your new Extension.
- Pick a type for your Extension. For this example, we’ll use a Panel Extension.
- Fill in any optional fields you choose.
- After filling in the optional fields, click Create Extension Version. You now have an extension!
- Click View on Twitch and Install to add your extension to your channel. The config window should be blank.
- Close the config window and click the Activate button on your extension. Choose a slot for the extension. Now it’s added to your channel!
Extensions needs to know what the starting point is for your panel. Set the
Panel Viewer Path to
index.html (the name of our panel HTML file).
Package your Extension
When you send Twitch an Extension, you need to bundle the Extension files into a zip file. Make sure you are bundling the files, not the folder containing your Extension files.
To upload your zip file to Twitch, choose Files > Upload Version in Assets > Choose File. Then click the purple Upload button at the bottom.
Now we’re ready to move to Hosted Test. Click Next Step in the top right, click Move To Hosted Test, and confirm your choice.
If you go to your Twitch channel now, you’ll see your Extension!
Unless you’re in dark mode, in which case the black text won’t show up against the black background. To fix that, repeat the previous steps, this time changing the text color.
Develop your Extension
The easiest way to develop your extension is probably to use the
Local Test function. This points Twitch Extensions to your local computer, letting you develop and update Extensions on the fly, while seeing the results in Twitch.
By default, your base URI, where we look for the extensions files, is set to
https://localhost:8080/. Note the
https in this URL. Because Twitch is served over HTTPS, your browser will reject the extension unless it’s also served over HTTPS. Depending on your operating system, convincing your browser your extension is safe can be a bit tricky.
localhost: the easy way
Technically speaking, HTTPS doesn’t make a lot of sense when it comes to loading your local extension. HTTPS encrypts information in transit as it goes over the internet and makes it secure, but if you’re just communicating from your local machine to your local machine there’s not really anyone who could intercept and decrypt it. As a result, a few browsers either accept locally hosted content as though it were HTTPS, or have a flag to do so.
We recommend using Google Chrome. In the browser, enable the flag
allow insecure localhost. To enable this flag, navigate to:
chrome://flags/#allow-insecure-localhost and restarting your browser.
Once you have restarted your browser, open an HTTP server on
localhost:8080, and change the base URI.
An easy way to launch an HTTP server in the folder your
index.html is in is to use Python:
Then, change your base URI in the Asset Hosting page of your control panel from
Now you can skip over the hard way and congratulate yourself on a job well done.
localhost: the hard way
We recommend using a tool called
mkcert, which will create and install an HTTPS certificate. After you install
mkcert, generate a certificate for HTTPS:
Use this certificate to start a server. With Python installed, create a
server.py in the same folder as your
Whether you did it the easy way or the hard way, you got your server started. Now, move back to
local test to have the development version show up:
When you load your page you should see what you saw before:
To be sure, edit the page and then refresh. You can also click the little arrow icon to pop it out to just focus on the extension.
Build an Extension with Create React-App
Since extensions are such front-end heavy applications, it’s common to use modern frontend libraries like React. While these instructions are specific to React, they should extrapolate to other similar frameworks. For this section, please already have extension set to
All you need to start is a working
yarn installation, then you can run
This should take a little while as React gets your development environment set up.
If you’re unfamiliar with
create-react-app, it might be worth running
yarn start in the directory
yarn created. This will launch a server based on the react code in
src/. Any code changes in
src/ will cause live changes to the page
create-react-app just opened. You’ll want to close it before continuing to the next steps.
There are two things we need to do to make this work with Extensions. First, we need to add the Extension Helper, then we need to add HTTPS support to our
To add the Extension Helper, just add the
extension helper script to
Next, set up HTTPS. You can avoid this step in Google Chrome by setting a flag as described previously. If you do that, you can run
yarn start now.
You’ll find install instructions for
mkcert on its Github page.
Save the following script as
Next, make some modifications to
- Run this script to configure HTTPS for anyone who uses your project.
- Require HTTPS on start.
scripts part of your
package.json to modify
start and add
postinstall as shown:
PORT=8080 changes the server to be served at
https://localhost:8080, the default is
https://localhost:3000. You can omit this, but you’ll need to change your Base URI.
yarn postinstall to install your certificates, and
yarn start to start the server.
With your server started, check out your cool new react extension!
Typically, your Google Analytics snippet will look like this:
|Note: If you attempt to store or process any of this data, you will need to be compliant with European GDPR law about capturing IP address information.|
With an Extension, you just need to add this to a file and import it. For example, if you had this saved as
analytics.js, you might import it into your page with
The Google Analytics script just inserts a
<script async='https://www.google-analytics.com/analytics.js'></script>. You might wish to add this to your HTML directly, and instead call the
Typically, an extension cannot load fonts outside of a Twitch Extension. This helps to prevent sneaky font attacks.
However Google WebFonts is allowed. Both of the forms allowed by Google WebFonts will work:
Pushing announcements to Extensions
Twitch Extensions can use PubSub to push out real time notifications to all extensions at once. This is a robust service based on the same technologies as Twitch Chat.
The Bits Support config allows this extension to use APIs to request bits from the user via the
The Base URI is the location of the folder containing your extension used in local testing. When an extension in testing loads, the Base URI is combined with the Panel Viewer Path, or Config Path, to work out where to load your web content from. Unlike a web origin it must end with
For example, if loading a Panel Extension in testing with Base URI
https://localhost:8080/ and Panel Viewer Path
index.html?view=panel, the Extension will load
Panel Viewer Path
The Panel Viewer Path is the path that will be loaded when a Panel Extension is loaded. It is combined with the Base URI to decide what location to load an extension from when an extension is in Local Test.
The Panel Height is the height in pixels of this extension when displayed as a Panel Extension on a broadcaster’s channel.
The Config Path is the path that will be loaded when the config for an extension is shown to a broadcaster. It is combined with the Base URI to decide what location to load when an extension is in Local Test.
Live Config Path
The Live Config Path is the path that will be loaded when the extension is viewed from the Live module of the Twitch Dashboard. The streamer can then take actions via this page without leaving their dashboard. It is combined with the Base URI to get the full URL to load when an extension is in Local Test.
Type of Extension
The Type of Extension configuration field allows you to select how you want your Extension to be displayed. If an Extension type is not picked here, a user of your Extension will not be able to use it in that way. For example, if the ‘Panel’ Extension type is not picked, a user of this extension will not be able to activate it as a Panel Extension.
Initially, an extension does not have access to the identity of the user that is using it.
Twitch.ext.onAuthorized will return a special kind of
userId called an Opaque Identifier. Opaque Identifiers come in two types:
|Type||State||Persistent across sessions?|
|Anonymous||User is logged out of Twitch||No|
|Unauthorized||User is logged into Twitch||Yes|
Good Twitch Alert Sounds
If a user is logged into Twitch, you will get an opaque
userId starting with
U-. This allows you to uniquely identify the user across sessions even before knowing who they are, but does not disclose their identity.
If the user is not logged into Twitch, you will get a
userId starting with
A-. This identifier will change between sessions.
A Panel Extension sits with the rest of the user profile content at the bottom of a Twitch channel.
An Overlay Extension displays on top of the whole video as a transparent overlay.
How To Get Custom Twitch Alert Sounds
A Component Extension displays as part of the video, taking up part of the screen. Component Extensions can be hidden by viewers.
The Extensions system deploys heavy sandboxing and Content Security Policy constraints to make it extremely hard to abuse an Extension. These elements make up the extensions Security Model.
ext-twitch.tv is the host for all Extensions. For historical reasons, subdomains of a domain like
myextension.twitch.tv are given certain access rights over
twitch.tv. For example, due to historical Cookie Security policies,
myextension.twitch.tv can add cookies to
twitch.tv, potentially overwriting a user’s existing session.
For this reason, Twitch Extensions are all based on ext-twitch.tv. This causes the web browser to treat twitch Extensions as entirely separate to
ext-twitch.tv is also the host of the Extension Supervisor, which embeds the extensions themselves.
The Extension Supervisor is located at
supervisor.ext-twitch.tv. When an Extension loads in Twitch, Twitch embeds the Extension Supervisor and sends a message to the supervisor indicating what extension to load.
The supervisor generates a Content Security Policy
frame-src directive that prevents the Extension from loading anything other than the Extension, and then embeds the Extension itself as an iframe.
This prevents bad actors from making an Extension load content which isn’t vetted by the Extensions Review Process.
Restrictions on content
|Content Type||Policy Name||Allowed|
|Default||Only the extension’s own files and the Extension Helper|
|Sound and Video||✅ All|
|CSS||✅ In |
|Fonts||✅ Google WebFonts and the extension’s own files|
|Embedded iframe content||❌|
Content Security Policy is a relatively new set of protocols that help to prevent hackers and other bad actors from taking over web content. Twitch Extensions’ policy specifies what kind of content can be loaded and from where. Since attackers goal is usually to inject their own code, the policy prevents nearly all cross-site scripting and redress attacks.
For reference, here’s Twitch Extensions’ current Content Security Policy:
Default restrictions on content
default-src is a Content Security Policy directive that is used as a fallback for all content that doesn’t have a specific policy associated with it.
For a Twitch Extension, this is the Extension’s own origin. That is, where there is no other specific policy, an Extension may only load its own files.
Restrictions on fonts
font-src is a Content Security Policy that restricts where fonts can be loaded from. In the case of extensions, this is set to
https://fonts.gstatic.com. This allows use of Google WebFonts while helping to prevent sneaky font attacks.
Restrictions on CSS
style-src is a Content Security Policy directive that restricts where style information can be loaded from. In the case of extensions, this is set to
https://fonts.google.com. This means that stylesheets such as CSS can be loaded from the extension’s own files, Google WebFonts, and injected directly into the HTML.
This means that without proper cross-site scripting protection, an attacker can change the styles of a Twitch Extension.
Restrictions on scripts
https://www.google-analytics.com. This means an extension can only load scripts from itself,
https://extension-files.twitch.tv (where the Extension Helper is located), and from Google Analytics.
For extensions, this is any
Restrictions on images
img-src is a Content Security Policy directive that restricts where a webpage can load images. For a Twitch Extension, this policy allows
Restrictions on media
media-src is a Content Security Policy directive that restricts where a webpage can load video and sound from. For a Twitch Extension, this policy allows
Restrictions on Iframes
frame-src is a Content Security Policy directive that restricts what pages can be embedded in a webpage. In the context of a Twitch Extension, the Extension Supervisor sets a
frame-src that prevents anything but the Extension itself being embedded.
Restrictions on browser APIs
|Popup windows (of webpages)||✅|
|Have own web origin†||✅|
|Downloads without user interaction||❌|
|Lock the orientation of the screen||❌|
|Lock the pointer to the extension||❌|
|Start a presentation session||❌|
|Access Twitch cookies with user confirmation||❌|
|Navigate Twitch to somewhere else||❌|
|Navigate Twitch to somewhere else, if the user clicks a link||❌|
† allows the Extension to load its own content, use CORS, and set and read cookies amongst other things.
Extensions use iframe sandboxing to prevent Extensions messing with Twitch without permission. This includes opening popups that might appear to be from Twitch, locking the cursor to the Extension amongst other things. The current sandbox configuration is: