SETUP GUIDE

Put yourself in the middle.

Costa Chat sends chat horizontally or vertically across two transparent browser sources. Every message gets a depth and a size. Put your camera cutout between the sources to let chat pass in front of you and behind you.

1. Open your online studio

Use Dark or Light in the header to change the studio theme. This preference stays in your browser and does not change your OBS overlay. Everyday controls are under Motion, Style, Scene and Connect; open the expandable sections for advanced settings.

The Stream setup checklist guides you through connecting chat, preparing your camera, and adding both OBS layers. Live-chat verification requires a real incoming message. Camera and layer checkboxes are your manual confirmation and save with your workspace.

No Costa Chat download or launcher is needed. Opening the public website creates a private workspace. Your visual settings and scene profiles save online. Click Add to OBS and bookmark your private studio link so you can open the same workspace on another device.

Keep the connected studio or OBS dock open throughout your stream. It receives chat from your bridges and forwards it to both online OBS layers. A browser with local-network support, such as current Chrome, may ask permission to reach Streamer.bot and TikFinity. Allow it on your streaming computer. Avoid putting that tab to sleep or enabling browser energy saving during a stream.

2. Connect Streamer.bot and TikTok

1. Connect your Twitch, Kick and YouTube accounts inside Streamer.bot. Open Servers / Clients → WebSocket Server and start the server.
2. In Costa Chat, select Connect → Streamer.bot (TikTok optional). The normal local address is ws://127.0.0.1:8080/. If your server requires authentication, enter the WebSocket password. When authentication is enabled without Enforce, Costa Chat can check for permitted read-only chat access without a password. Click Save & connect.
3. For TikTok, run TikFinity Desktop on the streaming computer and connect it to your TikTok LIVE. Enable TikFinity in Costa Chat. Its local event API normally uses ws://127.0.0.1:21213/. Save again.
4. Switch the preview to Live chat, then send one real chat message from each platform. The connection status describes the bridge; the platform list shows when this widget last received a message from each platform. A quiet channel may still be connected. Check your own live accounts before streaming.

Open the studio on the same computer as Streamer.bot to use the default address. For another computer, use a secure wss:// endpoint as described in Streamer.bot’s remote-access guide; an ordinary ws:// network address can be blocked as mixed content. Some browsers block local connections from an HTTPS page. If the connection fails, try Chrome and allow local network access, or use Social Stream Ninja’s secure relay below. Do not expose an unprotected bridge to the public internet. TikFinity’s local event API requires its desktop app; if unavailable on your streaming setup, use Social Stream Ninja below.

Optional: Social Stream Ninja for all four

Select Social Stream Ninja in Connect. Enter your session ID. In its Global settings → Mechanics, enable Enable remote API control of extension and Send chat messages to API server. Keep the extension or app and your platform chat pages running. It uses its own relay; keep your session ID private. Official relay API guide.

3. Remove your camera background

The overlay cannot see or cut out your body. Your camera must supply a transparent background for messages to pass behind your outline.

With a green screen

In OBS, right-click your camera cutout source → Filters → Effect Filters → + → Chroma Key. Select the screen’s color, then adjust similarity and smoothness until the screen disappears without erasing you. Even lighting makes a big difference. OBS filter guide.

Without a green screen

Use a background-removal filter that supports your OBS version and operating system, such as OBS Background Removal. Follow its installation and usage guide, restart OBS, add its filter to your cutout source, and select transparent output. This package does not install that plugin.

To keep your real room visible behind the chat

1. Keep the normal, unfiltered camera at the bottom of your main scene.
2. Create a separate scene named Camera Cutout. Add your existing camera to that scene.
3. Add the Camera Cutout scene as a source in your main scene. Apply background removal to this scene source, so your original camera stays unfiltered. Do not apply it directly to the shared camera source.
4. Align the cutout exactly with the original camera. Keep both the same size and position. Place Back chat between them and Front chat above them.

