Channel Point Rewards Showcase Widget
Thanks for downloading our widget!
Here you will find instructions on how to set everything up and an in-depth description of its possibilities.
⚠️ Take note: This widget works only with Twitch Affiliate and hosted on StreamElements — make sure you have a StreamElements account before setting it up!
Widget Installation
- Log in to StreamElements with your Youtube or Twitch account
- Go to the “2. Widget” folder in the package you’ve downloaded
Pick the file that corresponds to your streaming platform (Twitch or YouTube) and double-click to install it.
Voila! Your widget is installed!
Widget Customization
Pick your widget in your StreamElements dashboard and click “Edit”
Click on “Layers” and go to your widget.
- Go to the “Settings” tab
- Woohoo, here you can customize everything to your taste :)
⚠️ IMPORTANT
For all of your customizations to take effect, you need to press "Save" in the top right corner of the editor and refresh the page before adding the widget to your streaming software!
Customization Fields
Widget Header
| Setting | Type | Description |
|---|---|---|
| Show Widget Title | Checkbox | Show or hide the main title at the top |
| Widget Title | Text | The text for your widget title |
| Title Color | Color | Color of the widget title |
| Title Font Size | Slider | Font size of the title (16-60) |
| Title Font Weight | Dropdown | Font weight of the title |
| Show Reward Counter | Checkbox | Show "1/10" style counter |
| Counter Font Size | Slider | Font size of the counter (12-36) |
| Counter Text Color | Color | Color of the counter text |
| Counter Background Color | Color | Background color for the counter |
Display Settings
| Setting | Type | Description |
|---|---|---|
| Rotation Interval | Number | Seconds each reward is shown |
| Show Out-of-Stock rewards | Checkbox | Show rewards even if they're out of stock |
| Reward Sort Order | Dropdown | Sort by name, price (asc/desc), or random |
Reward Appearance
| Setting | Type | Description |
|---|---|---|
| Font | Google Font | Font for reward text |
| Reward Title Size | Slider | Font size for reward title (14-42) |
| Price Font Size | Slider | Font size for reward price (12-36) |
| Reward Title Color | Color | Color for reward title |
| Price Color | Color | Color for reward price |
| Background Color | Color | Background color for reward area |
| Border Color | Color | Border color for reward area |
| Border Width | Slider | Border width (0-10) |
| Icon Corner Radius | Slider | How rounded the reward icon is (0-128) |
| Icon Border Width | Slider | Border width for the reward icon (0-10) |
Alert Settings
| Setting | Type | Description |
|---|---|---|
| Enable Redemption Alerts | Checkbox | Show pop-up when a reward is redeemed |
| Test Redemption Alert | Button | Test the alert pop-up |
| Alert Duration (seconds) | Slider | How long the alert stays visible (3-20) |
| Enable Particles on Alert | Checkbox | Show a burst of particles with the alert |
| Hide Header During Alerts | Checkbox | Hide the main title/counter during alerts |
Alert Sound
| Setting | Type | Description |
|---|---|---|
| Enable Alert Sound | Checkbox | Play a sound with the alert |
| Alert Sound | Sound | Sound to play (upload or URL) |
| Sound Volume | Slider | Volume of the alert sound (5-100) |
Alert Appearance
| Setting | Type | Description |
|---|---|---|
| Alert Text Size | Slider | Font size for alert text (16-42) |
| Alert Background Color | Color | Background color for the alert |
| Alert Border Color | Color | Border color for the alert |
| Alert Text Color | Color | Color of the alert text |
⚠️ IMPORTANT
For all of your customizations to take effect, you need to press "Save" in the top right corner of the editor and refresh the page before adding the widget to your streaming software!
How to Add it to the Streaming Software?
OBS Studio
- Copy the URL of your Widget from the StreamElements dashboard
- Open OBS Studio
- Click “Add Source” (plus icon) in the Sources section.
- Add a “Browser” source, give it a name, and press “Ok”
- Paste the URL you’ve copied
- Set the width to 1920 and the height to 1080
- Press “Ok” and we’re done!
Streamlabs Desktop
- Copy the URL of your Widget from the StreamElements dashboard
- Open Streamlabs Desktop
- Click “Add a new Source” (plus icon) in the Sources section.
- Choose “Browser Source”, give it a name, and press “Add Source”.
- Paste the URL you’ve copied previously
- Set the width to 1920 and the height to 1080
- Now press “Close” and that’s it! Your widget is ready to use!