Lots of stuff, can't remember lol

2026-09-18 19:50:58 -04:00 · 2025-04-18 22:13:18 +10:00
parent ddc3dd10e7
commit 75658f89d3
10 changed files with 519 additions and 116 deletions
@@ -24,7 +24,7 @@
 			<div id="theContentThatShowsLastInsteadOfFirst">
 				<div style="display: inline-flex; align-items: center;">
 					<img id="avatarButItsSmallerThanTheOneFromBeforeForPrettinessPurposes" src="https://static-cdn.jtvnw.net/jtv_user_pictures/272e643e-4d43-415f-9ee1-18916e825411-profile_image-300x300.png" class="square">
-					<span id="usernameTheSecond"></span>
+					<span id="usernameTheSecond">nutty</span>
 				</div>
 				<br>
 				<span id="message">
@@ -28,48 +28,103 @@ let alertQueue = [];
 // OPTIONS //
 /////////////

-const showPlatform = GetBooleanParam("showPlatform", true);
+// const showPlatform = GetBooleanParam("showPlatform", true);
+// const showAvatar = GetBooleanParam("showAvatar", true);
+// const showTimestamps = GetBooleanParam("showTimestamps", true);
+// const showBadges = GetBooleanParam("showBadges", true);
+// const showPronouns = GetBooleanParam("showPronouns", true);
+// const showUsername = GetBooleanParam("showUsername", true);
+// const showMessage = GetBooleanParam("showMessage", true);
+// const font = urlParams.get("font") || "";
+// const fontSize = urlParams.get("fontSize") || "30";
+// const lineSpacing = urlParams.get("lineSpacing") || "1.7";
+// const background = urlParams.get("background") || "#000000";
+// const opacity = urlParams.get("opacity") || "0.85";
+
+// const hideAfter = GetIntParam("hideAfter", 0);
+// const excludeCommands = GetBooleanParam("excludeCommands", true);
+// const ignoreChatters = urlParams.get("ignoreChatters") || "";
+// const scrollDirection = GetIntParam("scrollDirection", 1);
+// const inlineChat = GetBooleanParam("inlineChat", false);
+// const imageEmbedPermissionLevel = GetIntParam("imageEmbedPermissionLevel", 20);
+
+// const showTwitchMessages = GetBooleanParam("showTwitchMessages", true);
+// const showTwitchAnnouncements = GetBooleanParam("showTwitchAnnouncements", true);
+// const showTwitchSubs = GetBooleanParam("showTwitchSubs", true);
+// const showTwitchChannelPointRedemptions = GetBooleanParam("showTwitchChannelPointRedemptions", true);
+// const showTwitchRaids = GetBooleanParam("showTwitchRaids", true);
+// const showTwitchSharedChat = GetIntParam("showTwitchSharedChat", 2);
+
+// const twitchFollowTrigger = urlParams.get("twitchFollowTrigger") || "";
+
+// const showYouTubeMessages = GetBooleanParam("showYouTubeMessages", true);
+// const showYouTubeSuperChats = GetBooleanParam("showYouTubeSuperChats", true);
+// const showYouTubeSuperStickers = GetBooleanParam("showYouTubeSuperStickers", true);
+// const showYouTubeMemberships = GetBooleanParam("showYouTubeMemberships", true);
+
+// const showStreamlabsDonations = GetBooleanParam("showStreamlabsDonations", true)
+// const showStreamElementsTips = GetBooleanParam("showStreamElementsTips", true);
+// const showPatreonMemberships = GetBooleanParam("showPatreonMemberships", true);
+// const showKofiDonations = GetBooleanParam("showKofiDonations", true);
+// const showTipeeeStreamDonations = GetBooleanParam("showTipeeeStreamDonations", true);
+// const showFourthwallAlerts = GetBooleanParam("showFourthwallAlerts", true);
+
+// const animationSpeed = GetIntParam("animationSpeed", 8000);
+
+// const furryMode = GetBooleanParam("furryMode", false);
+
+// Appearance
 const showAvatar = GetBooleanParam("showAvatar", true);
