Put your TownSquare in a livestream overlay

A lot of you asked for a way to put your townsquare on stream, so I built it. TownSquare now has a livestream overlay.

This guide walks through adding that overlay to your stream. The overlay is a browser-source URL, so any app that supports browser sources can use it. In this guide we'll use OBS as the example.

The overlay is watch-only. It shows the live square without adding a new active visitor, so putting it in a streaming app should not inflate the count or make a fake person appear in the scene.

Set up the overlay

Open your admin page, sign in with your site admin token, and go to Add-ons.

If Plus is enabled for your site, you will see Livestream overlay. There are a few settings to understand first:

• Overlay Colors Source decides whether the overlay follows your site palette or uses its own. With Match site appearance, the overlay uses the color scheme you defined in the Appearance tab, the same one visitors see on your site. Choose Customize colors if you want the overlay to look different on stream without changing the main square.
• Theme picks whether the overlay uses the light or dark color palette. With Match site appearance, that means the light or dark scheme from your Appearance tab. With Customize colors, you can define separate light and dark overlay colors, but you can also leave dark alone and only set up light colors. Keeping both palettes is mainly useful if you want two stream looks and plan to switch between them by changing the theme in the URL.
• Background controls what sits behind the whole overlay in the browser source: transparent or a solid color. The next section goes into more detail on that choice.

Theme and Background work through the overlay URL, not the Save button. When you change them, the URL on the page updates right away, so just copy the new URL into your streaming app. Save overlay settings is for your overlay colors instead — the overlay picks those up on its own, no new URL needed.

From there:

1. Set Overlay Colors Source to match your site or customize them for stream.
2. Click Save overlay settings to store your overlay colors.
3. Choose Light or Dark for theme and pick the background mode. Watch the overlay URL update as you change them.
4. Copy the browser-source overlay URL.

If you change overlay colors later, save again and copy the updated URL. If you only change theme or background, copy the new URL; you do not need to save again.

Transparent or solid background

The default background is transparent, which is usually what you want for a stream overlay.

Some capture setups, browsers, or streaming apps do not handle transparency the way you expect. If the transparent option looks wrong, switch the overlay to Solid color. The default solid color is bright green (#00ff00), which works well with a chroma-key filter.

You can pick another six-digit hex color if green clashes with your scene.

Add it to a streaming app

The general setup is:

1. Add a browser source or web source to your scene/layout.
2. Paste the copied overlay URL into the source URL field.
3. Set the source size to match your canvas, often 1920 x 1080 or 1280 x 720.
4. Place the source above the camera, screen share, or other layer where you want the square to appear.

In OBS, that looks like this:

1. Open your scene.
2. In Sources, click +.
3. Choose Browser.
4. Create a new source, for example TownSquare overlay.
5. Paste the copied overlay URL into URL.
6. Set Width and Height to match your canvas, often 1920 x 1080 or 1280 x 720.
7. Click OK.

If you used a transparent background, the square should sit directly over your scene.

If you used a solid background:

1. Right-click the browser source.
2. Choose Filters.
3. Add Chroma Key.
4. Use green, or choose a custom key color matching the overlay background.
5. Adjust similarity and smoothness until the background disappears cleanly.

Quick checks

If nothing appears:

• Confirm the site has Plus enabled.
• Open the copied overlay URL in a normal browser and check that it loads.
• Make sure the square has active visitors if you expect to see people.
• Check that your streaming app is not cropping the browser source too tightly.
• Refresh the browser source after changing the overlay URL.
• If you change custom CSS, OBS may keep showing the old styles. Open the Browser Source properties and choose Refresh cache of current page.

The overlay uses the same live TownSquare connection as the normal widget, just in watch-only mode.

How to get Plus

TownSquare is a side project I run in my spare time. Plus is my way of saying thank you to people who support it.

If you have already chipped in, send me a note and I will flip Plus on for your site. No checkout flow, no tiers, just a small thank-you for helping keep the lights on.