💬Kick Chat Widget

Enhance your Kick.com streaming experience with a customizable chat widget that seamlessly integrates with OBS or Streamlabs, allowing you to interact with your viewers effortlessly.

Getting Started

For this process you will need a KickBot account. If you do not already have a KickBot account navigate to kickbot.app and sign up. For more information, follow this guide on getting started.

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

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.

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.

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.

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.

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.

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.

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.