Twitch Widget Setup Instructions

In order to help you set up your new widget, we’ve created a thorough set of instructions to help! Of course if you’re experiencing trouble, or would like some help, feel free to email info@antpace.com for assistance.

Step One: Unpacking Your Widget
Step Two: Setting Up Your Twitch Token & Settings
Step Three: Adding the Widget to OBS/Streamlabs
Troubleshooting
Support

Step One: Unpacking Your Widget

1. Locate the ZIP file you downloaded after purchase.
2. Extract (unzip) the file:
– On Mac: double click the ZIP file.
– On Windows: right click and select Extract All.
3. A new folder will appear with all the necessary files. You can delete the ZIP now.
4. If you want, now is the time to move the new folder to wherever you keep your other stream stuff.

Step Two: Setting Up Your Twitch Token & Settings

1. Open your web browser and go to: https://twitchtokengenerator.com
2. Log in with your Twitch account.
3. Scroll down and click Generate Token! and approve permissions.

4. Copy your Access Token and Client ID from the generator page. Do not share this with anyone - it is like a password.

5. Find the settings.js file in the widget folder.
6. Right click and select ‘Open with’ to open this file in a text editor (TextEdit on Mac, or Notepad on PC). open the file

Now edit your settings.js file with the following template:

const SETTINGS = {
              TOKEN: "PASTE_YOUR_ACCESS_TOKEN_HERE",
              CLIENT_ID: "PASTE_YOUR_CLIENT_ID_HERE",

              // Twitch username to track
              LOGIN: "ENTER_YOUR_TWITCH_USERNAME",

              // Viewer goal threshold
              THRESHOLD: "50",

              // Hide viewer count text (true/false)
              HIDE_COUNT: false,

              // Hide widget until this % of goal is reached (0–100)
              HIDE_UNTIL_PERCENT: "0",

              // Theme Options: "pink", "blue", "moon", "fire", "donut"
              THEME: "blue"
            };

Notes:

You can change HIDE_COUNT to true if you don’t want the viewer count numbers displayed.
You can change HIDE_UNTIL_PERCENT to a number string (e.g., "50") if you want the widget to stay hidden until a certain percentage of the goal is reached.
You can change THEME to one of the following options: "pink", "blue", "moon", "fire", "donut".

MAKE SURE YOU SAVE THE FILE!

Step Three: Adding the Widget to OBS/Streamlabs

1. Open OBS Studio or Streamlabs.
2. Add a new Browser Source.
add new browser source 3. Check Local File, then click Browse and select index.html from the widget folder.
add local file 4. Click OK, then resize and position your widget where you like it on your stream preview.

Troubleshooting

– Widget not updating? Make sure your token and client ID are copied correctly.
– OBS not showing widget? Check that 'Local File' is ticked and you selected index.html.
– Reached the goal? The widget will celebrate once 100% is hit. If viewers drop below, the goal resets automatically.

Support

If you need help, reach out to: info@antpace.com

You can download these instructions as a PDF.

Buy Now on Etsy