# Last Subscriber 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 "Last Subscriber" 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%2FWrxSqKIsekIHthUvqjaC%2Fimage.png?alt=media&#x26;token=3fad2b16-3474-48f0-9825-88fc2a569597" alt=""><figcaption></figcaption></figure>

### Configuring the Last Subscriber Widget

<figure><img src="https://488718071-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2F6OLqbpx7W0nzTqPrmIIl%2Fuploads%2F1qVgMZKOOV41TU9MhAkU%2Fimage.png?alt=media&#x26;token=ebacd14a-9963-49f6-a0de-454b0ec510ae" alt=""><figcaption></figcaption></figure>

There are a few customizable settings to help you adjust the widget to suit your needs:

* **Text:** Change what text is shown and use the `{{sub_name}}` variable to insert the username of the last sub.
* **Font size:** The size of the font (if the text is pixelated, increase the font size).
* **Boldness:** How bold the text is.
* **Font:** The font of the text.
* **Text color:** The color of the text.

### 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%2FvBlgUHMogh6yliEX98vp%2Fimage.png?alt=media&#x26;token=857e6044-011d-40e7-9a48-4a9b1176f5c7" 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%2FYf86JmODU77WpY6O2jVq%2Fimage.png?alt=media&#x26;token=ad4d42e2-36fb-4a00-85ad-6b6af572989d" 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://488718071-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2F6OLqbpx7W0nzTqPrmIIl%2Fuploads%2F1K3StHaGx17dZ2ISsX5U%2Fimage.png?alt=media&#x26;token=a6b91809-442c-4467-8b21-1fade653f3c8" alt=""><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://488718071-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2F6OLqbpx7W0nzTqPrmIIl%2Fuploads%2Fh4YIajt4NuZNCOl6KPIk%2Fimage.png?alt=media&#x26;token=e51e31c8-15a1-43a7-8f11-c06a8d3828e1" alt=""><figcaption></figcaption></figure>

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

After you add the browser source you will see your new pinned messages appear! If you update any of the widget settings while streaming you will need to reload the widget by refreshing the browser source.

<figure><img src="https://488718071-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2F6OLqbpx7W0nzTqPrmIIl%2Fuploads%2FRKcKbkSjubQaJFoKy7w7%2Fimage.png?alt=media&#x26;token=739dac85-2bbd-4c8c-a499-deeb7495944a" alt=""><figcaption></figcaption></figure>

{% hint style="warning" %} <mark style="color:orange;">If you just set up KickBot, it may be possible that we have not yet tracked any subs which will result in the username being empty.</mark>
{% endhint %}