# Kick Chat Widget

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.

{% hint style="info" %}
This guide assumes you have a KickBot account with your Kick channel connected.
{% endhint %}

## Browse the Widget Library

Navigate to [kickbot.com/dashboard/widget-library](https://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.

<figure><img src="/files/6SUkzuoz9If3LFRohxRv" alt="KickBot Widget Library showing chat widgets, alerts, viewer count and follower goal tiles in the grid"><figcaption><p>The Widget Library lists chat widgets next to alerts, viewer counters, follower goals and other overlay types.</p></figcaption></figure>

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**.

<figure><img src="/files/lVG0aX1ECjhvMRh4i3DH" alt="Basic Chat Widget detail page in the KickBot Widget Library with the Install Widget button"><figcaption><p>The Basic Chat Widget detail page, with previews on the left and the Install Widget button on the right.</p></figcaption></figure>

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](https://kickbot.com/dashboard/saved-widgets). Each card has four action buttons: **Edit**, **URL**, **Clone**, and the trash icon to delete.

<figure><img src="/files/qXvn8FlH2iKaL40051gY" alt="Saved Widgets page with the installed Basic Chat Widget card and its Edit, URL, Clone action buttons"><figcaption><p>Saved Widgets shows your installed widget with Edit, URL, and Clone actions.</p></figcaption></figure>

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.

<figure><img src="/files/KYJJ6BleHgLthk7UO9Ap" alt="Basic Chat editor with Widget Settings on the left and live Kick chat overlay preview on the right"><figcaption><p>The editor previews your changes against sample chat as you toggle settings.</p></figcaption></figure>

### 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.

{% hint style="info" %}
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.
{% endhint %}

## Add it to OBS as a browser source

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

<figure><img src="/files/YeLkeOBvCLQC473dxsRR" alt="OBS Integration accordion with the Kick chat overlay browser source URL and recommended dimensions for OBS"><figcaption><p>The OBS Integration section gives you the browser source URL and the recommended source dimensions.</p></figcaption></figure>

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.

{% hint style="warning" %}
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.
{% endhint %}

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.

<figure><img src="/files/7IrV9SnjSh161jvwiJCV" alt="KickBot Widget Library filtered to chat showing Basic Chat plus block, box, animated, sideways and typewriter chat styles"><figcaption><p>Searching "chat" shows the Basic Chat variants alongside community-made chat overlays in different styles.</p></figcaption></figure>

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

<details>

<summary>How do I add Kick chat to OBS?</summary>

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

</details>

<details>

<summary>How do I make a transparent Kick chat overlay?</summary>

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.

</details>

<details>

<summary>Can I customize the look of Kick chat on stream?</summary>

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.

</details>

<details>

<summary>How do I get the Kick chat URL for OBS?</summary>

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.

</details>

<details>

<summary>Why are my changes not showing on stream?</summary>

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.

</details>

## Need a hand?

If something looks off or the chat will not load in OBS, email <support@kickbot.com> or drop into the `#support` channel on the [KickBot Discord](https://discord.gg/MAg3gBbc89).


---

# Agent Instructions: Querying This Documentation

If you need additional information that is not directly available in this page, you can query the documentation dynamically by asking a question.

Perform an HTTP GET request on the current page URL with the `ask` query parameter:

```
GET https://docs.kickbot.com/dashboard/widgets/chat.md?ask=<question>
```

The question should be specific, self-contained, and written in natural language.
The response will contain a direct answer to the question and relevant excerpts and sources from the documentation.

Use this mechanism when the answer is not explicitly present in the current page, you need clarification or additional context, or you want to retrieve related documentation sections.