If your background-removal tool cannot filter a nested scene, use its documented independent-cutout workflow. Test arm and head movement: the cutout should remain aligned with the full camera.

4. Add the two browser sources

1. In Costa Chat, click Add to OBS and copy the Front chat link.
2. In OBS, add a new Browser source named Front chat. Leave “Local file” off and paste the URL.
3. Set Width and Height to your canvas size, typically 1920 × 1080. Set the custom frame rate to 60 if your setup allows it.
4. Turn off Shutdown source when not visible and Refresh browser when scene becomes active to keep connections stable. The widget’s page background is already transparent.
5. Repeat with the Back chat link as a separate Browser source. Use the same dimensions and transforms.

Arrange your main scene’s Sources list in this order, top to bottom:

1. 1Front chatBROWSER
2. 2Your camera cutoutTRANSPARENT
3. 3Back chatBROWSER
4. 4Game, scene or full cameraBACKGROUND

The settings page’s sample chat only appears in its preview. The Send test messages to OBS button deliberately sends samples to the real sources. Use it while preparing your scene, then click Clear overlay.

5. Tune the effect

Start with Chill Drift for calm, spacious motion; Cinematic for greater softness and depth; or Arcade Rush for brighter, faster movement. You can adjust each preset afterward.

Changes save automatically and reach both OBS sources. With passage off, each message stays in its assigned layer. With passage on, both sources use a shared timeline to hand the message from back to front. Excess and stale queued messages can be dropped to keep chat responsive.

Repeated chat and motion accents

Group repeated messages combines exact matching text and native emotes from the same platform and channel within a fixed window of up to six seconds (shorter at high speeds). The bubble grows gently and counts up to ×100. Distinct message IDs are needed to count repeats. A moderation event affecting any member removes the whole bubble. Recent messages stay separate so Spotlight still credits the individual viewer.

Gently curved paths adds a subtle arc while following your chosen travel direction. Smooth depth growth eases size changes during behind-to-front passage. Small emote bursts adds a bounded foreground flourish for emoji and native image emotes, with at most one burst every 1.2 seconds. Bursts respect safe zones and the browser’s reduced-motion preference. These motion settings travel with scene profiles and exported styles.

6. Protect your face and game controls

Open Scene and add a Face zone or Game HUD zone. Click Edit zones, then drag a rectangle or its corner handle on the preview. You can also enter its position and size as percentages. Choose whether it protects you from Front chat or Both layers.

Safe zones reserve horizontal lanes above and below the protected rectangle, or vertical columns beside it. Space is reserved for the full message size, curved paths and grouped growth. Long messages in vertical mode are shortened to fit their column. Messages do not curve around boxes or track your face. If every usable lane is blocked, the panel asks you to shrink a zone or widen the screen boundaries. Up to eight zones are available.

Choose direction and soften your chat boxes

Under Motion → Travel direction, choose Left to right or Top to bottom. Text stays upright. Screen-space boundaries become Left and Right in vertical mode. Both directions support behind-to-front passage, curves, grouping and protected areas.

Under Style, choose a boxed style such as Dark bubbles or Frosted glass. Set Box background opacity from transparent to solid, then use Box edge feathering to fade the background inward at its edges. Text, logos and emotes are unaffected by these controls. Behind-you opacity and Front chat opacity control the entire message in each layer. These settings also apply to Spotlight and save with scene profiles and exported styles.

Choose a message style

Under Style → Message style, pick a preview card: Dark bubbles, Floating text, Outlined text, Frosted glass, Neon edge, Comic pop, Minimal pill or Name tag. Each look works with both travel directions, depth, grouped chat and Spotlight. Outlined text and Floating text have no box background. Frosted glass adds translucent highlights; it cannot blur video from another OBS source.

Customize the neon edge

Select Neon edge, then choose Single color or Multicolor gradient. A gradient uses three to five editable colors in the displayed order. Use Add color or Remove last color to adjust the palette. Turn on Rotate gradient for a continuous animation, set Rotation time from 2 to 20 seconds per turn, and adjust Glow strength. Box opacity and feathering affect the fill while the neon edge stays crisp. Your colors and animation settings save in the workspace, scene profiles and style exports.

