Cute 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
Operation Mode Settings
| Name | Description |
|---|---|
| Operation Mode | Select how the reminder behaves: Command Trigger, Always Visible, or Automatic Pop‑ups. |
| Chat Command | Chat command to trigger the reminder in Command Trigger mode. |
| Command Permissions | Choose who can use the chat command (Everyone, Subscribers, VIPs, Moderators, Broadcaster). |
| Show Duration (seconds) | How long the reminder stays visible in Automatic Pop‑ups mode. |
| Hide Duration (seconds) | How long to wait before showing the next pop‑up in Automatic Pop‑ups mode. |
Style Settings
| Name | Description |
|---|---|
| Animation Speed (seconds) | Controls the speed of entry and exit animations. |
| Icon Scale (%) | Scale of the reminder icon as a percentage of its default size. |
| Corner Roundness (px) | Radius of the widget’s corners in pixels. |
| Border Size (px) | Thickness of the widget’s border in pixels. |
| Decoration Rotation (deg) | Rotation angle for decorative elements. |
| Decoration Offset (px) | Pixel offset for decorative elements’ position. |
| Decoration Shadow Intensity (px) | Blur strength of decorative shadows in pixels. |
| Icon Glow Intensity (px) | Strength of the glow effect around the icon in pixels. |
Content Settings
| Name | Description |
|---|---|
| Reminder Text (use {{text}} for highlighting) | The message displayed; wrap text in {{ }} to highlight it. |
| Icon Type | Select the icon displayed with the reminder. |
| Custom Icon Image | Upload a custom image when Icon Type is set to Custom Icon. |
Typography Settings
| Name | Description |
|---|---|
| Text Alignment | Align reminder text: Left, Center, or Right. |
| Font Family | Select a Google Font for the reminder text. |
| Font Size (px) | Size of the reminder text in pixels. |
| Text Shadow Blur (px) | Blur radius for the text shadow in pixels. |
Highlight Effects Settings
| Name | Description |
|---|---|
| Enable Highlight Glow | Toggle a glow effect on highlighted text. |
| Highlight Glow Color | Color of the glow around highlighted text. |
| Highlight Glow Intensity (px) | Strength of the highlight glow in pixels. |
Layout Settings
| Name | Description |
|---|---|
| Icon Position | Position of the icon within the widget (Top Left, Top Right, etc.). |
Color Settings
| Name | Description |
|---|---|
| Main Background Start Color | First color stop for the widget’s background gradient. |
| Main Background End Color | Second color stop for the widget’s background gradient. |
| Border Color | Color of the widget’s border. |
| Decoration Color | Color of decorative elements. |
| Decoration Shadow Color | Color of the shadow for decorative elements. |
| Icon Background Color | Background color behind the reminder icon. |
| Icon Glow Color | Color of the glow effect around the icon. |
| Icon Color | Base color applied to the icon. |
| Main Text Color | Default color of reminder text. |
| Highlight Text Color | Color applied to text wrapped in {{ }}. |
| Text Shadow Color | Color of the shadow behind reminder text. |
⚠️ 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!