How to use AlderChat

Free tools that make your stream look custom-built. No coding, no account, nothing to install. You design here with a live preview, then paste the result into StreamElements (StreamElements is the overlay service; OBS shows its overlay on your stream). The first time takes about fifteen minutes. Every change after that takes two.

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

1 · StreamElements basics: the overlay, the widgets, OBS

What you are building

Everything AlderChat makes goes into a StreamElements overlay. An overlay is a web page that StreamElements hosts for you. It is made of widgets: chat, alerts, your rotators. OBS shows that page on top of your game or camera as one Browser source.

A widget's look is three pieces of code: HTML, CSS and JS. You never read them. You copy each one from a box in AlderChat into a tab of the same name in StreamElements. The empty box StreamElements gives you for that is called a Custom widget.

You need: a StreamElements account signed in with your Twitch account, and OBS 31 or newer (older versions show everything except role colors and chips; OBS → Help → Check for updates tells you your version).

Step A · Make an overlay (once)

Any overlay works. AlderChat's widgets go into an overlay you already use, a ready-made theme from the StreamElements gallery, or a new blank one. Starting fresh? Make one blank overlay at your stream's resolution and put the chat and the rotators in it together. Fewer browser sources perform better than many.

1. Sign in at streamelements.com. In the left menu open Streaming Tools → Overlays (the page is also called “My Overlays”).
2. Click New overlay. Pick 1080p (1920 × 1080). It should match what you stream at, and for almost everyone that is 1080p. Click START.
3. You are now in the overlay editor: a canvas the size of your stream, with a welcome panel on the left. Have a look, then move on. You will add your first widget in Step B.

   

4. Give the overlay a name (top left) and click SAVE (top right). Click SAVE again after every change you make later.

Step B · Add a Custom widget

1. In the overlay editor click the round + at the bottom left. On an empty overlay the ADD WIDGET button does the same.
2. Hover STATIC / CUSTOM and choose Custom widget (“Build custom widgets using HTML, CSS and JavaScript”). AlderChat's chat, social rotator and logo rotator each go in one of these.

   

3. A box appears on the canvas. That box is the widget's size and position: the chat fills it, the rotator card fills it, the logo scales to it. Click the box once to select it.

Step C · Paste AlderChat's code into it

1. With the widget selected, click OPEN EDITOR in the left panel.
2. The code editor has five tabs: HTML, CSS, JS, FIELDS, DATA. It is not empty. StreamElements pre-fills it with a sample event list (a font link, a main-container line, and its own Fields such as “Limit displayed events to”). You replace that sample.

   

3. HTML tab: click inside the code, press Ctrl+A (Cmd+A on a Mac), press Delete, then paste AlderChat's HTML box.
4. Do the same in the CSS tab with the CSS box, and in the JS tab with the JS box. In AlderChat each box has its own Copy button (click Show code if the boxes are hidden on a smaller screen).
5. FIELDS tab: if AlderChat shows a FIELDS box, paste it the same way. If it does not, still delete the sample and type {}, otherwise the sample's settings keep showing in the left panel. Leave DATA alone.
6. Click DONE (bottom right), then SAVE (top right). Two separate saves.
7. Drag and resize the widget's box on the canvas. Anything outside the box is cut off. Starting sizes: chat 330 wide by 600 tall, a rotator bar 640 by 90, a logo 260 by 260.

Step D · Put the overlay in OBS (once)

1. In the StreamElements editor click the link icon top right (next to SAVE) to copy the overlay link. Back on the Overlays page, the three dots on the overlay's card → Copy URL does the same. Keep that link private: anyone who has it can show your overlay.
2. In OBS, find the Sources panel (bottom middle) and click its +.

   

3. Choose Browser from the menu.

   

4. Keep Create new selected, give it a name (for example “Browser - My Overlays”), leave Make source visible ticked, click OK.

   

5. The properties window opens. Paste the link into URL, replacing the address that is there.
   Size must match. Set Width and Height to the overlay size you picked in Step A. For 1080p that is Width 1920, Height 1080. If the two differ, StreamElements' widgets land in the wrong place and text goes blurry.
   Leave everything else as OBS filled it, including the Custom CSS line at the bottom. Click OK.

   

6. If it looks blurry or stretched: right-click the source → Transform → Reset Transform.
7. In the source's properties keep “Shutdown source when not visible” OFF. Hidden scenes slow the widgets' clocks; the rotators catch up when shown, but a shutdown restarts them.
8. Add this source to every scene you stream from, or keep it in one scene that the others include.

Step E · Check it in OBS

