# Add Kick chat to OBS

> Two ways to get Kick chat in OBS: a chat dock so you can read chat while live, and a transparent chat overlay so viewers see it on stream.

Source: https://kickbot.com/guides/setup/add-kick-chat-to-obs

There are two ways to add Kick chat to OBS, and most streamers want both. A **chat dock** shows chat inside the OBS window, so you can read it while you stream. A **chat overlay** is a browser source in your scene, so viewers see chat on the stream, for example in a VOD or a clip.

The dock uses Kick's own popout chat. The overlay needs a chat widget from a tool such as KickBot or Streamlabs. Both steps take a few minutes.

## Dock or overlay?

| | Chat dock | Chat overlay |
|---|---|---|
| Who sees it | Only you, in OBS | Your viewers, on stream |
| What it is | A panel in the OBS window | A browser source in your scene |
| Where it comes from | Kick's popout chat URL | A chat widget (KickBot, Streamlabs, others) |
| Can you type in it | No | No |

## Add a Kick chat dock in OBS

These steps come from Kick's guide [How to create a Kick chat dock in OBS](https://help.kick.com/en/articles/7978574-how-to-create-a-kick-chat-dock-in-obs).

1. Open OBS.
2. In the menu bar, click **Docks** > **Custom Browser Docks**.
3. Enter a name, for example "Kick Chat".
4. Enter your popout chat URL: `https://kick.com/popout/yourchannel/chat`. Replace `yourchannel` with your Kick username.
5. Click **Apply**, then **Close**.
6. Click **Docks** and choose **Kick Chat** to show it. Drag it to where you want it in the OBS window.

Kick lists these limits for the dock:

- You cannot sign in or send messages from the dock. Keep kick.com open in a browser if you want to type.
- A cookie banner can cover part of the chat. Make the dock wider so it does not hide messages.
- "Disconnected" means you are not signed in. New messages still show.

## Add a Kick chat overlay to your stream

An overlay shows chat on top of your game or camera, with a transparent background. You add it as a **Browser** source. Here are the steps with the KickBot chat widget, which is free.

### 1. Install a chat widget in KickBot

1. [Create a KickBot account](https://kickbot.com/docs/getting-started/create-your-account) and connect your Kick channel, if you have not yet.
2. Open the [Widget library](https://kickbot.com/dashboard/widget-library).
3. Open **Basic Chat Widget** (an official widget by KickBot) or another chat style you like.
4. Click **Install widget**. The widget is added to **Saved widgets**.
5. In [Saved widgets](https://kickbot.com/dashboard/saved-widgets), click **Copy URL** on the widget. Click **Edit** first if you want to change how it looks.

### 2. Add the browser source in OBS

1. In OBS, select your scene.
2. Under **Sources**, click **+** and choose **Browser**.
3. Name it, for example "Kick chat overlay", and click **OK**.
4. Paste the widget URL into **URL**.
5. Set **Width** to 800 and **Height** to 600 (the size of the Basic Chat Widget). Change it later to fit your layout.
6. Click **OK**. Drag and resize the overlay in the preview.

The OBS browser source has a default custom CSS that makes the page background transparent ([OBS browser source](https://obsproject.com/kb/browser-source)), so only the chat messages show over your scene.

For every widget setting and more chat styles, see [Chat overlay](https://kickbot.com/docs/widgets/chat-overlay). For browser source help in OBS, Streamlabs Desktop and Meld, see [Add a browser source](https://kickbot.com/docs/getting-started/add-browser-source-obs).

> **Caution:** Keep the widget URL private. Do not show it on stream or in screenshots.

## Other ways to show Kick chat on stream

- **Streamlabs.** Streamlabs says it has a chat box widget for Kick streams ([Streamlabs](https://streamlabs.com/content-hub/post/how-to-live-stream-to-kick-using-streamlabs-desktop)). See [Streamlabs and Kick](https://kickbot.com/guides/setup/streamlabs-and-kick).
- **Web Go Live.** If you stream from your browser with Kick's Web Go Live, it has a built-in **Chat Box** widget. You do not need OBS for that ([Kick help center](https://help.kick.com/en/articles/15952303-kick-studio-web-go-live)).

## Troubleshooting

**The overlay is empty.** Send a test message in your Kick chat and wait a few seconds. If nothing shows, right-click the source, choose **Properties**, and click **Refresh cache of current page**.

**The overlay has a solid background.** Check that the **Custom CSS** box in the browser source still has the default transparent background. If you changed it, delete your changes.

**Chat is cut off or too small.** Change **Width** and **Height** in the source properties instead of stretching the source. Stretching makes the text blurry.

**The dock shows a cookie banner.** This is a known limit of Kick's popout chat in a dock. Make the dock wider.

## FAQ

**How do I add Kick chat to OBS?**

For a chat you can read, add a custom browser dock in OBS with the URL `https://kick.com/popout/yourchannel/chat`. For chat on stream, add a chat widget URL (for example from KickBot) as a Browser source in your scene.

**How do I get a transparent Kick chat overlay?**

Use a chat widget made for OBS, such as the KickBot chat widget, and add it as a Browser source. OBS makes the page background transparent by default.

**Can I type in Kick chat from OBS?**

No. Kick says you cannot sign in or send messages from the dock. Keep kick.com open in a browser or on your phone to type.