AlderChat

How to use AlderChat

Two free tools that make your stream look custom-built — no coding, no account, nothing to install. You design here with a live preview, then copy-paste the result into StreamElements (and, for one path, into OBS). Five minutes, start to finish.

Prefer it on your computer? Download the offline version — the same tools in a folder, no internet needed.

1 · Which chat widget do you have?

This is the one thing to get right before anything else. StreamElements has two completely different chat widgets, and CSS written for one does nothing when pasted into the other. Here's how to tell which one is in your overlay — it depends on how it was added:

Not sure? Open your overlay in the StreamElements editor (streamelements.com → My Overlays → Edit), click the chat widget, and look at the left panel: the Chat Box has a Custom CSS button; the native widget has a Theme dropdown instead. No chat widget at all yet? Add the Chat Box — it's the friendlier one to start with.

2 · Style your chat — Chat Box widget

1. In the studio's top bar, set the toggle to Chat Box widget.
2. Click a preset on the left, then tweak anything — fonts, role colors, backgrounds, animations. The preview updates live; "Simulate live chat" shows messages flowing in just like on stream.
3. Click Copy CSS (top right).
4. In StreamElements: My Overlays → Edit → click your Chat Box widget → left panel → Custom CSS button.
5. Select everything already in that editor, delete it, paste your CSS, and click Save (top right of the SE editor).
6. Test it: click Emulate Chat Message in the SE editor's bottom bar — styled messages appear without going live.

3 · Style your chat — "Your stream's chat" widget

This widget is different in one big way: the StreamElements editor has no CSS box for it at all. Your CSS goes into OBS instead. That also means the SE editor will never show your styling — that's normal, not broken.

