# Kick Viewer Widget

**Getting Started**

For this process you will need a KickBot account. If you do not already have a KickBot account navigate to [kickbot.app](https://kickbot.app) and sign up. For more information, follow [this guide](https://docs.kickbot.com/dashboard/creating-your-account) on getting started.

To start, navigate to the "Viewer Widget" page under "Widgets" in the left-hand navigation.

<figure><img src="https://488718071-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2F6OLqbpx7W0nzTqPrmIIl%2Fuploads%2FI5whp7OoJKk99tQMOq6q%2Fimage.png?alt=media&#x26;token=cde7a515-6009-451c-9a8c-34dcebd84993" alt=""><figcaption></figcaption></figure>

### **Configuring the Viewer Widget**

There are several different configurable options. You can adjust these until you have a nice overlay that fits your stream and your vibe.

<figure><img src="https://488718071-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2F6OLqbpx7W0nzTqPrmIIl%2Fuploads%2FBjDJsPwAHoK9KO91IJhx%2Fimage.png?alt=media&#x26;token=763f4a06-d016-4cbb-a86e-1a0029b68858" alt=""><figcaption></figcaption></figure>

The configurable options are:

* **Text:** Change the text displayed on the widget.
* **Font size:** Adjust the size of the font, by default this is set to 32px.
* **Boldness:** Change the weight of the text, by default this is set to normal.
* **Font:** A variety of different font options to choose from.
* **Animate change:** Animates the viewer count changes.
* **Text color:** Set the color of the widget text using a dropper or hex code.

### Preview

Preview all of the above settings and presets in real-time to see how they are applied.

<figure><img src="https://488718071-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2F6OLqbpx7W0nzTqPrmIIl%2Fuploads%2FvMmy27YnV58nrzyuctcO%2Fimage.png?alt=media&#x26;token=643425fa-9607-43ea-acbf-8748f2677d7b" alt=""><figcaption></figcaption></figure>

### Setting up your browser source

#### 1. Copying the widget URL

At the top of the screen above the configuration and preview sections, there is a box labeled "Widget URL". This URL is how you will add the viewer widget to your OBS or Streamlabs. Copy this URL.

<figure><img src="https://488718071-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2F6OLqbpx7W0nzTqPrmIIl%2Fuploads%2FafumJXmNzuxIbXAzGbD5%2Fimage.png?alt=media&#x26;token=2c1b535c-b8ac-4b6d-b1e0-55a7f5f6e3e2" alt=""><figcaption></figcaption></figure>

#### 2. Adding a browser source

Setting this up in OBS and Streamlabs is a very simple process. This section will just cover the OBS instructions, but if you are using Streamlabs the naming and instructions are nearly identical. Once OBS or Streamlabs is open you will need to add a browser source.

<figure><img src="https://uploads-ssl.webflow.com/645d308cda6e53d4b089e9c3/645d38fb8733845c2ffc0290_CleanShot%202023-05-11%20at%2011.49.08%402x.png" alt="Adding a browser source in OBS or Streamlabs"><figcaption></figcaption></figure>

#### 3. Enter your widget URL

Inside of the browser source modal paste the widget URL you copied from KickBot into the "URL" field.

<figure><img src="https://488718071-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2F6OLqbpx7W0nzTqPrmIIl%2Fuploads%2FbSfkPNge9wdLAcIdSqlV%2Fimage.png?alt=media&#x26;token=22be5c37-5f88-4e4e-a007-7762e08e57d9" alt=""><figcaption></figcaption></figure>

<figure><img src="https://488718071-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2F6OLqbpx7W0nzTqPrmIIl%2Fuploads%2FrUYGeY1h6zwtz8xZOtjw%2Fimage.png?alt=media&#x26;token=64ec9b77-ef7b-4305-9d3f-15a4cc9b6f52" alt=""><figcaption></figcaption></figure>

{% hint style="info" %} <mark style="color:blue;">You do not need to edit any of the browser source settings.</mark>
{% endhint %}

#### 4. Testing it out

After you add the browser source you will see your real-time viewer count on stream! \
If you update any of the widget settings while streaming you will need to reload the widget by refreshing the browser source.&#x20;

<figure><img src="https://488718071-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2F6OLqbpx7W0nzTqPrmIIl%2Fuploads%2FEeJ2QjYZUoNjEXlvcqK0%2FCleanShot%202023-05-17%20at%2014.04.51%402x.png?alt=media&#x26;token=fa33b6df-6360-473e-a28b-4f081cb82562" alt="Changing settings and refreshing the browser source"><figcaption></figcaption></figure>

{% hint style="info" %} <mark style="color:blue;">If you are not currently streaming, the viewer count will be set to 0.</mark>
{% endhint %}