Retro Social Media 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 Settings
| Name | Description |
|---|---|
| Display Mode | Choose between Automatic Popup, Command Triggered, or Always Visible modes. |
| Hidden Duration (seconds) | Time in seconds between widget appearances in Automatic Popup mode (e.g., 300 for 5 minutes, 3600 for 1 hour). |
| Card Rotation Speed (seconds) | Time in seconds each card stays in front before rotating (2–15 seconds). |
| Transition Animation | Choose from 8 animation styles: Fade, Slide Left/Right/Up/Down, 3D Flip, Zoom In/Out. |
| Number of Socials | Choose how many social media cards to display in rotation (1–5 cards). |
| Enable Card Transitions | Toggle to enable/disable glitch effects during card transitions. |
Layout Settings
| Name | Description |
|---|---|
| Icon Position | Choose to position the icon on the left or right side of the card. |
| Text Alignment | Align text on cards: Left, Center, or Right. |
Typography Settings
| Name | Description |
|---|---|
| Main Font | Select the Google Font used for supporting text (e.g., "Follow Me"). |
| Username Font | Select the Google Font used for usernames/handles. |
| Supporting Text Size | Set the font size for supporting text (12–36px). |
| Username Text Size | Set the font size for usernames (24–72px). |
| Supporting Text Color | Pick the color for supporting text. |
| Username Text Color | Pick the color for usernames. |
Window Styling
| Name | Description |
|---|---|
| Window Background Color | Pick the main background color of the retro window. |
| Title Bar Color | Pick the color of the window’s title bar. |
| Window Border Color | Pick the color of the window border. |
| Window Shadow Color | Pick the color of the window’s shadow. |
| Border Size | Set the thickness of all borders (1–8px). |
| Window Shadow Size | Set the size of the shadow offset (0–20px). |
| Window Corner Radius | Set rounded corners for the window (0–20px, 0 = sharp). |
| Control Square Color | Pick the color of control squares and close button. |
| Content Padding | Set padding inside the content area (10–40px). |
| Window Width | Set the width of the entire window (300–800px). |
Icon Styling
| Name | Description |
|---|---|
| Icon Color | Pick the color of the social media icons. |
| Icon Scale (%) | Adjust the size of icons within their background (50–100%). |
Social Cards Settings
| Name | Description |
|---|---|
| Icon Type | Select from 40+ social icons or Custom Upload. |
| Custom Icon | Upload a custom image when using Custom Upload option. |
| Supporting Text | Text prompt or call-to-action for a card. |
| Username/Handle | Enter your username or handle for a social media platform. |
Command Settings
| Name | Description |
|---|---|
| Widget Command | Chat command to trigger the widget (e.g., !socials). |
| Command Permissions | Choose who can use the widget command: Everyone, Subscribers, Moderators, or Broadcaster Only. |
⚠️ 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!