Cute Counter 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 is hosted on StreamElements and works only with StreamElements donations — 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
Layout Settings
| Name | Description |
|---|---|
| Counter Position | Choose where to place the counter; options: Top Right, Top Center, Top Left. |
Label Settings
| Name | Description |
|---|---|
| Label Text | Text displayed under the icon (e.g., Wins). |
| Label Font | Select the font for the label text. |
| Font Size | Set the size of the label text. |
| Font Weight | Choose the thickness of the label font (Regular, Bold, etc.). |
| Text Color | Pick the color of the label text. |
| Background ‑ Color 1 | First color for the label background gradient. |
| Background ‑ Color 2 | Second color for the label background gradient. |
| Border Color | Color of the label border. |
| Border Width | Thickness of the label border in pixels (0 for no border). |
| Corner Roundness | Adjust how rounded the label background corners are. |
| Shadow Color | Choose the glow/shadow color behind the label. |
Counter Settings
| Name | Description |
|---|---|
| Counter Font | Select the font for the counter number. |
| Font Size | Set the size of the counter numbers. |
| Font Weight | Choose the thickness of the counter font (Regular, Bold, etc.). |
| Text Color | Pick the color of the counter numbers. |
| Background Color | Choose the background color of the counter circle. |
| Shadow Color | Choose the glow/shadow color behind the counter circle. |
Main Container Settings
| Name | Description |
|---|---|
| Main Background ‑ Color 1 | First color for the main icon background gradient. |
| Main Background ‑ Color 2 | Second color for the main icon background gradient. |
| Border Color | Choose the color of the border around the main icon background. |
| Border Width | Set the thickness of the main container border (0 for none). |
| Corner Roundness | Adjust how rounded the main container corners are. |
| Shadow Color | Choose the glow/shadow color behind the main container. |
Icon Settings
| Name | Description |
|---|---|
| Icon Type | Select the icon displayed in the main container (e.g., crown, checkmark, custom). |
| Custom Icon | Upload a custom image to use when Icon Type is set to Custom Upload. |
| Icon Color | Pick the color applied to the selected icon. |
| Icon Size | Adjust the size of the icon (from 50px to 150px). |
Command Settings
| Default Command | Action | Example | Description |
|---|---|---|---|
!counter |
Toggle | !counter |
Shows or hides the counter widget |
!add |
Increment | !add or !add 5 |
Adds 1 to the counter (or specified amount) |
!subtract |
Decrement | !subtract or !subtract 3 |
Subtracts 1 (or more) from the counter |
!set |
Set Value | !set 42 |
Sets the counter to a specific number |
!reset |
Reset | !reset |
Resets the counter back to 0 |
Command Permissions: You can set who can use these commands in the widget settings (Broadcaster Only, Moderators & Broadcaster, VIPs & Mods & Broadcaster, Subscribers & VIPs & Mods & Broadcaster, or Everyone)
⚠️ 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!