# Kick Chat 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 "Chat 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%2FFcwcDRrrfDvE7zQN6hvE%2Fimage.png?alt=media&#x26;token=91f3af10-dd88-4bab-b783-7dd4fffd80eb" alt=""><figcaption></figcaption></figure>

### **Configuring the Chat Widget**

The default settings mimic the chat style on Kick.com, however, there are a wealth of customizable features to take advantage of.

<figure><img src="https://488718071-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2F6OLqbpx7W0nzTqPrmIIl%2Fuploads%2FeGIrj90kshygCXrrK7n7%2Fimage.png?alt=media&#x26;token=0749ec88-4255-4853-b193-41fefcd7bb53" alt=""><figcaption></figcaption></figure>

These settings are:

* **Preset:** Pre-created theme presets.
* **Slide direction:** Options to define how new messages appear in the chat.
* **Font:** A variety of different font options to choose from.
* **Text color:** Set the color of the chat text using a dropper or hex code.
* **Font size:** Adjust the size of the font, by default this is set to 16px.
* **Spacing:** Define how much space there is between chat messages, by default this is set to 1px.
* **Background opacity:** Set the chat background transparency, by default this is set to 30%.
* **Background color:** Set the color of the chat widget using a dropper or hex code.
* **Background type:** Set the chat widget background type.
* **Icons & Pinned messages:** Display icons next to user names and/or pinned messages at the top of the chat widget.
* **Pinned message opacity:** Set the pinned message at the top of the chat widget's transparency, by default this is set to 50%.

### 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%2FBMKxUT5X6wjX6mtcVt3W%2FCleanShot%202024-04-02%20at%2015.23.59%402x.png?alt=media&#x26;token=12c608b9-8917-487c-baaa-72eff563a610" alt=""><figcaption></figcaption></figure>

### Setting up your browser source

#### **1. Copying your Widget URL**

Above the configuration and preview sections, you'll find a box labeled "Widget URL." This URL is your key to adding the chat to OBS or Streamlabs. Simply copy this URL.

<figure><img src="https://488718071-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2F6OLqbpx7W0nzTqPrmIIl%2Fuploads%2F3KeHieFuFI3oKuPeIvd6%2Fimage.png?alt=media&#x26;token=8e86f316-587f-46fe-8b93-60ad9a9daec1" alt=""><figcaption></figcaption></figure>

#### **2. Adding a browser source**

Configuring this in OBS and Streamlabs is a straightforward process. We'll provide instructions for OBS, but if you're using Streamlabs, the steps are nearly identical. Once OBS or Streamlabs is open, you'll 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 to OBS or Streamlabs"><figcaption></figcaption></figure>

#### **3. Entering Your Widget URL**

Inside the browser source settings, paste the widget URL you copied from KickBot into the "URL" field. There's typically no need to adjust any other browser source settings, but if necessary, you can modify the width and height values to resize the chat widget.

<figure><img src="https://uploads-ssl.webflow.com/645d308cda6e53d4b089e9c3/645d3973a0142cf1d63616ad_CleanShot%202023-05-11%20at%2011.52.16%402x.png" alt="Enter the chat overlay widget URL into the OBS or Streamlabs browser source"><figcaption></figcaption></figure>

#### **4. Testing it out**

After adding the browser source, you should start seeing Kick chat messages appear on your stream. If you make any changes to the widget settings while streaming, remember to reload the widget by refreshing the browser source for the updates to take effect.

<figure><img src="https://uploads-ssl.webflow.com/645d308cda6e53d4b089e9c3/645d3a97a6f84b18060861d0_CleanShot%202023-05-11%20at%2011.56.45%402x.png" alt="Testing out the chat overlay and changing configuration settings"><figcaption></figcaption></figure>

{% hint style="info" %} <mark style="color:blue;">If the text is too small it is recommended to increase the font size setting, this will help avoid pixelation when increasing the size of the widget.</mark>
{% endhint %}