-const showTimestamps = GetBooleanParam("showTimestamps", true);
-const showBadges = GetBooleanParam("showBadges", true);
-const showPronouns = GetBooleanParam("showPronouns", true);
-const showUsername = GetBooleanParam("showUsername", true);
-const showMessage = GetBooleanParam("showMessage", true);
 const font = urlParams.get("font") || "";
-const fontSize = urlParams.get("fontSize") || "30";
-const lineSpacing = urlParams.get("lineSpacing") || "1.7";
-const background = urlParams.get("background") || "#000000";
-const opacity = urlParams.get("opacity") || "0.85";
+const fontSize = GetIntParam("fontSize", 30);
+const useCustomBackground = GetBooleanParam("useCustomBackground", true);
+const background = urlParams.get("background") || "";
+const opacity = GetIntParam("opacity", 0.85);

-const hideAfter = GetIntParam("hideAfter", 0);
-const excludeCommands = GetBooleanParam("excludeCommands", true);
-const ignoreChatters = urlParams.get("ignoreChatters") || "";
-const scrollDirection = GetIntParam("scrollDirection", 1);
-const inlineChat = GetBooleanParam("inlineChat", false);
-const imageEmbedPermissionLevel = GetIntParam("imageEmbedPermissionLevel", 20);
+// General
+const hideAfter = GetIntParam("hideAfter", 8);
+const showAnimation = urlParams.get("showAnimation") || "";
+const hideAnimation = urlParams.get("hideAnimation") || "";
+const alignment = urlParams.get("alignment") || "";
+const showMesesages = GetBooleanParam("showMesesages", true);

-const showTwitchMessages = GetBooleanParam("showTwitchMessages", true);
-const showTwitchAnnouncements = GetBooleanParam("showTwitchAnnouncements", true);
+// Which Twitch alerts do you want to see?
+const showTwitchFollows = GetBooleanParam("showTwitchFollows", false);
+const twitchFollowAction = urlParams.get("twitchFollowAction") || "";
 const showTwitchSubs = GetBooleanParam("showTwitchSubs", true);
+const twitchSubAction = urlParams.get("twitchSubAction") || "";
 const showTwitchChannelPointRedemptions = GetBooleanParam("showTwitchChannelPointRedemptions", true);
+const twitchChannelPointRedemptionAction = urlParams.get("twitchChannelPointRedemptionAction") || "";
+const showTwitchCheers = GetBooleanParam("showTwitchCheers", true);
+const twitchCheerAction = urlParams.get("twitchCheerAction") || "";
 const showTwitchRaids = GetBooleanParam("showTwitchRaids", true);
-const showTwitchSharedChat = GetIntParam("showTwitchSharedChat", 2);
+const twitchRaidAction = urlParams.get("twitchRaidAction") || "";

-const showYouTubeMessages = GetBooleanParam("showYouTubeMessages", true);
+// Which YouTube alerts do you want to see?
 const showYouTubeSuperChats = GetBooleanParam("showYouTubeSuperChats", true);
+const youtubeSuperChatAction = urlParams.get("youtubeSuperChatAction") || "";
 const showYouTubeSuperStickers = GetBooleanParam("showYouTubeSuperStickers", true);
+const youtubeSuperStickerAction = urlParams.get("youtubeSuperStickerAction") || "";
 const showYouTubeMemberships = GetBooleanParam("showYouTubeMemberships", true);
+const youtubeMembershipAction = urlParams.get("youtubeMembershipAction") || "";

