A simple extension that demonstrates how to send chat messages to a channel. See the relevant API endpoint for more information.
The component/panel extension allows a broadcaster to start and stop an arbitrary giveaway. For simplicity's sake, each individual "prize" is the Twitch user ID of that viewer. Each time a new giveaway is started, a chat message is sent to alert the viewers and direct them to claim their prize in the extension. This is especially useful when the extension is used as a component that exists in a minimized state.
- A Twitch Extension
- (Optional) An HTTP server to host the front-end code. For example, you can install http-server via NPM.
- Create a new extension. This sample supports
Panel
andVideo - Component
anchor types as well as aMobile
view. - If you are testing locally, update the extension's
Testing Base URI
(see https://dev.twitch.tv/console/extensions/CLIENT_ID/0.0.1/asset-hosting) tohttp://localhost:8080/
to avoid having to serve assets over HTTPS in development. - If you would like to run the extension with the assets hosted by Twitch, you can upload a .zip of the project on the Extension Console under
Files
. - Update the extension's paths to
extension.html
. The Config Path should also be updated toconfig.html
, and the Live Config Path should be updated tolive_config.html
. - Install and configure the extension on your channel (see https://dev.twitch.tv/console/extensions/CLIENT_ID/0.0.1/status) by clicking on the
View on Twitch and Install
button.
- Host the frontend files either locally, or upload the assets and move to Hosted Test. If you're using
http-server
you need to runhttp-server
from the thesrc
directory to host the assets. - If the extension is a component, start streaming on your channel.
- In Local Test, browsers such as Chrome will not load mixed HTTP and HTTPS content. As such, you need to manually allow the execution of the extension. To do so, click the shield icon in the browser URL bar and then
Load Unsafe Scripts
.
- You can then start and stop giveaways from the extension's live configuration window found in the broadcaster's live dashboard.