Shoutout 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 Twitch
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!
🎯 How It Works
The Shoutout Widget is a customizable overlay that showcases streamers you want to highlight to your audience. It displays their profile picture, username, current game, stream title, and live status in a beautiful, animated card format. It has three modes to fit different streaming styles:
Manual Mode - Command-Based Shoutouts
You have complete control over when shoutouts appear. When you or your moderators type !shoutout username in chat, the widget instantly displays that streamer's information. This is perfect for:
- Shouting out raiders who just joined your stream
- Highlighting friends who are supporting you in chat
- Featuring special guests or collaborators
Automatic Mode - Hands-Free Community Support
Create a "watch list" of streamers you want to support automatically. The widget monitors these streamers and shows shoutouts when they:
- Go Live: Widget detects when they start streaming and shows a shoutout
- Chat in Your Stream: Widget shows a shoutout when they visit and chat with you
This mode is ideal for streamers who want to support their community without interrupting their gameplay or content.
Both Mode - Best of Both Worlds
Combines manual commands with automatic detection, giving you maximum flexibility to support your community however feels natural in the moment.
Understanding Cooldowns (Automatic Mode Only)
Cooldowns prevent the same streamer from being featured repeatedly, ensuring variety and preventing your overlay from being dominated by one person. Here's how they work:
Live Trigger Cooldown (15 minutes to 6 hours)
- Example: If set to 2 hours, after someone gets an automatic shoutout for going live, they won't get another "live" shoutout for 2 hours
- This prevents spam if someone has connection issues and goes live/offline repeatedly
Chat Trigger Cooldown (1 to 12 hours)
- Example: If set to 4 hours, after someone gets an automatic shoutout for chatting, they won't get another "chat" shoutout for 4 hours
- This prevents the same active community member from getting featured every few minutes
Important: Manual shoutouts (using !shoutout command) are never affected by cooldowns - you can always manually shout out anyone at any time!
Customization Fields
Basic Setup
| Setting | Description |
|---|---|
| Testing Mode | Shows your own channel info for testing the widget appearance |
| Widget Mode | Choose between Manual, Automatic, or Both modes |
Manual Commands
| Setting | Description |
|---|---|
| Manual Command | The chat command that triggers shoutouts (e.g., !shoutout ) |
| Who Can Use Manual Command | Set permission level: Everyone, Subscribers+, VIPs+, Moderators+, or Broadcaster Only |
| Manual Shoutout Duration | How long manual shoutouts stay visible (3-30 seconds) |
Automatic Triggers
| Setting | Description |
|---|---|
| Automatic Shoutout Users | List of usernames to automatically feature (comma-separated) |
| Automatic Trigger | When to show automatic shoutouts: When User Goes Live, When User Chats, or both |
| Automatic Shoutout Duration | How long automatic shoutouts stay visible (5-45 seconds) |
| Live Trigger Cooldown | Minutes between automatic shoutouts when someone goes live (15-360 minutes) |
| Chat Trigger Cooldown | Hours between automatic shoutouts when someone chats (1-12 hours) |
Content & Display
| Setting | Description |
|---|---|
| Title Text | The main text displayed above the username (e.g., "Go Check Out & Follow") |
| Show Game Title | Display the game/category the streamer is playing |
| Show Stream Title | Display the streamer's current stream title |
Typography
| Setting | Description |
|---|---|
| Font Family | Choose from hundreds of Google Fonts for all text |
Layout & Styling
| Setting | Description |
|---|---|
| Background Card Corner Roundness | How rounded the main card corners are (0-80px) |
| Profile Picture Roundness | How rounded the profile picture is (0-50px for circle) |
| Background Card Border Width | Thickness of the border around the main card (0-8px) |
| Profile Picture Border Width | Thickness of the border around the profile picture (0-12px) |
Text Colors
| Setting | Description |
|---|---|
| Title Text Color | Color of the main title text |
| Username Color | Color of the featured streamer's username |
| Game Text & Icon Color | Color of the game name and gaming icon |
| Stream Title Color | Color of the stream title text |
| Live Indicator Color | Color of the "LIVE" badge when streamer is broadcasting |
Background Colors
| Setting | Description |
|---|---|
| Card Background Color | Background color of the main shoutout card |
| Stream Title Background | Background color behind the stream title |
| Game Background Color | Background color of the game/category section |
Border Colors
| Setting | Description |
|---|---|
| Profile Border Color | Color of the border around the profile picture |
| Card Border Color | Color of the border around the main card |
Effect Colors
| Setting | Description |
|---|---|
| Glow & Shadow Color | Color used for glowing effects and shadows |
| Particle Color | Color of the floating particles (if enabled) |
Glow Effects
| Setting | Description |
|---|---|
| Enable Card Glow | Add a pulsing glow effect around the main card |
| Enable Profile Picture Glow | Add a pulsing glow effect around the profile picture |
| Enable Username Glow | Add a glowing text effect to the username |
Visual Effects
| Setting | Description |
|---|---|
| Enable Floating Particles | Add animated particles floating across the widget |
| Enable Decorative Elements | Show decorative graphics in the background |
| Animation Duration | How fast the widget animations play (0.3-2.0 seconds) |
💡 Tips for New Users
Getting Started
- Enable Testing Mode first to see how your widget looks
- Choose your Widget Mode based on your needs
- Set up Manual Commands if you want chat-triggered shoutouts
- Add Automatic Users if you want hands-free shoutouts
Best Practices
- Manual Mode: Great for interactive streams where you want to control exactly when shoutouts appear
- Automatic Mode: Perfect for supporting your community without interrupting your gameplay
- Cooldowns: Set longer cooldowns for active chatters, shorter for live notifications
- Duration: Shorter durations (8-12 seconds) work well for fast-paced streams
⚠️ 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!