Cat Stream Pet Widget

Thanks for downloading our Cat Stream Pet Widget!

Here you will find instructions on how to set everything up and an in-depth description of its possibilities.

⚠️ Take note: This widget is hosted on StreamElements and works only with StreamElements donations — make sure you have a StreamElements account before setting it up!

Setup Guide

  1. Log in to Streamelements with your Youtube or Twitch account
  2. Go to the “2. Widget” folder in the package you’ve downloaded
  3. Pick the file that corresponds to your streaming platform (Twitch or YouTube) and double-click to install it.

Voila! Your widget is installed!

Widget Customization

  1. Pick your widget in your StreamElements dashboard and click “Edit”

  1. Click on “Layers” and go to “Stream Pet Cat”

  1. Go to the “Settings” tab

  1. Woohoo, here you can customize everything to your taste :)

Preconfigured Commands

We included a set of preconfigured chat commands in case you don’t want to set everything up from scratch. Please make sure to test all of them out before going live and feel free to customize them to your liking.

Field Description
Command 1 !love: Initiates a fun interaction that calculates and displays a "compatibility percentage" between the streamer and the viewer who uses the command.
Command 2 !subs: Provides the current count of the streamer's subscribers.
Command 3 !followers: Provides the current count of the streamer's followers.
Command 4 !pet: Activates a petting animation for your stream pet, with no accompanying message.
Command 5 !shoutout [username]: Shows a personalized shoutout to a specific user in the chat.
Command 6 !hello: Shows a welcoming "hello" animation on your stream.
Command 7 !angry: Triggers your stream pet's angry animation, no text included.
Command 8 !welcome [username]: Sends out a greeting message to a viewer.
Command 9 !announce [your message]: Broadcasts a custom announcement to your viewers.
Command 10 disabled

Customization Options


For all of your customizations to take effect, you need to press "Save" in the top right corner of the editor and refresh the page before adding the widget to your streaming software!

General Settings

In this section, you have the ability to customize various aspects of your stream pet's behavior and appearance. Here's a breakdown of what each setting does:

Field Description
Pet Color Select pet color (Orange, Black or White)
Sleep Timeout Time in seconds when the pet should fall asleep when nothing happens.
Command Cooldown How much time between a command to prevent spam.
Command Symbol What symbol a chat command should start with, can be more than 1 symbol

Speech Bubble Color

Customize your stream pet's speech bubbles with these color settings, enhancing the visual appeal and consistency with your stream's theme.

Field Description
Speechbubble Border Color This option changes the color of the speech bubble's outline
Speechbubble Fill Color Here, you can select the main color that fills the speech bubble, providing a background for the text.
Love Percentage Color Specifically for the !love chat command, this setting alters the color of the text that displays the love percentage, adding a unique flair to these special messages.

Event Reactions

Control how your stream pet reacts to specific events with these settings.

Field Description
EVENT NAME Event Reaction What animation to play for a specific event. Can also be none to disable reactions for this event.
EVENT NAME Event Message Template What message is displayed together with event reaction


Adjust the behavior and accessibility of your stream pet's commands using these detailed settings, ensuring each command aligns perfectly with your streaming style and audience interaction.

Field Description
Command # Type

Command type, can be Disabled, Text or Animation.

Disabled - Kinda obvious, but it’s disabled.

Animation - Just plays an animation when the command is triggered.

Text - Plays an animation AND displays the text bubble with the predefined command template text.

Command # Command The command name. For example “love”. Combined with the command symbol to trigger the command could be “!love”
Command # Animation What animation should be played when the command is triggered
Command # Template Template for the text bubble. By far the most advanced config field. Explained better below.
Command # Permission

Each permission level includes access to its own level as well as all levels listed before it:

All: The base level, accessible to everyone in the chat.

Subscriber: Includes access to "All" commands plus subscriber-specific commands.

VIP: Encompasses "All" and "Subscriber" commands, along with exclusive VIP commands.

Moderator: Grants use of "All," "Subscriber," "VIP," and also commands reserved for Moderators.

Broadcaster: The highest level, with access to all command levels, including those exclusive to the Broadcaster.

Advanced Customization: Text Styles and Variables

