Simple 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
Social Media
| Name | Rewritten Description |
|---|---|
| Number of Socials | Choose how many socials to include in the rotator (1–5). |
Note: Fields for Social 2–5 appear only if the chosen number is high enough. Selecting the "Custom Platform" enables an icon upload field.
Social 1-5
| Name | Rewritten Description |
|---|---|
| Platform 1-5 | Pick the platform (YouTube, Twitter/X, Instagram, TikTok, Twitch, etc., or Custom Platform). |
| Custom Icon 1-5 | Upload a square icon (e.g., 64×64 PNG) if you selected Custom Platform. |
| Call to Action 1-5 | Short text shown above the username (e.g., FOLLOW ME). |
| Username/Handle 1-5 | Your username/handle for this platform. |
Animation Settings
| Name | Rewritten Description |
|---|---|
| Widget Display Mode | Choose when the widget appears: Always Visible, Show/Hide on Command, Timed on Command, or Loop All Socials on Command. |
| Widget Command | The chat command viewers use to control the widget (e.g., !socials). Required for non-Always modes. |
| Who Can Use the Command? | Restrict the command to Everyone, Subscribers, VIPs, Moderators, or Broadcaster. |
| Show Duration (seconds) | How long the widget stays visible after the command (Timed mode). |
| Number of Loops | How many times to cycle through all socials after the command (Loop mode). |
| Social Switch Interval (seconds) | How long each social stays on screen before switching. |
| Transition Animation | Choose the transition style between socials (Fade, Slide, Flip, Zoom, etc.). |
Appearance Settings
| Name | Rewritten Description |
|---|---|
| Widget Background Color | Set the overall background color (supports transparency). |
| Widget Border Color | Set the border color around the widget background (supports transparency). |
| Widget Border Thickness (px) | Control the thickness of the widget border. |
| Widget Glow Color | Color of the glow around the widget background (supports transparency). |
| Widget Glow Size (px) | Control the blur/spread size of the widget glow. |
| Icon Background Color | Background color behind the platform icon (supports transparency). |
| Icon Border Color | Border color around the icon background (supports transparency). |
| Icon Border Thickness (px) | Control the thickness of the icon background border. |
| Icon Glow Color | Color of the glow around the icon background (supports transparency). |
| Icon Glow Size (px) | Control the blur/spread size of the icon background glow. |
| Icon Foreground Color | Color of the icon itself (SVG/image). |
| Icon Foreground Glow Color | Color of the glow applied to the icon itself (supports transparency). |
| Icon Foreground Glow Size (px) | Control the blur/spread size of the icon’s foreground glow. |
| Active Dot Color | Color of the active navigation dot under the card. |
| Inactive Dot Color | Color of inactive navigation dots (supports transparency). |
| Widget Font | Select the Google Font used for all text. |
| Text Color | Color of all text elements. |
⚠️ 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!