-const showStreamlabsDonations = GetBooleanParam("showStreamlabsDonations", true)
-const showStreamElementsTips = GetBooleanParam("showStreamElementsTips", true);
-const showPatreonMemberships = GetBooleanParam("showPatreonMemberships", true);
-const showKofiDonations = GetBooleanParam("showKofiDonations", true);
-const showTipeeeStreamDonations = GetBooleanParam("showTipeeeStreamDonations", true);
-const showFourthwallAlerts = GetBooleanParam("showFourthwallAlerts", true);
+// Which donation alerts do you want to see?
+const showStreamlabsDonations = GetBooleanParam("showStreamlabsDonations", false);
+const streamlabsDonationAction = urlParams.get("streamlabsDonationAction") || "";
+const showStreamElementsTips = GetBooleanParam("showStreamElementsTips", false);
+const streamelementsTipAction = urlParams.get("streamelementsTipAction") || "";
+const showPatreonMemberships = GetBooleanParam("showPatreonMemberships", false);
+const patreonMembershipActions = urlParams.get("patreonMembershipActions") || "";
+const showKofiDonations = GetBooleanParam("showKofiDonations", false);
+const kofiDonationAction = urlParams.get("kofiDonationAction") || "";
+const showTipeeeStreamDonations = GetBooleanParam("showTipeeeStreamDonations", false);
+const tipeeestreamDonationAction = urlParams.get("tipeeestreamDonationAction") || "";
+const showFourthwallAlerts = GetBooleanParam("showFourthwallAlerts", false);
+const fourthwallAlertAction = urlParams.get("fourthwallAlertAction") || "";

-const animationSpeed = GetIntParam("animationSpeed", 8000);
-
-const furryMode = GetBooleanParam("furryMode", false);
+// Set avatar visibility
+if (!showAvatar)
+	avatarElement.style.display = 'none';

 // Set fonts for the widget
 document.body.style.fontFamily = font;
