Overlays

Overlays show your chat and alerts on stream. Each overlay is a web page that you add to OBS as a Browser source. Crossfeed has two overlays, Chat and Alerts, and both show events from Twitch and stream.place.

Create overlay links

1. Open Settings and select Overlays.
2. Select Create overlay links.
3. Select Copy link next to Chat or Alerts.
4. In OBS, add a Browser source and paste the link as its URL.
5. Set the source size.
6. Check the source in OBS. Once the overlay connects to the relay, it shows Overlay initialized for 8 seconds.

Other sizes work too. Chat messages wrap to the width of the source, and the alert card shrinks to fit a small source.

Overlay links need a connected Twitch or AT Protocol account. In the demo, the style editor works but there are no links.

The Overlay initialized notice appears as a chat message from Crossfeed in the chat overlay and as an alert card in the alerts overlay. It only shows in the overlay itself. It never reaches your chat, and the style preview doesn't show it.

The status line under the links shows whether the dashboard is connected to the overlay relay.

Keep overlays live

The dashboard sends chat and alerts to your overlays while it's open in a browser. With Keep overlays live when the dashboard is closed turned on, Crossfeed's server keeps your overlays running after you close the dashboard. The switch is under the overlay links and is on by default. The line under it shows which platforms reach your overlays with the dashboard closed, and names any Twitch events that Twitch refused.

With the dashboard closed, the overlays receive:

• Twitch: chat messages, deleted messages, timeouts and bans, chat clears, subs, resubs, gifted subs, raids, follows, and cheers. Crossfeed reads Twitch chat through Twitch EventSub as crossfeedbot, so your Twitch sign-in needs the channel:bot permission.
• stream.place: chat messages, deleted messages, blocks, and teleports while you're live on stream.place. Crossfeed checks about once a minute whether you're live, so the overlays can take up to a minute to pick up stream.place after you go live.

Bluesky follow alerts only reach your overlays while the dashboard is open. Overlay styles only change from the dashboard.

stream.place events with the dashboard closed need an AT Protocol account on your Crossfeed account. If you signed in to Crossfeed with your email, link your AT Protocol account in the Accounts section of Settings. See Account and billing.

Turn the switch off to have overlays update only while the dashboard is open.

What the overlays show

The chat overlay shows messages from both platforms with emotes. A message you send to both platforms from the dashboard shows up once, with both platform squares. When a message is deleted, or a chatter is timed out or banned, their messages leave the overlay too. Clearing Twitch chat clears the Twitch messages from the overlay.

The alerts overlay shows one alert at a time and queues the rest. It covers follows, subs, resubs, gifted subs, cheers, raids, and teleports. Bluesky follows show as follows, labeled Bluesky.

When the browser that shows an overlay asks for reduced motion, chat messages appear without animation, and alerts appear and disappear without animation. Animated Twitch and 7TV emotes show a still frame.

Style the overlays

The Style section under Overlays has a tab for each overlay and a live preview with sample chat. Changes apply to the preview and to your OBS browser sources as you make them. Select Send test alert to show a sample alert in the preview and in OBS. Reset style returns every option on the current tab to its default, including custom CSS.

Chat options

• Text: Font (Rethink Sans, Martian Mono, System, or Serif), Weight, Size, Text color, and a Text shadow switch for overlays without a background.
• Names: Chatter color, Platform color, or One color with its own color. Name before text or Name above text, and Show platform squares.
• Messages: Background, Background opacity, Corner radius, Padding, Gap, Messages shown (1 to 50), and Hide after, from 5 seconds up to 300 seconds, or Never.
• Message width: Fit text sizes each message to its text, up to the width of the source. Full width stretches every message across the source.
• Left or Right alignment, and the motion for new messages: None, Fade, Slide, or Pop.
• Hide messages that start with !, such as bot commands. It's on by default.

Alert options

• Text: Font, Size, Text color, and Name color for the chatter's name.
• Card: Background, Background opacity, Corner radius, Padding, and Duration from 2 to 30 seconds.
• Top, Center, or Bottom position, and the motion: None, Fade, Slide, or Pop.
• Show platform squares, and Show the message that comes with a sub or cheer.

Under Alert types, turn each type on or off and edit its text. Write {name} for the chatter, {amount} for bits, gifted subs, or raiders, and {months} for resub months. For example, {name} raided with {amount} viewers becomes "sorrelbyte raided with 42 viewers".

Custom CSS

Each tab has a Custom CSS box for up to 8,000 characters. The CSS applies to that overlay only, on top of the options above.

The example below gives raid alerts an orange card:

.cf-alert[data-kind='raid'] {
	background: #ff5a1f;
}

Overlay styles and the overlay link key sync to your other browsers, so every browser publishes to the same links. Both are part of your settings export.