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”

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

3. Go to the “Settings” tab

4. 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.

Customization Options

⚠️ IMPORTANT

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:

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.

Event Reactions

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

Command

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.

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: {{variable.name}} .

Examples for Beginners:

• If you want your stream pet to greet the latest person who raided your channel, you would use: {{session.raid.latest.name}} . 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: {{session.tip.top-session-donation.amount}} . 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.

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 session.cheer.top-weekly-donator.name to display their username.
• If you want to show how much they cheered, you would use session.cheer.top-weekly-donator.amount .

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: {{session.cheer.top-weekly-donator.name}} . 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: {{session.cheer.top-weekly-donator.amount}} . If he cheered 1,500 bits, it will show "1,500".
• Celebrating New Supporters:
  • To give a shout-out to your latest subscriber, insert: {{session.subscriber.latest.name}} . If the new subscriber is "StreamerLiz", your stream will display "StreamerLiz".
  • To highlight the generosity of the biggest tipper in your current stream, use: {{session.tip.top-session-donator.name}} . If "DonatorDan" has tipped the most, it will show "DonatorDan".

Pluralization

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.

Examples:

• 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 event.session.cheer.top-alltime-donation.amount "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.

⚠️ IMPORTANT

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!