Kick Chat Overlay CSS Generator

Customize your BotRix or Streamlabs Kick chat widget instantly. Make it transparent, add outlines, and generate OBS Browser Source CSS.

KickViewer99 Just tuned in! The stream quality looks incredibly crisp today.
GamerPro Can you show me what OBS settings you are using for this game?
ModAccount Welcome to the stream everyone! Be sure to drop a follow if you are new here.

Complete your Kick stream's look

A custom chat is a great start. Match it with a full overlay + alerts pack from OWN3D for a consistent, pro-level broadcast.

Get My Overlay Pack → Affiliate link — we may earn a commission at no extra cost to you.

The Ultimate Guide to Kick Chat Overlays in OBS Studio

When you transition to streaming on Kick, one of the first things you'll realize is that reading a fast-moving chat on a second monitor can be tough. Adding a Kick chat overlay directly to your OBS Studio broadcast not only helps you read messages without turning your head, but it massively boosts viewer engagement. When viewers see their name pop up on the stream, they are far more likely to chat again.

Pro Tip: Never use a solid background for your chat widget. Always use a transparent or semi-transparent background (around 50% opacity) so your gameplay isn't completely blocked. Use the CSS Generator above to achieve this instantly.

Step 1: Choose Your Chat Widget Provider (BotRix vs. Streamlabs)

Because Kick is a newer platform, you cannot simply copy a URL directly from the Kick website into OBS. You must use a third-party chat bot that integrates with Kick's API.

  • BotRix: The undisputed king of Kick streaming right now. It is incredibly reliable, updates fast, and pulls in user avatars. Our CSS generator has a dedicated BotRix mode specifically for this widget.
  • Streamlabs: A staple in the streaming community. Recently, Streamlabs added official support for Kick. If you already use Streamlabs for Twitch, you can easily add your Kick account to it.

Step 2: How to Connect BotRix to Kick and Get the URL

If you've chosen BotRix (highly recommended), follow these exact steps to generate your base browser source URL:

  1. Go to Botrix.live and log in using your Twitch, YouTube, or Discord account.
  2. On the main dashboard, locate the Kick section and click "Sign in with Kick". Follow the prompt to make BotRix a moderator in your channel.
  3. Once connected, navigate to the Widgets tab on the left sidebar, and select Chat.
  4. Here, you can configure basic settings. Make sure you check "Hide Bot Messages" so commands don't clutter your screen.
  5. At the bottom of the page, click the Copy Widget URL button.

Step 3: How to Add the Kick Chat Browser Source in OBS

Now that you have your BotRix or Streamlabs URL, it's time to put it on your stream.

  1. Open OBS Studio.
  2. In the Sources dock, click the + (Plus) icon and select Browser.
  3. Name the source "Kick Chat Overlay" and click OK.
  4. In the URL field, paste the link you copied from BotRix/Streamlabs.
  5. Change the Width to 400 and the Height to 600 (this provides a nice vertical column).
  6. Crucial Step: Scroll down to the Custom CSS box. Delete whatever is in there. Scroll to the top of this page, design your chat using our generator, click "Generate CSS", and paste our custom code into this box!

Troubleshooting: Why is my Kick Chat not showing?

If you've followed the steps above and your chat isn't appearing on screen when people type, check these common issues:

  • BotRix Mod Status: If BotRix is not a moderator in your Kick channel, it cannot read the chat API properly. Go to your Kick creator dashboard and ensure `/mod botrix` has been executed.
  • OBS Cache: Sometimes OBS caches the browser source incorrectly. Double-click your Browser Source in OBS, scroll down, and click the "Refresh cache of current page" button.
  • CSS Errors: If you manually typed CSS and missed a bracket `}`, the entire code will break. Always use a generator (like the one above) to ensure your CSS syntax is perfect.