Cute Welcome 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
Display Mode Settings
| Name | Description |
|---|---|
| Display Mode | Select how the welcome appears: Automatic Pop‑up, Command Triggered, Stream Events, or Always Visible. |
| Visibility Duration (seconds) | Duration the widget stays visible before hiding (for non‑always modes). |
Automatic Mode Settings
| Name | Description |
|---|---|
| Pop‑up Frequency (seconds) | Interval in seconds between pop‑ups in Automatic Mode. |
Stream Events Settings
| Name | Description |
|---|---|
| Show on Follow | Display welcome when someone follows. |
| Show on Subscribe/Resub | Display welcome on subscriptions and resubscribes. |
| Show on Gift Sub | Display welcome on gifted subscriptions. |
| Show on Raid | Display welcome when a raid occurs. |
| Show on Cheer | Display welcome when someone cheers. |
| Minimum Bits to Trigger | Minimum bits required to trigger the welcome on Cheers. |
| Show on Tip/Donation | Display welcome on tips or donations. |
| Minimum Tip Amount to Trigger ($) | Minimum donation amount to trigger the welcome. |
| Event Cooldown (seconds) | Minimum time in seconds between successive event triggers. |
Command Mode Settings
| Name | Description |
|---|---|
| Chat Command | Command to trigger the welcome in Command Mode. |
| Command Permissions | Who can use the chat command (Everyone, Subscribers, VIPs, Moderators, Broadcaster). |
Content Settings
| Name | Description |
|---|---|
| User Picture | URL or upload for the user’s profile picture. |
| Speech Bubble Text | Text displayed in the speech bubble. |
| Title | Main title text (e.g., the user’s name). |
| Subtitle | Secondary text displayed under the title. |
| Supporting Text | Additional message or description text. |
| User Picture Border Color | Color of the border around the profile picture. |
| User Picture Border Width | Thickness of the profile picture border in pixels. |
| User Picture Background | Background color behind the profile picture. |
Card Design Settings
| Name | Description |
|---|---|
| Background Gradient ‑ Color 1 | First color for the card’s background gradient. |
| Background Gradient ‑ Color 2 | Second color for the card’s background gradient. |
| Border Color | Color of the card border. |
| Border Width | Thickness of the card border in pixels. |
| Decoration Stroke Color | Color of decorative strokes around the card. |
| Decoration Stroke Width | Thickness of decorative strokes (0 to disable). |
| Left Corner Radius | Roundness of the card’s left corners in pixels. |
| Right Corner Radius | Roundness of the card’s right corners in pixels. |
| Base Shadow Background Color | Color of the shadow behind the card. |
| Base Shadow Border Color | Color of the shadow border behind the card. |
| Base Shadow Border Width | Thickness of the shadow border in pixels. |
| Base Shadow Glow Color | Color of the glow effect for the card’s shadow. |
Speech Bubble Settings
| Name | Description |
|---|---|
| Speech Bubble Color | Background color of the speech bubble. |
| Speech Bubble Shadow | Color of the speech bubble’s shadow. |
| Speech Bubble Text Color | Text color used inside the speech bubble. |
Typography Settings
| Name | Description |
|---|---|
| Global Font | Google Font used for titles, subtitles, and bubble text. |
| Title Font Size | Font size of the title text in pixels. |
| Title Font Weight | Weight of the title font (Regular, Bold, etc.). |
| Subtitle Font Size | Font size of the subtitle text in pixels. |
| Subtitle Font Weight | Weight of the subtitle font. |
| Speech Bubble Font Size | Font size of the speech bubble text in pixels. |
| Speech Bubble Font Weight | Weight of the speech bubble font. |
| Supporting Text Font Size | Font size of supporting text in pixels. |
| Supporting Text Font Weight | Weight of supporting text font. |
| Subtitle Color | Color of the subtitle text. |
| Supporting Text Color | Color of the supporting text. |
Particles Settings
| Name | Description |
|---|---|
| Particle Type | Choose particle effect: Cute Star or Custom Image. |
| Custom Particle Image | Upload an image for particles when using Custom Image type. |
| Particle Color (Star only) | Color of star particles (visible when using Cute Star). |
| Number of Particles | Total particles generated on widget appearance. |
| Particle Size | Size of each particle in pixels. |
| Particle Movement Speed | Speed at which particles animate. |
Audio Settings
| Name | Description |
|---|---|
| Enable Sound Effect | Toggle to play a sound on widget display. |
| Sound Effect (Upload) | Upload an audio file for the welcome sound. |
| Sound Volume | Volume level of the sound effect (0–100%). |
⚠️ 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!