# Pinned Messages Widget

The pinned message can also be displayed with our chat widget, but if you would like it displayed separately this widget allows for that.

### **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](/dashboard/creating-your-account.md) on getting started.

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

<figure><img src="/files/jKrw7GUdfcX3kc69tlZQ" alt=""><figcaption></figcaption></figure>

### Configuring Pinned Messages

<figure><img src="/files/2UlyT0Pncpc00mB5bVmf" alt=""><figcaption></figcaption></figure>

By default the pinned message widget will reflect the style shown on Kick, but there are several configurable options:

* **Transition:** The animation to be applied when the widget goes on/off screen.
* **Font:** The font of the text.
* **Text color:** The color of the text (not including the username color).
* **Font size:** The size of the font.
* **Boldness:** How bold the text is.
* **Background opacity:** The transparency level of the background.
* **Background color:** The color of the background.
* **Badges:** Enable or disable badges being displayed.

### Preview

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

<figure><img src="/files/w6FTfCRwPwun1eRyrQcL" 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="/files/0nnLqsz8ojiUf3gvTGSP" 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="/files/gKYGlpVObuAspUwxnUPv" 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="/files/2WL3fofaEo8r8l5se6qM" alt="" width="563"><figcaption></figcaption></figure>

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

After you add the browser source you will see your new pinned messages appear!

<figure><img src="/files/jjFuPeFjPpV20qdwgIR8" alt=""><figcaption></figcaption></figure>

{% hint style="info" %} <mark style="color:blue;">If you update any of the widget settings while streaming you will need to reload the widget by refreshing the browser source.</mark>
{% endhint %}


---

# 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/pinned-messages-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.