To add a chat widget to OBS with StreamElements, you put the widget in a StreamElements overlay first. Then you copy that overlay's link and show it in OBS as a Browser source.
This guide uses the Neon Glow Chat and Goal Widget. Its listing says setup takes about 10 to 15 minutes, and you do not need to code.
The route in three parts
- StreamElements: add a Custom Widget to an overlay and paste in the widget code.
- The link: copy the overlay link from the editor.
- OBS: add that link as a Browser source.
The widget lives in StreamElements, and OBS only displays it. Keep that in mind and every step below makes sense.
What you need
- A free StreamElements account.
- OBS Studio, or another app that can add a browser source.
- Your widget download. It has two ZIP files, one for chat and one for the goal bar, plus setup instructions.
Three terms come up below. An overlay is a page in your StreamElements account that holds your widgets. A Custom Widget is the StreamElements widget that holds pasted code. A Browser source is the OBS layer that loads a web page.
Part 1: Put the widget in StreamElements
- Download the chat widget ZIP from your order email, or from the order page in your account.
- In your StreamElements dashboard, go to Streaming Tools, then Overlays.
- Click New overlay.
- Choose 1920x1080 and click START. Pick another size only if your stream uses one.
- Click the + button in the overlay editor.
- Under STATIC/CUSTOM, click Custom Widget.
- Select the new widget, then click OPEN EDITOR in the left panel. A code editor opens with four tabs: HTML, CSS, JS and FIELDS.
- Paste in the chat widget code, as the setup instructions in your download show.
- Click Save at the top of the overlay editor and give the overlay a name, such as Chat.
What you should see: the widget's settings in the left panel of the overlay editor, such as colors and message limit.
Part 2: Copy the overlay link
- Hover over the link icon at the top right of the overlay editor.
- Click it. The link is now on your clipboard.
Treat that link like a password. StreamElements says overlay links carry sensitive tokens, so do not share yours in public, in a screenshot or in a Discord message.
Part 3: Show it in OBS
- In OBS Studio, find the Sources box and click the + button.
- Click Browser.
- Select Create new, type a name such as Chat, and click OK.
- Paste your overlay link into the URL box.
- Set Width to 1920 and Height to 1080.
- Set FPS to 30 or 60, to match your stream. Leave Custom CSS as it is.
- Click OK.
The overlay is full size, so the chat sits where you placed it in StreamElements. To move or resize it, use Position, size and style in the overlay editor, then click Save.
What you should see: send a message in your own Twitch chat. It appears in the widget over your scene, with a transparent background behind it.
If it does not work
- Black screen: turn off your VPN or ad blocker, then refresh the Browser source. The longer fix is in OBS browser source black screen or blurry fix.
- Blurry widget: set your OBS canvas resolution to 1920x1080 and give the Browser source the same size.
- No messages: this widget reads Twitch chat only, so YouTube and Kick messages never appear. The full list is in Chat Widget Not Showing Messages in OBS: A Checklist by Platform.
If OBS does not show a change you made, right-click the source, click Properties, then click Refresh cache of current page.
Change the look
Every setting lives in the StreamElements editor, so you never edit code. For this widget, the listing says you can change these:
- Accent color: so the glow matches your brand.
- Pronouns and badges: show or hide each one.
- Message limit: how many messages stay on screen.
- Alignment: messages from the top or from the bottom.
- Ignored users: hide specific users, such as bots.
- GIFs: on or off, plus GIF size, quality and who can post them.
Add the goal bar
The download includes a second ZIP for the goal widget. Repeat Part 1 with that ZIP, so the goal bar becomes its own Custom Widget. Then repeat Part 3 to add it to OBS as a second Browser source.
A goal widget counts events such as follows, subs, tips and cheers. It does not display chat messages, so the chat widget still does that job.
One limit to know
The Neon Glow Chat and Goal Widget reads Twitch chat through StreamElements only. It does not read YouTube or Kick chat. It does show Twitch GIFs inside chat messages, which our Twitch GIFs guide explains.
The top of the listing also names Streamlabs. Its Compatibility section says Streamlabs widgets are not included and that this is StreamElements code. The detailed section is the one to trust, so plan on StreamElements.
If you stream to YouTube or Kick as well, look at the Multistream Chat Widget. It reads Twitch, YouTube, Kick and TikTok in one box, and its listing includes a personal one-click install link that takes about 2 to 5 minutes. TikTok chat comes through the free TikFinity app, which connects to TikTok unofficially. See About the Multistream Chat Widget for the details.
If you only want a plain Twitch chat box, StreamElements has a free one built in. Click the + button in the overlay editor, then choose Stream Tools and Your Stream's Chat. It shows Twitch emotes, including BTTV, FFZ and 7TV ones. Steps are in StreamElements' own guide. The Neon Glow widget is the choice when you want the look and the GIF settings.
Questions
Do I need to code? No. You paste in the code as the setup instructions show, then change settings in the StreamElements editor.
Can I use Streamlabs instead? This widget is StreamElements code, and the listing says Streamlabs widgets are not included. Read the Compatibility section of a listing before you buy.
Does it show Twitch GIFs? Yes. The listing says Twitch GIFs in chat: Yes, with GIF settings in the widget.
Where do I find the download again? The link is in your order email and on the order page in your account.
More from the blog: About the Neon Glow Chat and Goal Widget, and How to Set Up Kick Chat in an OBS Widget.
Last checked: 2026-11-02. The listing and the StreamElements steps were read that day. If a listing changes, the listing is the authority. Questions about a file or a refund: see the Refund Policy.
Reader discount: 15% off with code BLOG15. Get the Neon Glow Chat and Goal Widget with 15% off. One use per customer. Digital download.