Right-click the Browser source → Refresh. A chat widget only draws real messages, so it looks empty until one arrives: send a message in your own chat, or click the widget in StreamElements → left panel → Send a test message (that button comes from AlderChat's FIELDS box). Rotators start right away.

2 · Two ways to put your chat on stream

StreamElements has no box for custom CSS on its own chat widget. So the chat designer offers two options, chosen in the Where will this go? card at the top of its controls:

New here? Use StreamElements (recommended). It is the same paste flow as the rotators, so once you have done it once you know all three.

3 · Style your chat (StreamElements widget)

1. Open Chat designer. In Where will this go? keep StreamElements (recommended).
2. Click a preset, then tweak anything: fonts, role colors, backgrounds, animations. The preview updates live, and “Simulate live chat” shows messages flowing in as they would on stream.
3. The right panel shows four boxes: HTML tab, CSS tab, JS tab, FIELDS tab. The FIELDS box is optional but worth pasting: it adds the Send a test message button to the widget's settings in StreamElements.
4. Do Steps B, C and E in section 1 with those boxes. Start the box around 330 wide by 600 tall (the preview's default Box). The box is the chat area; anything outside it is cut off.
5. Watch one real message land in OBS before you go live.

4 · Style StreamElements' built-in chat (CSS in OBS)

Use this only if you want to keep StreamElements' own chat widget. The StreamElements editor has no box for custom CSS on it, so the CSS goes into OBS. That also means the StreamElements editor never shows your styling. That is normal, not broken.

1. If the overlay has no chat yet: in the overlay editor, + → STREAM TOOLS → Your stream's chat, then SAVE. The overlay itself must already be in OBS (section 1, Step D).
2. In AlderChat's chat designer, set Where will this go? to OBS custom CSS (advanced).
3. Design your look, then click Copy CSS in the right panel.
4. In StreamElements, click the chat widget on the canvas. In the left panel set Theme → Custom. This removes the built-in styling so yours can take over.
5. Keep “Show messages permanently” ON. AlderChat's own “Hide after” setting handles message fading.
6. Click SAVE.
7. In OBS: right-click the overlay's Browser source → Properties. In the Custom CSS field, keep the body { … } line OBS already put there and paste your CSS on a new line below it. Click OK.
8. Right-click the source → Refresh and check the result. Repeat step 7 on any other computer you stream from; OBS settings live on each machine.

5 · Badges, custom images & outlines

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

• Role text chips replace Twitch's badge icons with clean SUB / VIP / MOD / HOST tags, in eight styles from a filled pill to an esports skew. Chips and badge icons are either/or: chips win while they are 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) and keeps the ones that mean something.
• Hide host / mod / VIP / sub badge removes just that role's badge, 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 (an image with a see-through background) at 72 × 72 px or larger; 128 × 128 is a safe pick. Badges render at roughly 18 to 36 px, so bigger art just means crisper edges. Use a direct image link that ends in .png or .webp; an Imgur direct link (i.imgur.com/….png) works well. Avoid Discord attachment links: they expire after a while and the badge quietly vanishes.
• 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. Pick a fit: Stretch for bubble or frame art, Fill for photos and 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 to 2 px in a dark color keeps names readable over bright gameplay without a boxy background.

6 · 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.

1. Design your slides: pick platform icons, type your handles, choose a shape and style. A slide's ⚙ button holds per-slide extras: its own color, its own timing, even a scannable QR code.
2. Decide on Tweakable in StreamElements (the box above the export boxes).
3. Do Steps B, C and E in section 1 with the boxes in the right panel: HTML, CSS, JS, and FIELDS if you ticked Tweakable.
4. Size the box: for a strip along the bottom of the screen start around 640 wide by 90 tall and stretch to taste; for a corner card, a small square.

Ticker mode, the news-crawl strip

Switch Mode to Scrolling ticker for a continuous crawl. Controls worth knowing:

• Scroll speed and Direction.
• Bar width, and Bar position (left, center, right) when the bar is narrower than the box.
• Space between items.
• Pause between loops: the strip rests, then rolls on seamlessly.
• Edge fade: melts both ends of the strip into your scene.
• Fixed label (“LIVE”, your channel name): stays put while items scroll behind it.
• Separator: a dozen glyphs or your own logo, with size, color and glow.
• With Tweakable on, a Paused switch appears in the widget's settings to freeze the crawl mid-stream.

Prefer items that hold still and swap instead of crawling? That is the Rotating card mode.

7 · Rotate your streamer family / team logos

The Logo Rotator cycles through logos (your streamer family, teams, sponsors, collab partners) with a crossfade, or a slide, zoom, flip or spin, between them. Like the Social Rotator it is a Custom widget, so it lives in your overlay and follows you to any computer.

1. Click Upload images… and pick your logo files. Transparent PNG or SVG looks best, at least 300 px wide. AlderChat shrinks each image to at most 512 px on its long side and embeds it in the widget. Nothing leaves your browser.
2. Prefer a link? Add by URL takes a direct image link. You can also drag files onto the page.
3. Type a name next to each logo if you want captions. The ⚙ button holds per-logo extras: This logo's size (25 to 250%, to match logos that arrived with different paddings) and its own time on screen. ▲ ▼ reorder, ✕ removes.
4. Pick a style preset, then tune: Frame (none, rounded panel, circle badge, full card), Logo size as a share of the widget box, Monochrome to turn mixed brand colors into one uniform wall, Caption under or on the logo. Under Timing & motion: the transition style and length, seconds per logo, blank time between logos, a pause per round, Order (in order, or shuffle each round), and a subtle motion while each logo is shown.
5. Use the preview's Box selector to try the widget box size you plan to draw. The logos scale to the box, so a square box in a corner is the classic placement.
6. Decide on Tweakable in StreamElements first (see the box in section 6). Here it also turns each logo into an upload slot inside StreamElements (StreamElements hosts the file), so you can swap a family logo from the StreamElements dashboard later. A slot you leave empty is simply skipped.
7. Do Steps B, C and E in section 1 with the boxes in the right panel. Start with a 260 by 260 square (the preview's default Box).

8 · 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.

9 · 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: at least 620 × 550, ideally 800 × 720. The curve needs sideways room; in a narrow column the messages get squeezed short. Pick Box → Wheel 820×740 in the preview toolbar to see it 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.

10 · Saving your work & switching computers

Anything you pasted into StreamElements already follows you to every computer. The steps below are about your AlderChat designs, so you can keep editing them.

• Autosave: AlderChat saves what you are working on in this browser as you go. Save preset (chat) or Save design (rotators) keeps a named copy you can come back to after trying something else.
• 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 a single look between a desktop and a laptop.
• Download JSON is the same thing as a small text file: a safe offline backup. Bring it back with Share → Import JSON… on the same tool page.
• 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.

Moving everything to another computer

1. On your current computer: click Backups in the top bar, then Back up everything. A single file downloads. That file is your whole studio.
2. Get the file to the other machine however you like: USB stick, email it to yourself, or drop it in Dropbox / Google Drive.
3. On the new computer: open the studio, click Backups, then Restore a backup… and pick the file. Everything loads and the page refreshes with all your work in place.

Restoring is safe: the studio first saves a copy of whatever is already on the new machine (there's a checkbox for it in the Backups panel, on by default), so a restore can never silently wipe anything. And if you accidentally pick a single design's JSON instead of a backup file, nothing breaks. The studio will just tell you to import that one with the Share button on its own tool page.

The lazy version (Chrome or Edge)

1. On the computer you design on, open Backups and choose Link a vault file…. Save the file inside your Dropbox or Google Drive folder.
2. From then on it re-saves itself every time you change anything.
3. On your other computer: Backups → Restore a backup… and pick that same synced file.

11 · Troubleshooting

“My chat widget is blank in the StreamElements editor”

Normal. It only draws real messages. Click the widget → left panel → Send a test message (you need AlderChat's FIELDS box pasted for that button), or send a message in your own chat and look in OBS.

“I pasted and nothing changed”

Nine times out of ten the Where will this go? choice does not match what you did (see section 2). For the OBS custom CSS choice, the CSS goes into OBS, not StreamElements, and the StreamElements editor never previews it. Also check you replaced the sample code in each tab rather than pasting below it.

“The rotator shows {{slide1Text}} instead of my text”

You copied with Tweakable in StreamElements ticked and did not paste the FIELDS box. Paste it, DONE, SAVE.

“My changes do not show in OBS”

Right-click the Browser source → Refresh. The overlay link never changes, so never delete and re-add the source.

“My text looks blurry in OBS”

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

“Role colors / chips do not show”

Update OBS: role styling needs OBS 31 or newer. 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 designer's toolbar. Make the box at least 620 × 550, ideally 800 × 720 (section 9), and pick Box → Wheel 820×740 in the preview toolbar to see it.

“My rotator froze when I hid the scene”

It did not. It catches up 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. AlderChat embeds the icons while you design. Reconnect, nudge any setting to refresh, and copy the boxes again.

Commands, bot filtering and ignore lists are settings of StreamElements' own chat widget, not something CSS does. If something here does not match what you see, StreamElements may have changed their editor; the Setup help button inside each tool has the same steps in short form.

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.