New Chatter 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!
StreamElements Chat Bot and JWT
Token For widget to post responses in your chat, you’ll need to enable the StreamElements Chat Bot and use your personal JWT token.
The chat bot is a free tool that can moderate your chat, post alerts, and handle various interactive features.
The JWT token acts like a secure key and lets the widget communicate with your chat bot. You can still use the widget without them, but it won’t be able to send chat responses in chat.
Enabling StreamElements Chatbot
- Log in to your StreamElements account.
- Click “Chatbot,” then choose “Settings.”
- Under “Bot Status,” click “Unmute.”
Getting Your StreamElements JWT Token
- In your StreamElements account, click your profile picture in the top-right corner of the screen.
- Click your nickname and select “Channel Settings.”
- In the JWT Token section, click the copy icon.
- Save the copied token in a secure place.
Chat Commands & Interactions
Automatic Welcome
Triggers on first-ever or session-first chat based on your settings.
Chat Messages
If enabled and you’ve provided a JWT Token, the widget will send your custom messages after the banner appears.
No Manual Commands
This widget works automatically—no user-typed commands are needed.
Customization Fields
General Settings
| Setting | What it does |
|---|---|
| Show for First-Ever Chatters | Show banner when a user chats for the very first time ever. |
| Show for Session-First Chatters | Show banner when a user chats for the first time in this session. |
| Display Duration (s) | Seconds the banner stays visible. |
| Enable Test Mode | Always shows a test banner (ignores real chat). |
| Animation In Duration (s) | Seconds the banner fade-in/move-in takes. |
| Animation Out Duration (s) | Seconds the banner fade-out/move-out takes. |
Chat Message Settings
| Setting | What it does |
|---|---|
| Enable Welcome Messages to Chat | Send a chat message when someone triggers the banner. |
| StreamElements JWT Token | Your SE token for bot authentication (required if chat messages are on). |
| Chat Message for First-Ever Chatters | Template for first-ever chat messages. Use {username} . |
| Chat Message for Session-First Chatters | Template for session-first chat messages. Use {username} . |
| Delay before sending chat message (s) | How many seconds to wait before sending the message. |
| Send Chat Message (First Ever) | Toggle sending the first-ever chat message. |
| Send Chat Message (Session First) | Toggle sending the session-first chat message. |
Messages (Banner Content)
| Setting | What it does |
|---|---|
| Main Message (First Ever) | Primary banner text for first-ever chatters. Use {username} . |
| Additional Message (First Ever) | Secondary banner text for first-ever chatters. |
| Main Message (Session First) | Primary banner text for session-first chatters. |
| Additional Message (Session First) | Secondary banner text for session-first chatters. |
Sound Settings
| Setting | What it does |
|---|---|
| Enable Sound Effect | Play a sound when the banner appears. |
| Sound Effect (Upload) | Upload your custom sound or paste an SE link. |
| Sound Volume | Volume level from 0 to 100. |
Main Container (Banner Styling)
| Setting | What it does |
|---|---|
| Container Corner Radius (px) | How rounded the banner’s corners are. |
| Container Stroke Width (px) | Thickness of the banner’s border. |
| Stroke Gradient Color 1 / 2 / 3 | Colors for the animated border gradient. |
| Stroke Animation Speed (s) | Seconds for one cycle of the border gradient animation. |
| Background Gradient Color 1 / 2 | Colors for the banner’s background gradient. |
| Background Animation Speed (s) | Seconds for one cycle of the background gradient animation. |
| Enable Container Glow | Add an outer glow effect to the banner. |
| Container Glow Color | Color of the banner glow. |
| Container Glow Blur (px) | How blurry the glow is. |
| Container Glow Spread (px) | How far the glow extends from the banner. |
Avatar Styling
| Setting | What it does |
|---|---|
| Show Avatar | Display the chatter’s avatar on the banner. |
| Avatar Size (px) | Diameter of the avatar image. |
| Avatar Corner Radius (%) | Roundness of the avatar (50% for a perfect circle). |
| Avatar Stroke Width (px) | Thickness of the avatar’s border. |
| Avatar Stroke Gradient Color 1/2/3 | Colors for the avatar border gradient. |
| Avatar Stroke Animation Speed (s) | Seconds for one cycle of the avatar border animation. |
| Enable Avatar Glow | Add an outer glow effect to the avatar. |
| Avatar Glow Color | Color of the avatar’s glow. |
| Avatar Glow Blur (px) | How blurry the avatar glow is. |
| Avatar Glow Spread (px) | How far the avatar glow extends. |
Text Styling
| Setting | What it does |
|---|---|
| Main Text Font Family | Google Font for the main message text. |
| Main Text Font Size (px) | Maximum font size; auto-scales down if needed. |
| Main Text Font Weight | Boldness level for the main message. |
| Main Text Color | Color of the main message text. |
| Username Font Family | Google Font for the username text. |
| Username Font Size (px) | Maximum font size; auto-scales down if needed. |
| Username Font Weight | Boldness level for the username text. |
| Username Text Color (Gradient Start/End) | Gradient colors for the username text. |
| Additional Text Font Family | Google Font for the additional message text. |
| Additional Text Font Size (px) | Maximum font size; auto-scales down if needed. |
| Additional Text Font Weight | Boldness level for the additional message text. |
| Additional Text Color | Color of the additional message text. |
| Enable Text Glow | Add a glow effect to all text elements. |
| Text Glow Color | Color of the text glow. |
| Text Glow Blur (px) | How blurry the text glow is. |
| Text Glow Offset X / Y (px) | Horizontal/vertical offset of the text glow. |
⚠️ 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!