Added new Chat Bubbles option

multichat-overlay/script.js

@@ -24,6 +24,9 @@ const showMessage = GetBooleanParam("showMessage", true);
 const font = urlParams.get("font") || "";
 const fontSize = urlParams.get("fontSize") || "30";
 const lineSpacing = urlParams.get("lineSpacing") || "1.7";
+const useChatBubbles = GetBooleanParam("useChatBubbles", false);
+const bubbleColor = urlParams.get("bubbleColor") || "#000000";
+const bubbleOpacity = urlParams.get("bubbleOpacity") || "0.9";
 const background = urlParams.get("background") || "#000000";
 const opacity = urlParams.get("opacity") || "0";
 
@@ -423,7 +426,17 @@ async function TwitchChatMessage(data) {
 	const usernameDiv = instance.querySelector("#username");
 	const messageDiv = instance.querySelector("#message");
 	
-	// messageContainerDiv.classList.add("bubble");
+	// Render bubbles
+	if (useChatBubbles)
+	{
+		const opacity255 = Math.round(parseFloat(bubbleOpacity) * 255);
+		let hexOpacity = opacity255.toString(16);
+		if (hexOpacity.length < 2) {
+			hexOpacity = "0" + hexOpacity;
+		}
+		document.documentElement.style.setProperty('--bubble-color', `${bubbleColor}${hexOpacity}`);
+		messageContainerDiv.classList.add("bubble");
+	}
 
 	// Set First Time Chatter
 	const firstMessage = data.message.firstMessage;
@@ -1096,7 +1109,17 @@ function YouTubeMessage(data) {
 	const usernameDiv = instance.querySelector("#username");
 	const messageDiv = instance.querySelector("#message");
 	
-	// messageContainerDiv.classList.add("bubble");
+	// Render bubbles
+	if (useChatBubbles)
+	{
+		const opacity255 = Math.round(parseFloat(bubbleOpacity) * 255);
+		let hexOpacity = opacity255.toString(16);
+		if (hexOpacity.length < 2) {
+			hexOpacity = "0" + hexOpacity;
+		}
+		document.documentElement.style.setProperty('--bubble-color', `${bubbleColor}${hexOpacity}`);
+		messageContainerDiv.classList.add("bubble");
+	}
 
 	// Set timestamp
 	if (showTimestamps) {
@@ -1974,7 +1997,17 @@ async function KickChatMessage(data) {
 	const usernameDiv = instance.querySelector("#username");
 	const messageDiv = instance.querySelector("#message");
 	
-	// messageContainerDiv.classList.add("bubble");
+	// Render bubbles
+	if (useChatBubbles)
+	{
+		const opacity255 = Math.round(parseFloat(bubbleOpacity) * 255);
+		let hexOpacity = opacity255.toString(16);
+		if (hexOpacity.length < 2) {
+			hexOpacity = "0" + hexOpacity;
+		}
+		document.documentElement.style.setProperty('--bubble-color', `${bubbleColor}${hexOpacity}`);
+		messageContainerDiv.classList.add("bubble");
+	}
 
 	// Set First Time Chatter
 	const firstMessage = data.firstMessage;
@@ -2444,6 +2477,18 @@ function TikTokChat(data) {
 	const pronounsDiv = instance.querySelector("#pronouns");
 	const usernameDiv = instance.querySelector("#username");
 	const messageDiv = instance.querySelector("#message");
+	
+	// Render bubbles
+	if (useChatBubbles)
+	{
+		const opacity255 = Math.round(parseFloat(bubbleOpacity) * 255);
+		let hexOpacity = opacity255.toString(16);
+		if (hexOpacity.length < 2) {
+			hexOpacity = "0" + hexOpacity;
+		}
+		document.documentElement.style.setProperty('--bubble-color', `${bubbleColor}${hexOpacity}`);
+		messageContainerDiv.classList.add("bubble");
+	}
 
 	// Set timestamp
 	if (showTimestamps) {
@@ -2927,43 +2972,4 @@ function SetConnectionStatus(connected) {
 		statusContainer.style.transition = "";
 		statusContainer.style.opacity = 1;
 	}
-}
+}
-
-let data = {
-    "isTest": false,
-    "createdAt": "2025-07-09T20:08:00.285111Z",
-    "updatedAt": "2025-07-09T20:08:02.875157Z",
-    "orderId": "cf346240-4aec-4180-a934-c537da606d1d",
-    "shopId": "sh_52bd3cd7-9d2a-411f-a39d-b5f495d94b56",
-    "friendly": "C3A21GSN",
-    "checkoutId": "ch_OorLt1nmQSuaJ-7cuw4gpw",
-    "status": "DELIVERED",
-    "email": "soyyahirda@gmail.com",
-    "emailMarketingOptIn": true,
-    "statmessageus": "",
-    "currency": "USD",
-    "subtotal": 0,
-    "shipping": 0,
-    "tax": 0,
-    "donation": 0,
-    "discount": 0,
-    "total": 0,
-    "variants": [
-      {
-        "id": "3615db93-4ee6-4e74-95da-423f6d269c5e",
-        "name": "Multichat Overlay",
-        "sku": "E6V8-M370000",
-        "image": "https://imgproxy.fourthwall.com/c8hzt6dcz8oRydfWZefs6SIE7XaHLb3nxdh2ffZx2MU/sm:1/enc/_E4zXgCjbueqrWEM/vAI0dpdr2NXEdZIv/hVgptGguJAG4x4v8/yqjRDCUeVomnpIvo/hhfJImiPC0CPAr4X/8185Z_nufxplf3mf/n9dRJ9OKofWADudx/e1PHg35vHZFqM1Fz/2-Bv0zKfGD44YSub/jVxvQNIZcEnEoXg2/YaudjZoENaKjwiaa/tzRZd55HVsXDx46P/838PRG1uTkIzmlej/zVnr_g",
-        "unitPrice": 0,
-        "currencyCode": "USD",
-        "quantity": 1,
-        "attributes": {
-          "description": ""
-        },
-        "stock": 0
-      }
-    ],
-    "source": "ORDER"
-  }
-
-  FourthwallOrderPlaced(data);

multichat-overlay/settings/settings.json

@@ -84,6 +84,35 @@
 			"step": ".1",
 			"group": "Appearance"
 		},
+		{
+			"id": "useChatBubbles",
+			"label": "Chat Bubbles",
+			"description": "",
+			"type": "checkbox",
+			"defaultValue": false,
+			"group": "Appearance"
+		},
+		{
+			"id": "bubbleColor",
+			"label": "Bubble Color",
+			"description": "",
+			"type": "color",
+			"defaultValue": "#1d1d1d",
+			"showIf": "useChatBubbles",
+			"group": "Appearance"
+		},
+		{
+			"id": "bubbleOpacity",
+			"label": "Bubble Opacity",
+			"description": "",
+			"type": "number",
+			"defaultValue": "0.90",
+			"min": 0,
+			"max": 1,
+			"step": ".01",
+			"showIf": "useChatBubbles",
+			"group": "Appearance"
+		},
 		{
 			"id": "background",
 			"label": "Background",
@@ -97,7 +126,7 @@
 			"label": "Background Opacity",
 			"description": "",
 			"type": "number",
-			"defaultValue": "0.00",
+			"defaultValue": "00",
 			"min": 0,
 			"max": 1,
 			"step": ".01",

multichat-overlay/style.css

@@ -94,14 +94,15 @@ li {
 }
 
 .bubble {
-	background: #000000bf !important;
+	background: var(--bubble-color) !important;
 	padding: 0.5em 1em;
 	border-radius: var(--border-radius);
 }
 
 .highlightMessage {
 	/* background: #adadad46 !important; */
-	background: #414141bf !important;
+	background: #414141e5 !important;
+	box-shadow: inset 0 0 0 0.1em rgb(94, 94, 94);
 	padding: 0.5em 1em;
 	border-radius: var(--border-radius);
 }