# Kick Viewer Widget

A view count overlay puts your realtime Kick viewer number on stream so the count is easily visible on your stream. KickBot's Widget Library has a couple of viewer-count styles plus dozens of other overlay types, and the setup flow is the same for all of them. This guide walks through adding the default **Viewer Count** widget end to end.

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

## Open 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. The Viewer Count tile sits near the top alongside chat overlays, follower alerts, sub alerts, follow goals, raid alerts, and more, so the same flow you use here applies to any other overlay you want to add later.

<figure><img src="/files/TX5sDtDCpCRxWVzuwL7n" alt="KickBot Widget Library showing the Viewer Count tile alongside chat widgets, follower alerts, sub alerts and follow goal tiles in the grid"><figcaption><p>The Widget Library lists Viewer Count next to chat widgets, alerts, follow goals, and other Kick overlays.</p></figcaption></figure>

Click the **Viewer Count** tile to open its detail page.

## Install the widget

The detail page shows preview thumbnails on the left (one per icon option the widget supports) and an **Install Widget** button on the right. Click **Install Widget** and the preset is copied into your saved widgets. The button switches to a link back to **Saved Widgets** once the install is done.

<figure><img src="/files/3q0YqGIVlrpOwYYwj9hn" alt="Viewer Count widget detail page in the KickBot Widget Library with the Install Widget button on the right"><figcaption><p>The Viewer Count detail page, with icon preview thumbnails on the left and Install Widget on the right.</p></figcaption></figure>

Installing creates a personal copy of the widget. Your customizations live on that copy, not the original library entry, so you can install or clone it again later if you want a different version for a different scene.

## 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/awcpYx170jqzIrW2ZBmG" alt="Saved Widgets page with the installed Viewer Count card and its Edit, URL, Clone, and delete action buttons"><figcaption><p>Saved Widgets shows your installed Viewer Count card with Edit, URL, and Clone actions.</p></figcaption></figure>

Click **Edit** to open the customization popup. Settings sit on the left and a live preview is on the right.

<figure><img src="/files/OeMtZ5OW7Qqrpvx3UY5N" alt="Viewer Count widget editor with Widget Settings showing Icon, Background color and Text color fields next to the live preview"><figcaption><p>The editor previews your changes against the current count as you adjust each setting.</p></figcaption></figure>

### What you can change

* **Widget name.** A label so you can tell duplicates apart in your saved list. The widget on stream does not show this name.
* **Icon.** The graphic shown next to the number. Four choices: **Kick** (the K logo, the default), **People**, **Person**, and **Eye**.
* **Background color.** Color picker or hex value for the rounded pill behind the icon and number. The default is black.
* **Text color.** Color picker or hex value for the viewer count number. The default is white.

The **Save Changes** button only enables once you have actually changed something. **Reset to Default** restores every field to its preset value if you want to start over (it does not save on its own; click **Save Changes** afterwards).

{% hint style="info" %}
Expand the **Test Events** accordion to send a fake **Viewer count updated** event. The preview jumps to a sample number so you can see how the colors and icon look against a real count. Test events only run in the editor preview, never on stream or in your streaming software.
{% endhint %}

<figure><img src="/files/FcTJEuff0Iy4m9kyrbu2" alt="Test Events accordion expanded with the Viewer count updated button and the preview showing a sample count of 3,430"><figcaption><p>The test event bumps the preview count so you can see the widget in motion.</p></figcaption></figure>

## Add the viewer counter to OBS

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

<figure><img src="/files/1Wa8NtipD7SQbJ0NHlyv" alt="OBS Integration accordion showing the browser source URL for the Kick viewer counter and the recommended 220x100 dimensions"><figcaption><p>The OBS Integration section gives you the browser source URL and the recommended source size.</p></figcaption></figure>

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

1. Add a new **Browser** source to your scene.
2. Paste the URL into the **URL** field.
3. Set **Width** to 220 and **Height** to 100 to match the widget's native size.
4. Click **OK**.

Your viewer count appears on stream within a second or two. If you change a setting later, save it in the editor and refresh the browser source in OBS to pick up the new look.

{% hint style="warning" %}
Treat the browser source URL like a password. Anyone with it can render your overlay on their own page or send fake events into your preview. Do not paste it in chat or share it on social. If it leaks, delete the widget from your saved list and reinstall to get a fresh URL.
{% endhint %}

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

## What the count actually shows

The number reflects your current Kick.com viewer count and updates as Kick reports new counts (typically updates a few times per minute). When your stream is offline the count is 0.

## Other viewer-count styles in the library

If the rounded pill is not the look you want, the library has another viewer-count style to pick from. Type **viewer** into the search box at the top of the library to filter the grid down.

<figure><img src="/files/TJegwY7u2LIKAKV5j0lv" alt="KickBot Widget Library filtered to viewer search showing the Viewer Count and Text Viewer Count widgets"><figcaption><p>Searching "viewer" filters the library down to the two viewer-count style widgets.</p></figcaption></figure>

* **Viewer Count.** The default rounded pill with an icon and number, covered above.
* **Text Viewer Count.** Plain-text rendering ("Viewers: 3,372") with no icon or pill background. Better when you want a minimal look that blends into a text-heavy scene.

Both install through the same one-click flow and customize through the same editor. If you want a count that fills toward a target instead of a raw number, search **goal** in the library for follower-goal and sub-goal style overlays.

## FAQ

<details>

<summary>How do I show my Kick viewer count on stream?</summary>

Install the Viewer Count widget from [kickbot.com/dashboard/widget-library](https://kickbot.com/dashboard/widget-library), open it from [Saved Widgets](https://kickbot.com/dashboard/saved-widgets), copy the browser source URL from the OBS Integration section, and add it to OBS as a Browser source.

</details>

<details>

<summary>Can I add a viewer counter to OBS for Kick?</summary>

Yes. The widget is a standard OBS browser source. Paste the URL from the editor's OBS Integration panel into a new Browser source and click OK.

</details>

<details>

<summary>Why does my widget show 0?</summary>

The Kick view count is 0 whenever the channel is offline. Once you go live, the widget switches to your real count within a few seconds. If it stays at 0 while live, refresh the browser source in OBS and double check that the URL you pasted matches the one in the editor.

</details>

<details>

<summary>Can I change the icon next to the viewer count?</summary>

Yes. The Icon dropdown in the editor offers four options: Kick (the K logo, default), People, Person, and Eye. Pick one, click Save Changes, and refresh the browser source in OBS.

</details>

<details>

<summary>Can I have more than one Viewer Count widget?</summary>

Yes. Click \*\*Clone\*\* on the saved-widget card to duplicate it. Each copy has its own browser source URL and its own colors and icon, so you can keep one for your gameplay scene and a different one for your starting screen.

</details>

## Need a hand?

If the count never appears in OBS or the URL refuses to copy, email <support@kickbot.com> or hop 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/kick-viewer-widget.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.