Kawaii Drinkies — Documentation

Getting Started

Setting up Kawaii Drinkies on your stream takes just a few minutes. Follow these steps to get your adorable drink goal widget up and running.

Open the StreamElements Dashboard and log in to your account.
Navigate to My Overlays and click Add Overlay (or edit an existing one).
Click the + button, then go to Static/Custom and select Custom Widget.
Click the new widget layer to open the code editor. You will see tabs for HTML, CSS, JS, Fields, and Data.
Copy each code section from the widget files into the corresponding editor tabs:
widget.html → HTML tab
widget.css → CSS tab
widget.js → JS tab
widget.json → Fields tab
widget.data.json → Data tab
Save your overlay — your widget is ready!

Tip: The widget works immediately with default settings (Boba Tea theme, session-based manual tracking). You can customize everything through the widget Settings panel on the left side of the editor.

Themes

21 unique drink themes, each with custom SVG artwork, kawaii faces, and themed decorations. Every theme has its own personality, color palette, and matched celebration effect.

boba-tea

Classic milk tea with bouncy tapioca pearls and a wide straw

hot-cocoa

Warm chocolate drink with marshmallows and steam swirls

strawberry-smoothie

Creamy pink blend topped with a fresh strawberry

matcha-latte

Vibrant green tea latte with leaf art and soft foam

magic-potion

Mysterious bubbling potion in an enchanted flask

honey-jar

Golden honey pot with a drizzle dipper and happy bees

latte-art

Elegant coffee with a delicate foam art heart

juice-box

Retro juice box with a bendy straw and fruit label

wine-glass

Sophisticated stemmed glass with a deep ruby fill

champagne

Celebratory flute with rising golden bubbles

milkshake

Tall glass topped with whipped cream and a cherry

sakura-tea

Delicate cherry blossom tea with floating petals

witchs-brew

Spooky cauldron with eerie green glow and bubbles

crystal-elixir

Iridescent crystal vial with prismatic liquid

tropical-cocktail

Fruity tiki drink with an umbrella and pineapple slice

pixel-soda

Retro pixel-art soda can with fizzy 8-bit bubbles

lavender-latte

Soothing purple latte with lavender sprigs

rainbow-candy-soda

Multi-colored fizzy soda with candy decorations

iced-coffee

Cold brew over ice cubes in a clear tumbler

watermelon-agua

Refreshing watermelon agua fresca with seeds and lime

unicorn-frapp

Magical swirled pastel frappuccino with a horn topper

How to change: Go to widget Settings → Cup Style → Drink Theme. Each theme automatically applies its own liquid colors, decorations, and matched celebration effect.

Event Types

Track progress from 7 different event sources. The widget listens for StreamElements events and automatically updates your goal when matching events occur.

Event Type	Platform	What's Counted
`manual`	All	Chat commands only — full control over when and how much to add
`followers`	Twitch	New followers (1 per follow)
`subscribers`	Twitch	New subs including gift subs (1 per sub)
`tips`	All	Donation amount ($) — adds the dollar value to progress
`cheers`	Twitch	Bit amount — adds the number of bits cheered
`members`	YouTube	New channel members (1 per membership)
`superchats`	YouTube	Super chat amount ($) — adds the dollar value to progress

How to set: Go to widget Settings → Goal Settings → Goal Type. Chat commands work with every event type for manual adjustments.

Goal Period

Controls what time window the widget uses for automatic progress tracking. This only applies to non-manual event types.

Period	Description
`session`	Current stream session — resets when the stream ends
`week`	Rolling 7-day window from the current date
`month`	Current calendar month — resets on the 1st
`all-time`	Total accumulated count across all streams

Chat Commands

Control your goal widget directly from chat. All commands are available to the broadcaster and moderators (moderator access can be toggled in settings).

Command	Arguments	Description	Example
`!add`	`number`	Add to the current progress	`!add 5`
`!drop`	`number`	Subtract from the current progress	`!drop 3`
`!progress`	`number`	Set progress to an exact value	`!progress 50`
`!target`	`number`	Change the goal target amount	`!target 200`
`!clear`	none	Reset progress to zero	`!clear`

Customizable: All command names can be changed in Settings → Commands. For example, you could rename !add to !fill or !sip. Toggle moderator access with the modCommands setting.

Celebration Effects

30 celebration effects triggered when your goal reaches 100%. Each effect creates an animated particle overlay to mark the achievement with style.

💌 love-letters

🍇 berry-burst

🌹 rose-petals