1. In the studio's top bar, set the toggle to Native "Your stream's chat", design your look, and click Copy CSS.
2. In StreamElements, click the widget and set Theme → Custom (this removes SE's built-in styling so yours can take over). Keep "Show messages permanently" ON — the studio's own "Hide after" setting handles message fading.
3. Save the overlay in SE.
4. In OBS: right-click your overlay's Browser Source → Properties → paste into the Custom CSS field → OK.
5. Check the result in OBS (right-click the source → Refresh if needed).

4 · Badges, custom images & outlines

The Badges & Accents panel is where a chat stops looking like a template. Everything here works on both chat widgets and needs no coding:

• Role text chips replace Twitch's badge icons with clean SUB / VIP / MOD / HOST tags in six styles (pill, outline, color dot, glyph, bracket, esports skew). Chips and badge icons are either/or — chips win while they're on.
• Badge icons can be resized, reshaped (rounded / square / circle), turned monochrome, or given a role-colored glow. Show highest badge only collapses badge stacks (sub + mod + bits…) to one; Role badges only hides the vanity badges (bits, prime, hype-train) while keeping the ones that mean something.
• Hide host / mod / VIP / sub badge removes just that role's badge — handy for the "mod badge off duty" look. Names and colors stay.
• Custom badge images replace a role's Twitch badge with your own art. Best size: a square, transparent PNG at 72×72 px or larger — 128×128 is a safe pick (badges render at roughly 18–36 px, so bigger art just means crisper edges, especially with large fonts). Use a direct image link that ends in .png/.webp — an Imgur direct link (i.imgur.com/….png) works well. Avoid Discord attachment links: they expire after a while and your badge will quietly vanish mid-week.
• Bubble image (Background & Shape panel) puts your own image behind every message — the "custom chat bubble" look. Best size: a transparent PNG around 800×200 px (roughly the shape of a message row, at double size for crispness). Pick a fit: Stretch for bubble/frame art, Fill for photos/textures, Tile for patterns. Your row background color still shows through the transparent parts.
• Name outline (Colors & Roles panel) draws a colored stroke around usernames — 1–2 px in a dark color keeps names readable over bright gameplay without a boxy background.

5 · Add a rotating socials / schedule card

The Social Rotator builds a card that cycles through your socials, schedule, or anything else — or a continuously scrolling ticker. It lives inside StreamElements, so it follows you to any computer you stream from. One-time setup:

1. Design your slides in the studio: pick platform icons, type your handles, choose a shape and style. (A slide's ⚙ button holds per-slide extras — its own color, timing, even a scannable QR code.)
2. In StreamElements: My Overlays → Edit → ADD WIDGET → STATIC / CUSTOM → Custom widget.
3. Select the new widget → left panel → OPEN EDITOR. You'll see tabs named HTML, CSS, JS.
4. Back in the studio, each export box has a Copy button. Copy each block into the SE editor tab with the same name — HTML into HTML, CSS into CSS, JS into JS. (Don't touch the FIELDS or DATA tabs unless you ticked "Tweakable in SE" — then paste the fourth block into FIELDS.)
5. Click Done, save the overlay, then drag and resize the widget's box where you want the card — for example a lower-third strip.

Ticker mode — the news-crawl strip

Switch Mode to Scrolling ticker for a continuous crawl. Beyond speed and direction you can set the bar width (and park it left / center / right), space between items, a pause between loops (the strip rests, then rolls on seamlessly), and an edge fade that melts both ends into your scene. A fixed label ("LIVE", your channel name) stays put while items scroll behind it, and separators go from a dozen glyphs to your own logo — with size, color, and glow controls. With "Tweakable in SE" on, you even get a Paused switch in the SE panel to freeze the crawl mid-stream. Prefer items that hold still and swap instead of crawling? That's just the Rotating card mode.

6 · Put a QR code on stream

The QR Code tab turns any link into a scannable code — viewers point their phone at your stream and land on your Linktree, Discord invite, or merch page. Two ways to use it:

• Permanent: download the PNG and add it in OBS as an Image source. Keep it at least 120px on screen at 1080p.
• On rotation: in the Social Rotator, give a slide the “QR code…” icon — it shows up between your other slides, classic “scan my socials every few minutes” style.

7 · Wheel chat

The chat tool's Wheel curve slider bends your chat around an invisible wheel — messages ride up the rim and dissolve. Three things to know:

• Draw the chat widget's box big: about 620 × 550. The curve needs sideways room; in a narrow column the messages get squeezed short. Use the preview's Box selector to see your exact box size before committing.
• Wheel messages are fixed-size "cars": up to 3 lines each, with very long messages trimmed with an … — that's what keeps the wheel from ever piling up on itself.
• Want more messages visible at once? Raise the Wheel curve radius — a bigger wheel fits more cars.

8 · Saving your work & switching computers

• Save preset / Save design keeps your setup in this browser — it'll be there next time you open the studio on this machine.
• Share → Copy share link packs your whole design into a link. Open it on any other computer and the studio loads it instantly — perfect for moving between a desktop and a laptop.
• Download JSON is the same thing as a file — a safe offline backup you can re-import any time.
• Backups (top bar) is the belt-and-braces option: one file that contains everything you've made in the whole studio — every chat style, rotator design, QR setting, and saved preset. Restore it on any computer and you're exactly where you left off. On Chrome or Edge you can also link a vault file that silently re-saves itself every time you change anything — set it once and never lose work again, even if the browser's storage gets cleared.

9 · Troubleshooting

"I pasted the CSS and nothing changed"

Nine times out of ten: the studio's widget toggle doesn't match your actual widget (see section 1). The other time: for the native widget, the CSS goes in OBS, not StreamElements — and the SE editor will never preview it.

"My text looks blurry in OBS"

Right-click the browser source → Transform → Reset Transform, and make sure the source itself is sized 1920×1080 in its properties (a stretched 800×600 source is the usual culprit). Chat fonts read best at 16px or larger.

"Role colors / chips don't show"

Update OBS — role styling needs OBS 31+. Also note roles only display for users who actually carry that badge in your channel.

"Wheel messages are short / cut off"

Your widget box is too narrow — the wheel warns about this in the studio's toolbar. Make the box about 620 × 550 in the SE editor (section 6).

"My rotator froze when I hid the scene"

It didn't — it resyncs by the clock the moment the scene shows again. For the smoothest behavior keep the browser source's "Shutdown source when not visible" OFF.

"Some rotator icons are missing"

You were probably offline while designing — icons are embedded at design time. Reconnect, nudge any setting to refresh, and re-copy the export.

Commands, bot filtering, and ignore lists aren't CSS — StreamElements has those built into each widget's own settings panel. And if something here doesn't match what you see, StreamElements may have changed their editor — the help modal inside each tool ("Setup help") always has the deepest, most current detail.

About AlderChat — built by AlderoshActual, a working Twitch DJ, because his own chat deserved better than the defaults. Everything runs in your browser: no account, no upload, nothing tracked.