Simple Reminder 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
Behavior Settings
| Name | Description |
|---|---|
| Widget Mode | Choose how the widget appears: Command-triggered, Automatic (Timer), Always Visible, or Stream Events |
| Command | Set the chat command that triggers the widget (e.g., !reminder) |
| Permission Level | Control who can trigger the widget with commands (Broadcaster/Channel Owner, Moderator, VIP/Member, Subscriber, or Everyone) |
| Show Duration | Set how long the widget stays visible when triggered (in seconds) |
| Hide Duration | Set how long the widget stays hidden in Automatic mode (in seconds) |
Event Settings
| Name | Description |
|---|---|
| Show on Follows/Subscribers | Display widget when someone follows your Twitch channel or subscribes to your YouTube channel |
| Show on Subscriptions/Members | Display widget when someone subscribes on Twitch or becomes a member on YouTube |
| Show on Donations/Tips | Display widget when you receive a donation or tip |
| Show on Cheers/SuperChats | Display widget when you receive Bits on Twitch or SuperChats on YouTube |
| Show on Raids | Display widget when your channel gets raided |
Content Settings
| Name | Description |
|---|---|
| Text Content | Enter your reminder message text, using {{text}} to highlight important parts |
Design Settings
| Name | Description |
|---|---|
| Widget Width | Adjust the overall width of the widget |
| Widget Height | Adjust the overall height of the widget |
| Corner Roundness | Control how rounded the corners of the widget are |
| Background Color | Choose the main background color for the widget |
| Border Color | Select a color for the widget border |
| Border Size | Set the thickness of the border (0 for no border) |
| Layout Type | Choose between "Icon Left, Text Right" or "Icon Right, Text Left" |
| Icon-Text Spacing | Set the space between the icon and text |
Typography Settings
| Name | Description |
|---|---|
| Font | Select from available Google Fonts for your text |
| Font Size | Adjust the size of your text |
| Text Color | Choose the color for your regular text |
| Highlight Text Color | Set a color for highlighted text portions |
| Highlight Text Bold | Make highlighted text bold or normal weight |
| Highlight Text Italic | Apply italic style to highlighted text |
| Text Alignment | Align text to the left, center, or right |
Icon Settings
| Name | Description |
|---|---|
| Show Icon | Toggle icon visibility on/off |
| Icon Type | Choose between built-in icon or custom uploaded image |
| Built-in Icon | Select from a variety of built-in SVG icons |
| Custom Icon | Upload your own image to use as the icon |
| Icon Size | Adjust the size of the icon |
| Icon Background Color | Set a background color for the icon area |
| Icon Border Size | Add a border around the icon |
| Icon Border Color | Choose a color for the icon border |
| Icon Corner Roundness | Control how rounded the corners of the icon are |
Glow Effect Settings
| Name | Description |
|---|---|
| Main Frame Glow Intensity | Adjust the strength of the glow around the main widget |
| Main Frame Glow Radius | Control how far the main glow extends |
| Main Frame Glow Color | Choose a color for the main frame glow |
| Icon Glow Intensity | Set the strength of the glow around the icon itself |
| Icon Glow Radius | Adjust how far the icon glow extends |
| Icon Glow Color | Choose a color for the icon glow |
| Icon Frame Glow Intensity | Control the strength of the glow around the icon's frame |
| Icon Frame Glow Radius | Adjust how far the icon frame glow extends |
| Icon Frame Glow Color | Select a color for the icon frame glow |
| Highlight Glow Intensity | Set the strength of the glow around highlighted text |
| Highlight Glow Radius | Control how far the highlight text glow extends |
| Highlight Glow Color | Choose a color for the highlight text glow |
Animation Settings
| Name | Description |
|---|---|
| Animation Type | Choose the main widget animation: None, Fade, Slide, or Scale |
| Animation In Duration | Set how long the entry animation takes (in seconds) |
| Animation Out Duration | Set how long the exit animation takes (in seconds) |
| Animation Easing | Select the timing function for the animation: Linear, Ease, Ease In, Ease Out, or Ease In Out |
| Text Animation Type | Choose from: None, Character Wave, Characters From Bottom, Fade In, Slide Up, Slide Down, Slide Left, or Slide Right |
| Text Animation Duration | Control how long the text animation lasts (in seconds) |
| Icon Animation Type | Select from: None, Pop In, Spin In, Bounce, or Fade In |
| Icon Animation Duration | Set how long the icon animation lasts (in seconds) |
⚠️ 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!