🏹 cupid-arrows

🍬 candy-shower

⭐ starfall

🍫 chocolate-truffles

✨ fairy-dust

🧋 boba-hearts

🐻 bear-hugs

🎈 real-balloons

☁ kawaii-clouds

🌫 fluffy-clouds

🎆 fireworks

❤ real-hearts

🌟 real-stars

🎉 confetti

❇ sparkles

🌟 kawaii

🌸 sakura-shower

🌠 shooting-stars

💖 buzzing-hearts

🍾 champagne-bubbles

🐾 paw-hearts

💾 pixel-rain

🌿 lavender-drift

🪄 magic-burst

🥛 milk-splash

👑 royal-shower

That's 29 listed — choosing "Theme Default" automatically picks the celebration effect matched to your current drink theme, giving you a 30th contextual option.

Effect Settings

Setting	Options	Description
`celebrationEffect`	Any effect name or "Theme Default"	Choose a specific effect or let the theme decide
`effectDuration`	2 – 10 seconds	How long the particle animation plays
`effectRepeat`	once / every / milestones	Once — plays only the first time 100% is reached Every — plays on every addition after 100% Milestones — plays at 100%, 150%, 200%, etc.

Testing: Enable the previewEffect checkbox in settings to trigger the celebration effect in the editor without needing to reach the goal.

Widget Settings

All settings are accessible in the StreamElements widget editor panel. Here is a complete reference grouped by category.

Goal Settings

goalAmount — Target number to reach (e.g., 100 followers, $500 in tips)
eventType — Which event drives progress (manual, followers, subscribers, tips, cheers, members, superchats)
eventPeriod — Time window for counting events (session, week, month, all-time)
currency — Currency symbol shown for monetary goals (e.g., $, €, £)

Title & Values

goalTitle — The text displayed above or below the cup (e.g., "Sub Goal")
titlePosition — Where the title appears: above, below, or hidden
valuesPosition — Where the progress numbers appear: above, below, inside cup, or hidden
titleFontSize — Font size for the goal title in pixels
valuesFontSize — Font size for the progress numbers in pixels
titleColor — Custom color for the title text
valuesColor — Custom color for the progress numbers

Cup Style

colorTheme — Choose from 21 drink themes (see Themes section above)
cupSize — Width of the cup in pixels (range: 80 – 300px)
showBubbles — Toggle animated bubbles inside the liquid
showWave — Toggle the animated wave motion on the liquid surface

Custom Colors

fillColor1 — Override the primary liquid gradient color (leave empty to use theme default)
fillColor2 — Override the secondary liquid gradient color (leave empty to use theme default)

Effects

celebrationEffect — Which particle effect plays at 100% (or "Theme Default")
effectDuration — How long the celebration animation lasts (2 – 10 seconds)
effectRepeat — When to replay: once, every addition, or at milestones
cupAnimation — Wiggle or bounce animation on the cup when progress is added
previewEffect — Checkbox to trigger a test celebration in the editor

Commands

modCommands — Allow moderators to use chat commands (on/off)
cmdAdd — Command name for adding progress (default: !add)
cmdDrop — Command name for subtracting progress (default: !drop)
cmdProgress — Command name for setting exact progress (default: !progress)
cmdTarget — Command name for changing the target (default: !target)
cmdClear — Command name for resetting to zero (default: !clear)

Troubleshooting

Common issues and how to resolve them.

Cup not showing?

Make sure you pasted all 5 code sections (HTML, CSS, JS, Fields, Data). The JS file contains the SVG definitions that render the cup artwork. If any section is missing or partially pasted, the widget will not display.

Liquid not filling?

Check that your eventType setting matches your streaming platform. For example, "subscribers" and "cheers" only work on Twitch, while "members" and "superchats" only work on YouTube. If you are using manual mode, the liquid only moves when you use chat commands like !add.

Commands not working?

Only the broadcaster and moderators can use commands by default. Make sure the command names in your settings match exactly what you are typing in chat (including the ! prefix). Also verify that modCommands is enabled if a moderator is trying to use them.

Effects not playing?

Celebration effects only trigger when the goal first reaches 100% (unless you have changed the repeat mode). If you have already passed 100% and want to see the effect again, try changing effectRepeat to "every" or "milestones". You can also enable the previewEffect checkbox in settings to test the animation in the editor.

Widget too big or too small?

Adjust the cupSize slider in Settings → Cup Style. The range is 80px to 300px. You can also resize the widget layer in the StreamElements overlay editor by dragging its handles.