Hacker Terminal Chat 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 :)
Customization Options
⚠️ 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!
Design Settings
The Design Settings section allows you to personalize various aspects of your widget's appearance. From adjusting text features to modifying graphic details, these settings enable you to create a visually cohesive and appealing chat that fits to your stream aesthetics.
| Control Label | What It Does |
|---|---|
| Widget Width (px) | Overall chat widget width. |
| Widget Height (px) | Overall chat widget height. |
| Main Background Color | Fills the widget background. |
| Widget Box Shadow Color | Color of the glowing outline around the widget. |
| Widget Box Shadow Intensity | Strength of the glow (0 = off). |
Window Top Bar
| Control Label | What It Does |
|---|---|
| Enable Window Top Bar | Show / hide the top “terminal” bar. |
| Top Bar Title | Text displayed on the bar. |
| Top Bar Title Font | Font for the title text. |
| Top Bar Title Color | Color of the title text. |
| Top Bar Background Color | Fill color of the bar. |
| Top Bar Circle Color | Color of the decorative circles. |
Chat Area — Header
| Control Label | What It Does |
|---|---|
| Enable Chat Header Title | Show / hide the ASCII banner. |
| Chat Header ASCII Text (for Figlet) | Text rendered as ASCII art. |
| Chat Header ASCII Color | Primary color of the ASCII banner. |
| ASCII Title Glow Intensity | Strength of banner glow. |
| Enable Chat Header Divider | Show a divider line under the banner. |
| Chat Header Divider Text | Label inside the divider. |
| Chat Header Divider Text Color | Color of the divider label. |
| Chat Header Divider Dash Color | Color of dashed line. |
Chat Area — Messages
| Control Label | What It Does |
|---|---|
| Message Font | Font for chat text. |
| Message Text Font Size (px) | Size of chat text. |
| Message Text Color | Color of chat text. |
| Username Font Size (px) | Size of the username. |
| Username Color | Color of usernames. |
| Timestamp Color | Color of timestamps. |
| Show Timestamps | Enable/disable timestamps. |
| Enable User Profile Pictures | Show or hide user avatars. |
| Enable Userpic Tint | Apply a color overlay on avatars. |
| Userpic Tint Color | Tint color for avatars. |
| Message Connector Line Color | Vertical line color between messages. |
| Message Frame Color | Border color of message containers. |
| Twitch only — Enable User Badges | Show Twitch badges (not in YouTube build). |
Chat Area — Alerts
These values control in-feed alert cards. Platform mapping is indicated per listener.
| Control Label | Twitch Event | YouTube Event |
|---|---|---|
| Show Alerts in Chat Feed | Enables alerts in chat feed | same |
| "New Follower" Header Text | follower-latest |
subscriber-latest (YT “New Subscriber”) |
| "New Subscriber" Header Text | subscriber-latest |
sponsor-latest (YT “New Member”) |
| "New Tip" Header Text | tip-latest (universal) |
same |
| "New Cheer / Super Chat" Header Text | cheer-latest |
superchat-latest |
| Twitch only — "New Raid" Header Text | raid-latest |
— |
| Alert Font | Font used in alert cards. | |
| Alert Frame Color | Color of the alert card border. | |
| Alert Text Color | Color for alert text. | |
| Alert ASCII Icon Color | Color of ASCII alert icon. | |
| Alert Glow Intensity | Glow strength around alert card. |
Behaviour Settings
The Behavior Settings section provides options to control how your chat widget interacts with user input and manages message visibility. These settings are crucial for maintaining the desired atmosphere in your chat and stream.
| Control Label | What It Does |
|---|---|
| Hide Messages After (seconds) | Remove messages after N seconds (0 = never). |
| Typewriter Char Delay (ms) | Speed of the typewriter effect. |
| Ignore Command Messages | Skip messages that begin with a command. |
| Command Symbol | Prefix used to detect commands. |
| Use Blocklist As Allowlist | Interpret the blocklist as an allow-list. |
| Block / Allow List (comma-separated) | Usernames to block or allow. |
Testing
This section offers a straightforward option for checking the functionality and appearance of your widget:
| Setting | What it does |
|---|---|
| Enable Testing Mode | Generate fake chat and alert events. |
| Test Event Interval (seconds) | Time between generated test events. |
Size and Opacity
- Open “Position, size and style” menu
- Change height, width, and opacity to your liking
⚠️ 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!