@@ -124,7 +179,7 @@ const client = new StreamerbotClient({

 client.on('Twitch.Cheer', (response) => {
 	console.debug(response.data);
-	TwitchChatMessage(response.data);
+	TwitchCheer(response.data);
 })

 client.on('Twitch.Sub', (response) => {
@@ -248,6 +303,59 @@ client.on('Fourthwall.GiftDrawEnded', (response) => {
 // MULTICHAT OVERLAY //
 ///////////////////////

+async function TwitchCheer(data) {
+	if (!showTwitchSubs)
+		return;
+
+	// Set the text
+	const username = data.message.displayName;
+	const bits = data.bits;
+	let message = data.message.message;
+
+	// Render avatars
+	const avatarURL = await GetAvatar(username);
+
+	// Render emotes
+	for (i in data.emotes) {
+		const emoteElement = `<img src="${data.emotes[i].imageUrl}" class="emote"/>`;
+		const emoteName = EscapeRegExp(data.emotes[i].name);
+
+		let regexPattern = emoteName;
+
+		// Check if the emote name consists only of word characters (alphanumeric and underscore)
+		if (/^\w+$/.test(emoteName)) {
+			regexPattern = `\\b${emoteName}\\b`;
+		}
+		else {
+			// For non-word emotes, ensure they are surrounded by non-word characters or boundaries
+			regexPattern = `(?:^|[^\\w])${emoteName}(?:$|[^\\w])`;
+		}
+
+		const regex = new RegExp(regexPattern, 'g');
+		message = message.replace(regex, emoteElement);
+	}
+
+	// Render cheermotes
+	for (i in data.cheerEmotes) {
+		const bits = data.cheerEmotes[i].bits;
+		const imageUrl = data.cheerEmotes[i].imageUrl;
+		const name = data.cheerEmotes[i].name;
+		const cheerEmoteElement = `<img src="${imageUrl}" class="emote"/>`;
+		const bitsElements = `<span class="bits">${bits}</span>`
+		message = message.replace(new RegExp(`\\b${name}${bits}\\b`, 'i'), cheerEmoteElement + bitsElements);
+	}
+
+	UpdateAlertBox(
+		'twitch',
+		avatarURL,
+		`${username}`,
+		`cheered ${bits} bits`,
+		'',
+		username,
+		message
+	);
+}
+
 async function TwitchSub(data) {
 	if (!showTwitchSubs)
 		return;
@@ -380,7 +488,7 @@ async function TwitchRaid(data) {
 	// Set the text
 	const username = data.from_broadcaster_user_login;
 	const viewers = data.viewers;
-
+	
 	UpdateAlertBox(
 		'twitch',
 		avatarURL,
@@ -388,7 +496,9 @@ async function TwitchRaid(data) {
 		`is raiding with a party of ${viewers}`,
 		'',
 		username,
-		''
+		'',
+		twitchFollowAction,
+		data
 	);
 }

@@ -1142,12 +1252,12 @@ function GetWinnersList(gifts) {
 // 	return furryWords.join('');
 // }

-function UpdateAlertBox(platform, avatarURL, headerText, descriptionText, attributeText, username, message) {
+async function UpdateAlertBox(platform, avatarURL, headerText, descriptionText, attributeText, username, message, sbAction, sbData) {
 	// Check if the widget is in the middle of an animation
 	// If any alerts are requested while the animation is playing, it should be added to the alert queue
 	if (widgetLocked) {
 		console.debug("Animation is progress, added alert to queue");
-		let data = { platform: platform, avatarURL: avatarURL, headerText: headerText, descriptionText: descriptionText, attributeText: attributeText, message: message };
+		let data = { platform: platform, avatarURL: avatarURL, headerText: headerText, descriptionText: descriptionText, attributeText: attributeText, username: username, message: message, sbAction: sbAction, sbData: sbData};
 		alertQueue.push(data);
 		return;
 	}
@@ -1173,8 +1283,16 @@ function UpdateAlertBox(platform, avatarURL, headerText, descriptionText, attrib
 	messageLabel.innerHTML = message != null ? `${message}` : '';
 	theContentThatShowsLastInsteadOfFirst.style.opacity = 0;

-	alertBox.style.height = theContentThatShowsFirstInsteadOfSecond.offsetHeight + 40 + "px";
-	alertBox.style.animation = 'slideInFromTop 0.5s ease-out forwards';
+	theContentThatShowsFirstInsteadOfSecond.style.display = 'flex';
+	alertBox.style.maxHeight = theContentThatShowsFirstInsteadOfSecond.offsetHeight + "px";
+	alertBox.style.minHeight = theContentThatShowsFirstInsteadOfSecond.offsetHeight + "px";
+	alertBox.style.animation = 'slideInFromRight 0.5s ease-out forwards';
+
+	// Run the Streamer.bot action if there is one	
+	if (sbAction) {
+		console.debug('Running Streamer.bot action: ' + sbAction);
+		await client.doAction({name: sbAction}, sbData);
+	}

 	// (1) Set timeout (5 seconds)
 	// (2) Set the message label
@@ -1183,29 +1301,51 @@ function UpdateAlertBox(platform, avatarURL, headerText, descriptionText, attrib
 	//		(a) Add in the CSS animation when this is working
 	setTimeout(() => {
 		alertBox.style.transition = 'all 0.5s ease-in-out';
-		alertBox.style.height = theContentThatShowsLastInsteadOfFirst.offsetHeight + 40 + "px";
 		theContentThatShowsFirstInsteadOfSecond.style.opacity = 0;
+		
+		theContentThatShowsFirstInsteadOfSecond.style.position = 'absolute';
+		theContentThatShowsLastInsteadOfFirst.style.display = 'inline-block';
+		alertBox.style.maxHeight = theContentThatShowsLastInsteadOfFirst.offsetHeight + "px";
+		alertBox.style.minHeight = 'none';
 		theContentThatShowsLastInsteadOfFirst.style.opacity = 1;
-
+			
 		setTimeout(() => {
-			alertBox.style.animation = 'slideBackUp 0.5s ease-out forwards';
+			alertBox.style.animation = 'slideOffRight 0.5s ease-out forwards';

 			setTimeout(() => {
-				alertBox.style.transition = '';
+				alertBox.style.maxHeight = '0px';
 				theContentThatShowsFirstInsteadOfSecond.style.opacity = 1;
 				theContentThatShowsLastInsteadOfFirst.style.opacity = 0;
-				alertBox.style.height = '0px';
+				theContentThatShowsFirstInsteadOfSecond.style.position = 'relative';
+				theContentThatShowsLastInsteadOfFirst.style.display = 'none';
 				widgetLocked = false;
 				if (alertQueue.length > 0) {
 					console.debug("Pulling next alert from the queue");
 					let data = alertQueue.shift();
-					UpdateAlertBox(data.platform, data.avatarURL, data.headerText, data.descriptionText, data.attributeText, data.message)
+					UpdateAlertBox(data.platform, data.avatarURL, data.headerText, data.descriptionText, data.attributeText, data.username, data.message, data.sbAction, data.sbData);
 				}
 			}, 1000);
-		}, messageLabel.innerText.trim() != '' ? animationSpeed : 0);
+		}, message ? hideAfter * 1000 : 0);		
+	}, hideAfter * 1000);

-	}, animationSpeed);
+}

+////////////////////
+// TEST FUNCTIONS //
+////////////////////
+
+async function testWidget()
+{
+	UpdateAlertBox(
+		'twitch',
+		await GetAvatar('nutty'),
+		`nutty`,
+		`subscribed with Tier 3`,
+		'',
+		`nutty`,
+		`O-oooooooooo AAAAE-A-A-I-A-U- JO-oooooooooooo AAE-O-A-A-U-U-A- E-eee-ee-eee AAAAE-A-E-I-E-A-JO-ooo-oo-oo-oo EEEEO-A-AAA-AAAA`
+		//``
+	);
 }


@@ -1,5 +1,4 @@
 <!DOCTYPE html>
-<html lang="en">

 <head>
    <meta charset="UTF-8">
@@ -50,15 +49,10 @@
 </head>

 <body>
-
    <iframe id="settings-container"></iframe>
-
    <div id="widget-container">
        <iframe id="widget"></iframe>
-    </div>
-
-    <script src="script.js"></script>
-
+    </div>    
 </body>

-</html>
+<script src="./script.js"></script>
@@ -1,5 +1,6 @@
 let settingsContainer = document.getElementById('settings-container');
 settingsContainer.src = `../../.utilities/settings-page-builder?settingsJson=${window.location.href}/settings.json`
+//settingsContainer.src = `../../.utilities/settings-page-builder?settingsJson=../../multistream-alerts/settings/settings.json`
 console.log(settingsContainer.src);

 function reloadWidget(data) {
@@ -26,4 +27,10 @@ function getParentUrl() {
    }

    return parentUrl;
+}
+
+function callFunction(functionName) {
+    console.debug(`Calling ${functionName}`);
+    let widget = document.getElementById("widget");
+    widget.contentWindow[functionName]();
 }
@@ -1,5 +1,13 @@
 {
 	"settings": [
+		{
+			"id": "testWidgetButton",
+			"label": "Send Test Alert",
+			"description": "",
+			"type": "button",
+			"callFunction": "testWidget",
+			"group": "Test Alerts"
+		},
 		{
 			"id": "showAvatar",
 			"label": "Show Avatar",
@@ -56,7 +64,7 @@
 		{
 			"id": "hideAfter",
 			"label": "Hide After",
-			"description": "Alerts will show for X seconds",
+			"description": "Alerts will hide for X seconds",
 			"type": "number",
 			"min": 1,
 			"max": 120,
@@ -151,18 +159,19 @@
 		},
 		{
 			"id": "showTwitchFollows",
-			"label": "New Follows",
+			"label": "New Followers",
 			"description": "",
 			"type": "checkbox",
-			"defaultValue": true,
+			"defaultValue": false,
 			"group": "Which Twitch alerts do you want to see?"
 		},
 		{
-			"id": "showTwitchCheers",
-			"label": "Cheers",
-			"description": "",
-			"type": "checkbox",
-			"defaultValue": true,
+			"id": "twitchFollowAction",
+			"label": "",
+			"description": "Also run this Streamer.bot Action",
+			"type": "sb-actions",
+			"defaultValue": "",
+			"hideIf": "showTwitchFollows",
 			"group": "Which Twitch alerts do you want to see?"
 		},
 		{
@@ -173,6 +182,15 @@
 			"defaultValue": true,
 			"group": "Which Twitch alerts do you want to see?"
 		},
+		{
+			"id": "twitchSubAction",
+			"label": "",
+			"description": "Also run this Streamer.bot Action",
+			"type": "sb-actions",
+			"defaultValue": "",
+			"hideIf": "showTwitchSubs",
+			"group": "Which Twitch alerts do you want to see?"
+		},
 		{
 			"id": "showTwitchChannelPointRedemptions",
 			"label": "Channel Point Redemptions",
@@ -181,6 +199,32 @@
 			"defaultValue": true,
 			"group": "Which Twitch alerts do you want to see?"
 		},
+		{
+			"id": "twitchChannelPointRedemptionAction",
+			"label": "",
+			"description": "Also run this Streamer.bot Action",
+			"type": "sb-actions",
+			"defaultValue": "",
+			"hideIf": "showTwitchChannelPointRedemptions",
+			"group": "Which Twitch alerts do you want to see?"
+		},
+		{
+			"id": "showTwitchCheers",
+			"label": "Cheers",
+			"description": "",
+			"type": "checkbox",
+			"defaultValue": true,
+			"group": "Which Twitch alerts do you want to see?"
+		},
+		{
+			"id": "twitchCheerAction",
+			"label": "",
+			"description": "Also run Streamer.bot Action",
+			"type": "sb-actions",
+			"defaultValue": "",
+			"hideIf": "showTwitchCheers",
+			"group": "Which Twitch alerts do you want to see?"
+		},
 		{
 			"id": "showTwitchRaids",
 			"label": "Raids",
@@ -189,6 +233,15 @@
 			"defaultValue": true,
 			"group": "Which Twitch alerts do you want to see?"
 		},
+		{
+			"id": "twitchRaidAction",
+			"label": "",
+			"description": "Also run this Streamer.bot Action",
+			"type": "sb-actions",
+			"defaultValue": "",
+			"hideIf": "showTwitchRaids",
+			"group": "Which Twitch alerts do you want to see?"
+		},
 		{
 			"id": "showYouTubeSuperChats",
 			"label": "Super Chats",
@@ -197,6 +250,15 @@
 			"defaultValue": true,
 			"group": "Which YouTube alerts do you want to see?"
 		},
+		{
+			"id": "youtubeSuperChatAction",
+			"label": "",
+			"description": "Also run this Streamer.bot Action",
+			"type": "sb-actions",
+			"defaultValue": "",
+			"hideIf": "showYouTubeSuperChats",
+			"group": "Which YouTube alerts do you want to see?"
+		},
 		{
 			"id": "showYouTubeSuperStickers",
 			"label": "Super Stickers",
@@ -205,6 +267,15 @@
 			"defaultValue": true,
 			"group": "Which YouTube alerts do you want to see?"
 		},
+		{
+			"id": "youtubeSuperStickerAction",
+			"label": "",
+			"description": "Also run this Streamer.bot Action",
+			"type": "sb-actions",
+			"defaultValue": "",
+			"hideIf": "showYouTubeSuperStickers",
+			"group": "Which YouTube alerts do you want to see?"
+		},
 		{
 			"id": "showYouTubeMemberships",
 			"label": "Memberships",
@@ -213,12 +284,30 @@
 			"defaultValue": true,
 			"group": "Which YouTube alerts do you want to see?"
 		},
+		{
+			"id": "youtubeMembershipAction",
+			"label": "",
+			"description": "Also run this Streamer.bot Action",
+			"type": "sb-actions",
+			"defaultValue": "",
+			"hideIf": "showYouTubeMemberships",
+			"group": "Which YouTube alerts do you want to see?"
+		},
 		{
 			"id": "showStreamlabsDonations",
 			"label": "Streamlabs Tips",
 			"description": "<a href=\"https://docs.streamer.bot/guide/integrations/streamlabs\" target=\"_blank\">Click to connect</a>",
 			"type": "checkbox",
-			"defaultValue": true,
+			"defaultValue": false,
+			"group": "Which donation alerts do you want to see?"
+		},
+		{
+			"id": "streamlabsDonationAction",
+			"label": "",
+			"description": "Also run this Streamer.bot Action",
+			"type": "sb-actions",
+			"defaultValue": "",
+			"hideIf": "showStreamlabsDonations",
 			"group": "Which donation alerts do you want to see?"
 		},
 		{
@@ -226,7 +315,16 @@
 			"label": "StreamElements Tips",
 			"description": "<a href=\"https://docs.streamer.bot/guide/integrations/streamelements\" target=\"_blank\">Click to connect</a>",
 			"type": "checkbox",
-			"defaultValue": true,
+			"defaultValue": false,
+			"group": "Which donation alerts do you want to see?"
+		},
+		{
+			"id": "streamelementsTipAction",
+			"label": "",
+			"description": "Also run this Streamer.bot Action",
+			"type": "sb-actions",
+			"defaultValue": "",
+			"hideIf": "showStreamElementsTips",
 			"group": "Which donation alerts do you want to see?"
 		},
 		{
@@ -234,7 +332,16 @@
 			"label": "Patreon Memberships",
 			"description": "<a href=\"https://docs.streamer.bot/guide/integrations/patreon\" target=\"_blank\">Click to connect</a>",
 			"type": "checkbox",
-			"defaultValue": true,
+			"defaultValue": false,
+			"group": "Which donation alerts do you want to see?"
+		},
+		{
+			"id": "patreonMembershipActions",
+			"label": "",
+			"description": "Also run this Streamer.bot Action",
+			"type": "sb-actions",
+			"defaultValue": "",
+			"hideIf": "showPatreonMemberships",
 			"group": "Which donation alerts do you want to see?"
 		},
 		{
@@ -242,7 +349,16 @@
 			"label": "Ko-fi Donations",
 			"description": "<a href=\"https://docs.streamer.bot/guide/integrations/ko-fi\" target=\"_blank\">Click to connect</a>",
 			"type": "checkbox",
-			"defaultValue": true,
+			"defaultValue": false,
+			"group": "Which donation alerts do you want to see?"
+		},
+		{
+			"id": "kofiDonationAction",
+			"label": "",
+			"description": "Also run this Streamer.bot Action",
+			"type": "sb-actions",
+			"defaultValue": "",
+			"hideIf": "showKofiDonations",
 			"group": "Which donation alerts do you want to see?"
 		},
 		{
@@ -250,7 +366,16 @@
 			"label": "TipeeeStream Donations",
 			"description": "<a href=\"https://docs.streamer.bot/guide/integrations/tipeee-stream\" target=\"_blank\">Click to connect</a>",
 			"type": "checkbox",
-			"defaultValue": true,
+			"defaultValue": false,
+			"group": "Which donation alerts do you want to see?"
+		},
+		{
+			"id": "tipeeestreamDonationAction",
+			"label": "",
+			"description": "Also run this Streamer.bot Action",
+			"type": "sb-actions",
+			"defaultValue": "",
+			"hideIf": "showTipeeeStreamDonations",
 			"group": "Which donation alerts do you want to see?"
 		},
 		{
@@ -258,7 +383,16 @@
 			"label": "Fourthwall Alerts",
 			"description": "<a href=\"https://docs.streamer.bot/guide/integrations/fourthwall\" target=\"_blank\">Click to connect</a>",
 			"type": "checkbox",
-			"defaultValue": true,
+			"defaultValue": false,
+			"group": "Which donation alerts do you want to see?"
+		},
+		{
+			"id": "fourthwallAlertAction",
+			"label": "",
+			"description": "Also run this Streamer.bot Action",
+			"type": "sb-actions",
+			"defaultValue": "",
+			"hideIf": "showFourthwallAlerts",
 			"group": "Which donation alerts do you want to see?"
 		}
 	]
@@ -1,9 +1,9 @@
 * {
 	margin: 0;
 	padding: 0;
-	--margin: 20px;
-	/* --border-radius: 20px; */
-	font-size: 30px;
+	--margin: 0.5em;
+	--border-radius: 1em;
+	/* font-size: 30px; */
 	/* --line-spacing: 1.7em; */
 }

@@ -37,12 +37,14 @@ html {
 }

 #mainContainer {
-	display: block;
 	position: absolute;
 	width: 100%;
 	height: 100%;
 	padding: calc(2 * var(--margin));
 	box-sizing: border-box;
+	display: flex;
+	flex-direction: column;
+	justify-content: flex-end;
 }

 #alertBox {
@@ -53,10 +55,10 @@ html {
 	overflow: hidden;
 	box-sizing: border-box;
 	/* text-align: center; */
-	position: relative;
+	/* position: relative; */
 	/* transition: all 1s ease-in-out; */
-	min-height: 0px;
-	height: 0px;
+	/* min-height: 0px;
+	max-height: 0px; */
 }

 /* #alertBox::before {
@@ -79,21 +81,25 @@ html {
 	display: flex;
 	align-items: center;
 	z-index: 1;
-	position: absolute;
-	left: var(--margin);
-	top: var(--margin);
+	/* position: absolute; */
+	/* left: var(--margin);
+	top: var(--margin); */
 	transition: inherit;
+	padding: var(--margin);
+	display: none;
 }

 #theContentThatShowsLastInsteadOfFirst {
-	position: absolute;
-	display: block;
+	/* position: absolute; */
+	display: inline-block;
 	align-items: center;
 	z-index: 0;
-	position: absolute;
-	left: var(--margin);
-	top: var(--margin);
+	/* position: absolute; */
+	/* left: var(--margin);
+	top: var(--margin); */
+	padding: var(--margin);
 	transition: inherit;
+	display: none;
 }

 #avatar {
@@ -146,6 +152,19 @@ html {
 	border-radius: 0.5em;
 }

+.emote {
+	height: 1.5em;
+	margin: 1px;
+	transform: translate(0px, 0.4em);
+}
+
+.bits {
+	background: #adadad46;
+	border-radius: calc(var(--border-radius) / 2);
+	font-size: 0.7em;
+	padding: 5px 10px;
+}
+
 #message {
 	width: calc(100% - 2 * var(--margin));
 	z-index: 0;
@@ -167,7 +186,7 @@ html {
 	}
 }

-@keyframes slideBackUp {
+@keyframes slideOffUp {
 	0% {
 		transform: translateY(0);
 		opacity: 1;
@@ -191,7 +210,7 @@ html {
 	}
 }

-@keyframes slideBackDown {
+@keyframes slideOffDown {
 	0% {
 		transform: translateY(0);
 		opacity: 1;
@@ -215,7 +234,7 @@ html {
 	}
 }

-@keyframes slideBackLeft {
+@keyframes slideOffLeft {
 	0% {
 		transform: translateX(0);
 		opacity: 1;
@@ -239,7 +258,7 @@ html {
 	}
 }

-@keyframes slideBackRight {
+@keyframes slideOffRight {
 	0% {
 		transform: translateX(0);
 		opacity: 1;