Choose a chat font

Under Style → Chat font, choose Modern, Arial, Verdana, Trebuchet MS, Georgia, Courier New or Impact. The sample below the picker previews your choice. Your font applies to both OBS layers, usernames, grouped chat and Spotlight, and saves with scene profiles and exported styles. These fonts use your streaming computer’s installed fonts, with a fallback if a font is unavailable.

Choose platforms and logos

Under Style → Platforms, use the Chat checkbox to turn each platform’s messages on or off. Use Logo to choose whether Twitch, Kick, YouTube or TikTok messages show their platform’s logo. The Show platform logos switch hides or shows all chosen logos. These choices apply to both OBS layers, grouped bubbles and Spotlight; logo choices are saved with your scene styles.

7. Save and share scene styles

Under Scene profiles, name the current look and click Save. Choose a saved scene and click Apply to restore appearance, motion and safe zones. Profiles save to this online workspace and follow its private studio link. Applying one does not switch your OBS scene.

Export style saves a JSON file you can share or keep as a backup. Import style applies one of these files. The style export contains only visual settings; it excludes connection addresses, passwords, session IDs and channel overrides. Your chat connections continue using their current settings.

8. Control the moment live

Hide chat removes all chat and Spotlight from both OBS layers and keeps them hidden until you choose Resume chat. It stays hidden across refreshes, scene profiles, presets and reconnects. Recent messages continue arriving in the studio, but they are not replayed when you resume. Test messages and Spotlight are blocked while hidden. Allow a moment for online controls to reach each source.

Clear only removes current messages. Pause preview affects this preview only. Use Hide chat for a lasting pause on stream.

Calm remains active until you choose another look. Hype has a shared countdown; restarting it extends the timer and preserves the original look. Editing settings or applying a preset during Hype cancels the timer and keeps your new settings. Select a viewer under Spotlight a viewer before Spotlight. Sample spotlights in sample preview remain preview-only; real OBS Spotlight needs a recent live message.

Choose Top, Center or Bottom for Spotlight. It tries that position first, then another clear position; if safe zones cover every option, it cannot appear. Check the studio preview. Enable Pin until dismissed to hold a message, or use Pin current on the active one. Add to queue lines up to eight messages; timed messages advance automatically and pinned messages wait for Dismiss / next. Remove skips a queued item. Clear and Hide empty the queue. Pins and queued messages survive refreshes; keep OBS sources open for live display.

Keep the controls inside OBS

Open OBS → Docks → Custom Browser Docks. Name the dock Costa Chat and paste your private dock link from Add to OBS. To receive chat in the dock, choose Chat connection and enter your bridge settings there; browser passwords do not transfer into OBS. Some OBS versions block local-network connections. If so, keep the studio connected in Chrome and use the dock only for controls. While the panel is focused and you are not typing in a field, Alt + Shift + 1–4 runs Calm, Hype, Spotlight and Clear. These shortcuts work inside the panel, not as system-wide hotkeys.

Streamer.bot and Stream Deck buttons

Create a Streamer.bot action with an Execute C# Code sub-action. Use the code below, then bind the action to your Stream Deck button through your existing Streamer.bot setup. Streamer.bot's WebSocket connection must be active.

public class CPHInline
{
    public bool Execute()
    {
        CPH.WebsocketBroadcastJson("{\"parallax\":{\"action\":\"hype\"}}");
        return true;
    }
}

Change hype to calm, spotlight or clear. Spotlight uses the latest live message unless you include its Costa Chat messageId. Controls also accept end-hype, queue-spotlight and dismiss-spotlight. A hype control can include duration: 15, 30 or 60. Spotlight can include pinned: true and position: top, center or bottom. Viewer chat text does not trigger controls. Official Streamer.bot broadcast documentation.

9. Emotes, badges and moderation