This part of the guide will help you enhance your stream pet's responses to various stream events and chat commands by using text formatting features and integrating dynamic variables that adapt to your stream's live data.

Text Formatting with Markdown

Our commands support markdown for text styling. Here’s how you can apply different styles:

  • To make text Bold, surround it with double asterisks: **Bold**
  • For Italic text, use single asterisks: *Italic*
  • To Underline text, use double underscores: __Underline__
  • And for Strikethrough, use double tildes: ~~Strikethrough~~

You can also combine these styles:

  • For Bold and Italic, use three asterisks: ***Bold and Italic***
  • For Bold and Underline, combine double underscores and double asterisks: __**Bold and Underline**__
  • And for full combination like All Styles, nest the markers accordingly: ***__~~All Styles~~__***

Here's how these styles look in a complete message:

  • Emphasize words like this: This is very important text! → This is **very** important text!
  • Combine styles: I am not just any text → I am *not* ~~just any~~ text

Dynamic Variables

Dynamic variables are special codes that you can use to make your stream's text elements automatically update with live, specific information from your streaming session. Think of them as shortcuts that pull in real-time data, like a viewer's name or the number of new followers you have.

How to Insert Variables:

To use a variable, you just need to enclose the variable's name in double curly brackets like this: {{}} .

Examples for Beginners:

  • If you want your stream pet to greet the latest person who raided your channel, you would use: {{}} . So, if a viewer named Misha raided you, it would automatically say "Misha".
  • To show how much the highest donor contributed in the current session, write: {{}} . If the top donation was $420.69, it would display "420.69".

Types of Variables You Can Use

General Session Variables

These are for basic, ongoing stream info, like how many followers and subscribers you have, both in total and just for today's session.

Variable Description Name of the sender of original message.
sender.suffix All text after the command. Example !shoutout the suffix would be Name of the current event. THIS VARIABLE IS ONLY AVAILABLE ON EVENT REACTIONS.
event.amount Amount of the current event. THIS VARIABLE IS ONLY AVAILABLE ON EVENT REACTIONS. Name of the broadcaster.
love_percentage Random percentage that is also animated to count up. Total followers
session.follower.session Followers this session Name of the latest follower Total subscribers
session.subscriber.session Subscribers this session. Gifts this session. Total bits cheered
session.cheer.session Bits cheered this session Total money donated
session.tip.session Money donated this session

Advanced Variables

You can use two types of advanced variables to display specific statistics: one that shows a name and another that shows an amount. Each statistic from the list below has both a .name variant to display a person's username and an .amount variant to show numerical values like counts or sums.

Each pair of .name and .amount variables can be used to create a tailored shout-out or acknowledgment in your stream. This allows you to highlight your community's engagement with either their username or the contribution they've made, depending on the context you want to showcase.

How These Variables Work:

  • For example, if you want to acknowledge the person who cheered the most in a week, you would use the variable to display their username.
  • If you want to show how much they cheered, you would use .
Variable Description
session.subscriber.latest Latest subscriber Top gifter of all time
session.cheer.latest Latest cheer Top cheerer of the session Top cheer of the session Top cheerer of the week Top cheer of the week Top cheerer of the month Top cheer of the month Top cheerer of all time Top cheer of all time
session.tip.latest Latest tip Top tipper of the session Top tip of the session Top tipper of the week Top tip of the week Top tipper of the month Top tip of the month Top tipper of all time Top tip of all time Latest host Latest raid

Practical Examples for Using Advanced Variables

To help you get started with these variables, here are some clear examples of how they can be applied during your stream:

  • Acknowledging Top Contributors:
    • To thank your top cheerer of the week by name during a stream, you'd use: {{}} . If the top cheerer's username is "GamerJoe", it will display "GamerJoe".
    • If you want to announce the amount that GamerJoe cheered, you would use: {{}} . If he cheered 1,500 bits, it will show "1,500".
  • Celebrating New Supporters:
    • To give a shout-out to your latest subscriber, insert: {{}} . If the new subscriber is "StreamerLiz", your stream will display "StreamerLiz".
    • To highlight the generosity of the biggest tipper in your current stream, use: {{}} . If "DonatorDan" has tipped the most, it will show "DonatorDan".
