💬Kick Chat Widget

Add a Kick chat overlay to OBS in three steps using KickBot's Widget Library: install a chat widget, customize the look, and paste the browser source URL.

A chat overlay puts your live Kick chat directly on your stream so viewers can follow along. KickBot's Widget Library has several pre-built chat styles plus dozens of other overlay types, and the setup flow is the same for all of them. This guide walks through adding a chat widget using the KickBot Basic Chat Widget as the example.

This guide assumes you have a KickBot account with your Kick channel connected.

Browse the Widget Library

Navigate to kickbot.com/dashboard/widget-library. The library lists every widget you can install, sorted by installs by default. Chat widgets sit alongside follower alerts, sub alerts, viewer counters, follow goals, pinned messages, and more, so the same flow you use for chat applies to any other overlay you want later.

The Widget Library lists chat widgets next to alerts, viewer counters, follower goals and other overlay types.

The Basic Chat Widget tile sits near the top because it is the most-installed widget on the platform. Click it to open the detail page.

Install the widget

On the detail page you get previews on the left and an Install Widget button on the right. Click Install Widget. The widget is copied into your saved widgets and the button changes to a link back to Saved Widgets.

The Basic Chat Widget detail page, with previews on the left and the Install Widget button on the right.

Installing makes a personal copy of the widget. Your customizations live on that copy, not the original library entry, so you can install the same widget twice (or clone it later) if you want different versions for different scenes.

Customize the look in Saved Widgets

Navigate to kickbot.com/dashboard/saved-widgets. Each card has four action buttons: Edit, URL, Clone, and the trash icon to delete.

Saved Widgets shows your installed widget with Edit, URL, and Clone actions.

Click Edit to open the customization popup. Settings live on the left, a live preview on the right that replays sample chat as you toggle things.

The editor previews your changes against sample chat as you toggle settings.

What you can change

• Widget name. Text label so you can tell duplicates apart in your saved list.

• Font size. Pixel value for the message text. The default is 26.

• Text color. Color picker or hex code for the message body. By default the widget keeps each chatter's Kick name color and uses white for message text.

• Show bots. When off, messages from KickBot and similar bots are hidden.

• Show badges. Toggles the Kick badges (mod, sub, VIP, OG, broadcaster) next to chatter names.

• Show emotes. Toggles Kick and 7TV emotes.

• Text shadow. Adds a soft shadow and outline so messages stay readable over various backgrounds.

• Highlight @ messages. Highlights any chat message that tags your username.

• Remove old messages. When on, messages fade out after the time below.

• Remove messages after. Seconds before a message is removed. Default is 60.

The Save Changes button only enables once you have actually changed something. The chat overlay is transparent by default. Only the message text, names and badges render, with no background, so the widget sits cleanly over gameplay in OBS.

Test events under the Test Events accordion send a fake chat message, follow, sub, gift, raid, or KICKs event into the preview only. They do not appear on stream or in your streaming software.

Add it to OBS as a browser source

Inside the editor, expand OBS Integration to copy the browser source URL.

The OBS Integration section gives you the browser source URL and the recommended source dimensions.

The eye icon reveals the URL. Click the field (or the Click to copy overlay) to copy it to your clipboard. In OBS:

1. Add a new Browser source to your scene.

2. Paste the URL into the URL field.

3. Set Width to 800 and Height to 600 to match the widget's native size.

4. Click OK.

Your Kick chat will appear on stream within a second or two, along with new messages as they come in.

Treat the browser source URL as a secret. Anyone with it can send fake events into your chat preview. Do not paste it into chat or share it on social. If it leaks, delete the widget from your saved list and reinstall to get a new URL.

You can also grab the URL without opening the editor. The URL button on the saved-widget card opens a popup with the same browser source field and OBS instructions.

Other chat widget styles

If the default style does not suit your stream, the library has several other chat widgets to pick from. Search chat in the library to filter the grid down to chat-only entries.

Searching "chat" shows the Basic Chat variants alongside community-made chat overlays in different styles.

Three are official KickBot widgets:

• Basic Chat Widget. The default transparent style covered above.

• Basic chat (Block background). Each message sits inside its own solid block.

• Basic chat (Box background). All messages sit inside one rounded box.

The rest are community-made overlays with animated, typewriter, sideways and other looks. They install through the same one-click flow and customize through the same editor. If you want full control, use Clone in your saved widgets to fork an installed widget and tweak it independently from the original.

FAQ

How do I add Kick chat to OBS?

Install a chat widget from kickbot.com/dashboard/widget-library, open it from Saved Widgets, customize it to your liking, and copy the browser source URL into a new Browser source in OBS at 800x600.

How do I make a transparent Kick chat overlay?

The Basic Chat Widget is transparent by default. Only the message text and badges render, with no background, so the chat sits directly over your gameplay scene with nothing behind it.

Can I customize the look of Kick chat on stream?

Yes. Open the widget from Saved Widgets and use the editor to change font size, text color, text shadow, badge visibility, emote rendering, the @ highlight, and how long messages stay on screen. Other chat widgets in the library offer different styles (block backgrounds, box backgrounds, animated, sideways, typewriter) if you want a different look entirely.

How do I get the Kick chat URL for OBS?

From either the **URL** action on the saved-widget card, or the **OBS Integration** accordion inside the widget editor. Both show the same browser source URL plus the recommended source size.

Why are my changes not showing on stream?

OBS caches browser sources. After saving in the editor, right-click the browser source in OBS and choose **Refresh cache of current page** (or click the **Refresh** button in its properties) to load the new settings.

Need a hand?

If something looks off or the chat will not load in OBS, email [email protected] or drop into the #support channel on the KickBot Discord.