Enable emotes in Style to display native image parts supplied by Streamer.bot for Twitch, Kick and YouTube. Twitch and YouTube emote ranges are supported too. Badge images appear when the bridge provides a supported image URL, including native Twitch and Kick badges.

Enable 7TV, BTTV & FrankerFaceZ for Twitch global and channel emotes. Costa Chat detects the numeric broadcaster channel ID from incoming Twitch chat when available; use the optional Twitch channel ID field to override it. Public emote dictionaries load in the background. Early messages and provider outages can fall back to the emote name. No third-party account login is needed for these public dictionaries.

TikFinity supplies TikTok chat text and Unicode emoji in this release. Social Stream Ninja can provide image emotes and badge images from supported HTTPS sources. Received message HTML is converted to text and approved images; it is never inserted into the overlay page.

Streamer.bot Twitch message deletions, chat clears, bans and timeouts remove matching chat from the overlay and recent-message list when received. Supported typed Social Stream Ninja deletion packets can remove one message, one user's messages or a platform's chat. Availability depends on the upstream bridge sending that event. Automatic moderation synchronization is not claimed for YouTube, Kick or TikFinity. Use Clear, platform filters and ignored usernames as needed.

10. Message details, media and fades

In Style → Message details, toggle platform logos, avatars, usernames, timestamps, badges and mention highlights independently. Turn In-line chat off to put message text below its details. Box background color applies to all card styles, alongside opacity and feathering.

Enable Images & YouTube previews to show one fixed-size preview per message. Image permissions default to broadcaster and moderators; choose broadcaster only, add subscribers / paid members, or allow everyone. Permissions use roles provided by the bridge. Unknown roles are regular viewers. YouTube ordinary subscriptions do not qualify as paid membership. A YouTube thumbnail is available to any chatter when that separate switch is enabled; it never plays audio or video. Unsupported or unavailable media stays readable as a link.

Streamer.bot supplies profile pictures for Kick and YouTube; Twitch messages normally use initials. TikFinity and Social Stream Ninja pictures and roles depend on the metadata they provide. Badges use platform images when supplied, otherwise a compact role marker. Timestamps show the original message time, or the bridge receipt time when unavailable, in your computer’s local time.

In Motion → Fade in & out, enable screen-boundary fades and set four percentages: start fading in, fully visible, start fading out, and fully invisible. They measure each message’s center from left to right or top to bottom, matching travel direction. Preview guides stay out of OBS. Both OBS layers share the same fade during behind-to-front passage. Spotlight keeps its timed fade. Wider fade ranges make the transition gentler.

11. Pop motion and tilt

Choose Motion → Motion style → Pop behind you. Soft pop eases each message into place; Burst pop adds a bounce and a brief outline pulse. Both hold briefly and fade out on the Back chat source. Set the time on screen, area center and spread to suit your camera placement. Zero spread uses one position. Your camera needs a transparent background to reveal chat around your outline.

Pop keeps messages behind you regardless of the saved foreground ratio or behind-to-front setting. Spotlight still appears in front. Screen-boundary fades and travel direction apply to Drift; Pop has a timed entrance and exit. Only safe zones protecting both layers block rear pop positions. A message waits for a free scheduled position or is dropped when the queue is too old.

Open Tilt messages to enable an angle from −30° to +30°. Disable varied angles for a fixed lean, or enable them for stable per-message variation up to the chosen amount. Tilt applies to drift, pop, falling stacks and Spotlight. Rotated cards reserve extra space to protect safe zones. Larger cards and stronger tilts allow fewer messages. These settings are saved with your scene profiles and exported styles.

Troubleshooting