Template Result
Welcome to the stream, {{}}! Thanks for the raid! Welcome to the stream, Misha! Thanks for the raid!
Wow! Our top cheerer, {{}}, has cheered {{}} bits! Wow! Our top cheerer, CheerfulGamer, has cheered 2000 bits!
A huge thank you to {{}} for the generous tip of ${{session.tip.latest.amount}}! A huge thank you to TipMasterTom for the generous tip of $50!
Let's hear it for {{}} who just joined the subscriber family for {{plural session.subscriber.latest.amount "month" "months"}}! Let's hear it for NewSubHype who just joined the subscriber family for 3 months!
Cheers to {{}} for being our top gifter with {{}} gifted subs! Cheers to GenerousGina for being our top gifter with 150 gifted subs!
Thank you, {{}}, for following! You're follower number {{}}! Thank you, LatestFollower123, for following! You're follower number 5421!
Big shoutout to {{}} for leading this week's cheers with {{}} bits! Big shoutout to WeeklyCheerChamp for leading this week's cheers with 5000 bits!
Our latest host, {{}}, just brought {{}} new friends! Welcome, everyone! Our latest host, HostMaster, just brought 75 new friends! Welcome, everyone!
Brace for impact! {{}} is raiding with a party of {{}}! Brace for impact! RaidLeaderLaura is raiding with a party of 30!
Special thanks to {{}} for being this month's top supporter with ${{}} in tips! Special thanks to MonthlyTopTipper for being this month's top supporter with $250 in tips!


Pluralization is a feature that allows your widgets to correctly use singular or plural terms based on numerical values. This is important for maintaining grammatical accuracy in your stream’s visual text elements, which by default, many streaming widgets do not account for. This can result in awkward phrasing, like "1 months" instead of "1 month." Our function ensures your widget displays text that is both numerically and grammatically correct.

How It Works:

We've implemented an advanced variable function that simplifies the pluralization process. This function dynamically adjusts the word to its singular or plural form based on a numeric variable, such as the number of months or bits donated.

Here's how to use it:

  • Write the base command {{plural}} within double curly braces.
  • Immediately follow it with the numeric variable you're referring to, like event.amount .
  • Then, specify the singular and plural forms of the word you want to use, enclosed in quotation marks and separated by a space.
  • Close the function with another set of double curly braces.


  • If you want to display "Month" or "Months" based on the amount, your command will look like this: {{plural event.amount "Month" "Months"}} This will automatically choose "Month" if the event.amount is 1, or "Months" if it's greater than 1.
  • To correctly display "Bit" or "Bits" for the all-time top cheer amount, use: {{plural "Bit" "Bits"}} This ensures "Bit" is used for a single cheer, and "Bits" for multiple.

Remember, proper pluralization enhances the professionalism and polish of your stream, making for a better viewer experience.

Text Template Examples

Below are some examples with all features combined, these are also the 3 default commands that are shipped with the pets.

Template Result
Me and {{}} match {{love_percentage}}!!! Me and Roman match 78%!!!
There are currently {{}} subscribers! There are currently 324 subscribers!
There are currently {{}} followers! There are currently 23214 followers!
{{}} subscribed for {{event.amount}} {{plural event.amount “Month” “Months”}}! Misha subscribed for 12 Months!


For all of your customizations to take effect, you need to press "Save" in the top right corner of the editor and refresh the page before adding the widget to your streaming software!

Adding the Widget to Your Streaming Software

OBS Studio

  1. Copy the URL of your Widget from the StreamElements dashboard
  2. Open OBS Studio
  3. Click “Add Source” (plus icon) in the Sources section.
  4. Add a “Browser” source, give it a name, and press “Ok”
  5. Paste the URL you’ve copied
  6. Set the width to 1920 and the height to 1080
  7. Press “Ok” and we’re done!

Streamlabs Desktop

  1. Copy the URL of your Widget from the StreamElements dashboard
  2. Open Streamlabs Desktop
  3. Click “Add a new Source” (plus icon) in the Sources section.
  4. Choose “Browser Source”, give it a name, and press “Add Source”.
  5. Paste the URL you’ve copied previously
  6. Set the width to 1920 and the height to 1080
  7. Now press “Close” and that’s it! Your widget is ready to use!