Badge Social Rotator
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!
Setup Guide
- 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
Display & Animation Settings
Controls the widget's visibility, timing, and core animations.
| Name | Description |
|---|---|
| Display Mode | Select the widget's behavior: Automatic Popup , Command Triggered , or Always Visible . |
| Hidden Duration | (Automatic Mode Only) The time in seconds the widget remains hidden between appearances. |
| Badge Rotation Speed | The time in seconds each badge is displayed before rotating to the next. |
| Max Visible Badges | The total number of badges to include in the rotation cycle (from 1 to 10). Badges are included in order. |
| Enable Pulsate Animation | Toggles a subtle, continuous "breathing" animation on the active badge. |
| Enable Gradient Animation | (Requires Pulsate) If enabled, the badge's background gradient will gently rotate as part of the pulsate animation. |
General Styling & Layout
Customize the overall appearance and structure of the badges.
| Name | Description |
|---|---|
| Social Badge Shape | Select the primary shape for the badges from a list of presets (e.g., Circle, Diamond, Heart, Flower). |
| Social Badge Size | Adjust the overall size of the main badge container in pixels. |
| Icon Size | Adjust the size of the social media icon inside the badge in pixels. |
| Social Badge Rotation | Apply a static rotation (in degrees) to the main badge shape for a tilted effect. |
| Badge Shadow Color | Sets the color of the shadow cast by the main badge shape. |
| Badge Shadow Intensity | Controls the blur and spread of the main badge's shadow. |
Typography Settings
Define the font styles for the text elements on the badges.
| Name | Description |
|---|---|
| Main Font | Select the Google Font used for all text elements. |
| Font Weight | Set the weight of the selected font (e.g., Regular, Bold). |
| Username Text Size | Adjust the font size for the username text in pixels. |
Username Badge Styling
Customize the small badge element that displays the username.
| Name | Description |
|---|---|
| Vertical Position | Adjust the vertical offset of the username badge relative to the main badge. |
| Horizontal Position | Adjust the horizontal offset of the username badge. |
| Rotation | Apply a static rotation (in degrees) to the username badge. |
| Shadow Color | Sets the color of the shadow cast by the username badge. |
| Shadow Intensity | Controls the blur and spread of the username badge's shadow. |
Command Settings
Configure the chat command to control the widget.
| Name | Description |
|---|---|
| Widget Command | (Command Mode Only) The chat command (e.g., !socials ) that triggers the widget. |
| Command Permissions | (Command Mode Only) The minimum user level required to use the command (e.g., Everyone, Subscribers, VIPs, Mods, Broadcaster). |
Social Badge Configuration (Badges 1-10)
These settings are configured individually for each of the 10 available social badges. Only badges with a Username filled in will be displayed.
| Name | Description |
|---|---|
| Username | The username or handle to display for the social platform. This field is required to activate the badge. |
| Icon | Select the social media icon from a dropdown list of over 35 presets, or choose Custom to upload your own. |
| Custom Icon | (If Icon is Custom ) Upload your own image to be used as the icon. |
| Icon Color | Sets the color of the selected preset icon. |
| Gradient Color 1 | The starting color of the badge's background gradient. |
| Gradient Color 2 | The ending color of the badge's background gradient. |
| Outline Color | The color of the stroke/border around the main badge shape. |
| Username Badge Color | The background color of the small badge that contains the username. |
| Username Badge Outline | The color of the stroke/border around the username badge. |
| Username Text Color | The color of the username text itself. |
⚠️ 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!