• Messages do not go behind your body: your cutout has an opaque background or your layer order is wrong.
• All messages are hidden: check browser-source URLs, canvas size, camera order, source connection and platform filters. Use the OBS test button to separate an overlay issue from a chat connection issue.
• Back chat is harder to read: raise Behind-you opacity, reduce softness, or increase the smallest text.
• Streamer.bot is disconnected: start its WebSocket server and check the address and password. The widget reconnects automatically after temporary outages.
• OBS is blank after a restart: reopen your saved studio link and connect your bridges. Confirm both OBS URLs contain their private keys. If you replaced the OBS links, update both sources.
• Browser says blocked or cannot connect: allow local-network access in your browser’s site settings and start the bridge. Use the studio in Chrome if your OBS dock cannot connect locally. Social Stream Ninja’s secure relay is another option.
• Your private link expired: workspaces expire after 30 days without owner activity. Use Create new workspace, then replace the OBS links. Browser storage can be cleared by private browsing or browser settings; save your private studio link somewhere you trust.

12. Falling stacks

Choose Motion → Motion style → Falling stack for chat that wraps into varied squares and rectangles, then drops into a shared grid. Adjust Fall speed, Maximum stack height, and Tile size; switch Bounce on landing on or off. Preview a full stack demonstrates a full board and its next row clearing using sample messages only.

Short and long messages receive different tile shapes and text sizes. New tiles seek the lowest open gaps and land on a flat foundation, with even spacing between their edges. When there is no room, whole bottom tiles fade away and the remaining cards settle into a compact layout. Message text wraps and fits inside its tile instead of being cut off. Very long messages may use smaller text. Choose Behind me for the Back chat OBS source, or In front of me for the Front source. Your camera cutout stays between the two sources. Tilt, fonts, message styles, details and media all work with this motion.

Safe zones protect the entire path down each grid column. Tile sizes adapt to your height limit. Keep tilt off for straight, closely aligned edges; when enabled, tilted cards fit inside their reserved tiles. If no tiles fit, adjust protected areas. Landed tiles keep their positions until clearing or moderation makes room for a new arrangement. Screen-boundary fades, travel direction and per-layer density apply to Drift; the stack uses its own arrival fade, row clearing and size limit.

Refreshing an OBS source restores the current stack. Deleted messages disappear, and the remaining cards settle into place. Clear, hiding chat or saving a new appearance resets the stack. Excess messages can be dropped when the queue fills. These settings save with scene profiles and style exports.

What is included

Chat from Twitch, Kick, YouTube and TikTok through the bridges above; supported image emotes and badges; three motion presets; safe zones; profiles and style sharing; live controls; foreground Spotlight; optional behind-to-front passage; busy-chat limits; and supported moderation events. Gift, subscription and raid celebrations, automatic person segmentation and advanced emote cosmetics are not included. The preview camera card is a placement guide; Use your cutout loads a transparent PNG or WebP locally.

Costa Chat keeps a short chat buffer online for synchronization and Spotlight. Busy streams may drop queued chat to keep the overlay readable; this is an overlay, not a chat archive. Messages without upstream IDs or timestamps use a content fallback, so identical repeats may be suppressed. Live account delivery must be checked with your own platform accounts.

Private links and saved data

Bridge passwords, local addresses and Social Stream Ninja session IDs stay in the browser where you enter them. They are not stored in your online workspace or included in OBS links or style exports. The browser uses them to connect to your bridge or Social Stream Ninja.

Your private studio and dock links grant control of your workspace. OBS links grant read-only access to its settings and chat. Anyone with a private link can use its access, so do not show it on stream. Share only the public website address. Replace OBS links invalidates old display links; replace both Browser source URLs afterward. Save the updated studio link too.

Visual settings and scene profiles persist online. Recent chat is served for up to four minutes and removed from the stored buffer as your workspace updates. Falling-stack messages and their grouped member identities stay in the workspace until their row clears, they are moderated, the stack is reset, or the workspace expires. Pinned and queued Spotlight messages are retained until dismissed, cleared or the workspace expires. Inactive workspaces become inaccessible after 30 days and are cleaned up as new workspaces are created. Your uploaded preview cutout stays in your browser. No camera video is uploaded.

Integration references: Streamer.bot authentication · Twitch chat · Kick chat · YouTube chat · OBS browser sources.