
To set up this stream overlay you need to add two widgets to your new overlay.
(Watch Youtube video – How to set up stream elements, unlisted, no narration)
1. Background of the widget.
To add this to your new Stream overlay, go to add -> Static/Custom -> Custom Widget.
Go to settings, open the editor and copy and completely replace the code below into the correct fields.
HTML
CSS
JS
FIELDS
DATA
HTML
<link href=“https://fonts.googleapis.com/css?family=Montserrat:400,700” rel=“stylesheet”>
<div class=“main-container”><?xml version=”1.0″ encoding=”utf-8″?>
<!– Generator: Adobe Illustrator 26.2.1, SVG Export Plug-In . SVG Version: 6.00 Build 0) –>
<?xml version=”1.0″ encoding=”UTF-8″?>
<svg xmlns=“http://www.w3.org/2000/svg” viewBox=“0 0 960 417.19”>
<defs>
<style>
.cls-1 {
fill: none;
}
.cls-1, .cls-2, .cls-3 {
stroke: #333;
stroke-miterlimit: 10;
stroke-width: 2px;
}
.cls-4 {
fill: #333;
}
.cls-2 {
fill: #fff5f1;
}
.cls-3 {
fill: #e0e161;
}
</style>
</defs>
<g id=“Shadow”>
<path class=“cls-4” d=“M949.37,68.4v290.1c0,26.75-21.68,48.45-48.45,48.45H64.79c-26.75,0-48.45-21.7-48.45-48.45V68.4c0-26.75,21.69-48.45,48.45-48.45h836.13c26.77,0,48.45,21.7,48.45,48.45Z”/>
</g>
<g id=“Body”>
<path class=“cls-2” d=“M945.19,64.22v290.1c0,26.75-21.68,48.45-48.45,48.45H60.61c-26.75,0-48.45-21.7-48.45-48.45V64.22c0-26.75,21.69-48.45,48.45-48.45h836.13c26.77,0,48.45,21.7,48.45,48.45Z”/>
</g>
<g id=“Window-Header”>
<path class=“cls-3” d=“M945.19,64.22v31.52H12.16v-31.52c0-26.75,21.69-48.45,48.45-48.45h836.13c26.77,0,48.45,21.7,48.45,48.45Z”/>
</g>
<g id=“Close-outline”>
<g>
<rect class=“cls-1” x=“865.24” y=“38.82” width=“41.63” height=“41.63”/>
<line class=“cls-1” x1=“873.45” y1=“46.8” x2=“897.9” y2=“71.43”/>
<line class=“cls-1” x1=“897.9” y1=“45.72” x2=“873.45” y2=“71.43”/>
</g>
</g>
</svg>
</div>
CSS
svg .cls-2 {
fill: {{svgColor1}};
}
svg .cls-4 {
fill: {{svgColor2}};
}
svg .cls-3 {
fill: {{svgColor3}};
}
svg .cls-1{
stroke: {{svgColor4}};
}
svg .cls-2{
stroke: {{svgColor4}};
}svg .cls-3{
stroke: {{svgColor4}};
}
JS
let eventsLimit = 5,
userLocale = “en-US”,
includeFollowers = true,
includeRedemptions = true,
includeHosts = true,
minHost = 0,
includeRaids = true,
minRaid = 0,
includeSubs = true,
includeTips = true,
minTip = 0,
includeCheers = true,
direction = “top”,
textOrder = “nameFirst”,
minCheer = 0;
let userCurrency,
totalEvents = 0;
window.addEventListener(‘onEventReceived’, function (obj) {
if (!obj.detail.event) {
return;
}
if (typeof obj.detail.event.itemId !== “undefined”) {
obj.detail.listener = “redemption-latest”
}
const listener = obj.detail.listener.split(“-“)[0];
const event = obj.detail.event;
if (listener === ‘follower’) {
if (includeFollowers) {
addEvent(‘follower’, ‘Follower’, event.name);
}
} else if (listener === ‘redemption’) {
if (includeRedemptions) {
addEvent(‘redemption’, ‘Redeemed’, event.name);
}
} else if (listener === ‘subscriber’) {
if (includeSubs) {
if (event.gifted) {
addEvent(‘sub’, `Sub gift`, event.name);
} else {
addEvent(‘sub’, `Sub X${event.amount}`, event.name);
}
}
} else if (listener === ‘host’) {
if (includeHosts && minHost <= event.amount) {
addEvent(‘host’, `Host ${event.amount.toLocaleString()}`, event.name);
}
} else if (listener === ‘cheer’) {
if (includeCheers && minCheer <= event.amount) {
addEvent(‘cheer’, `${event.amount.toLocaleString()} Bits`, event.name);
}
} else if (listener === ‘tip’) {
if (includeTips && minTip <= event.amount) {
if (event.amount === parseInt(event.amount)) {
addEvent(‘tip’, event.amount.toLocaleString(userLocale, {
style: ‘currency’,
minimumFractionDigits: 0,
currency: userCurrency.code
}), event.name);
} else {
addEvent(‘tip’, event.amount.toLocaleString(userLocale, {
style: ‘currency’,
currency: userCurrency.code
}), event.name);
}
}
} else if (listener === ‘raid’) {
if (includeRaids && minRaid <= event.amount) {
addEvent(‘raid’, `Raid ${event.amount.toLocaleString()}`, event.name);
}
}
});
window.addEventListener(‘onWidgetLoad’, function (obj) {
let recents = obj.detail.recents;
recents.sort(function (a, b) {
return Date.parse(a.createdAt) – Date.parse(b.createdAt);
});
userCurrency = obj.detail.currency;
const fieldData = obj.detail.fieldData;
eventsLimit = fieldData.eventsLimit;
includeFollowers = (fieldData.includeFollowers === “yes”);
includeRedemptions = (fieldData.includeRedemptions === “yes”);
includeHosts = (fieldData.includeHosts === “yes”);
minHost = fieldData.minHost;
includeRaids = (fieldData.includeRaids === “yes”);
minRaid = fieldData.minRaid;
includeSubs = (fieldData.includeSubs === “yes”);
includeTips = (fieldData.includeTips === “yes”);
minTip = fieldData.minTip;
includeCheers = (fieldData.includeCheers === “yes”);
minCheer = fieldData.minCheer;
direction = fieldData.direction;
userLocale = fieldData.locale;
textOrder = fieldData.textOrder;
fadeoutTime = fieldData.fadeoutTime;
let eventIndex;
for (eventIndex = 0; eventIndex < recents.length; eventIndex++) {
const event = recents[eventIndex];
if (event.type === ‘follower’) {
if (includeFollowers) {
addEvent(‘follower’, ‘Follower’, event.name);
}
} else if (event.type === ‘redemption’) {
if (includeRedemptions) {
addEvent(‘redemption’, ‘Redeemed’, event.name);
}
} else if (event.type === ‘subscriber’) {
if (!includeSubs) continue;
if (event.amount === ‘gift’) {
addEvent(‘sub’, `Sub gift`, event.name);
} else {
addEvent(‘sub’, `Sub X${event.amount}`, event.name);
}
} else if (event.type === ‘host’) {
if (includeHosts && minHost <= event.amount) {
addEvent(‘host’, `Host ${event.amount.toLocaleString()}`, event.name);
}
} else if (event.type === ‘cheer’) {
if (includeCheers && minCheer <= event.amount) {
addEvent(‘cheer’, `${event.amount.toLocaleString()} Bits`, event.name);
}
} else if (event.type === ‘tip’) {
if (includeTips && minTip <= event.amount) {
if (event.amount === parseInt(event.amount)) {
addEvent(‘tip’, event.amount.toLocaleString(userLocale, {
style: ‘currency’,
minimumFractionDigits: 0,
currency: userCurrency.code
}), event.name);
} else {
addEvent(‘tip’, event.amount.toLocaleString(userLocale, {
style: ‘currency’,
currency: userCurrency.code
}), event.name);
}
}
} else if (event.type === ‘raid’) {
if (includeRaids && minRaid <= event.amount) {
addEvent(‘raid’, `Raid ${event.amount.toLocaleString()}`, event.name);
}
}
}
});
function addEvent(type, text, username) {
totalEvents += 1;
let element;
if (textOrder === “actionFirst”) {
element = `
<div class=”event-container” id=”event-${totalEvents}“>
<div class=”backgroundsvg”></div>
<div class=”event-image event-${type}“></div>
<div class=”username-container”>${text}</div>
<div class=”details-container”>${username}</div>
</div>`;
} else {
element = `
<div class=”event-container” id=”event-${totalEvents}“>
<div class=”backgroundsvg”></div>
<div class=”event-image event-${type}“></div>
<div class=”username-container”>${username}</div>
<div class=”details-container”>${text}</div>
</div>`;
}
if (direction === “bottom”) {
$(‘.main-container’).removeClass(“fadeOutClass”).show().append(element);
} else {
$(‘.main-container’).removeClass(“fadeOutClass”).show().prepend(element);
}
if (fadeoutTime !== 999) {
$(‘.main-container’).addClass(“fadeOutClass”);
}
if (totalEvents > eventsLimit) {
removeEvent(totalEvents – eventsLimit);
}
}
function removeEvent(eventId) {
$(`#event-${eventId}`).animate({
height: 0,
opacity: 0
}, ‘slow’, function () {
$(`#event-${eventId}`).remove();
});
}
FIELDS
{
“svgColor1”: {
“type”: “colorpicker”,
“label”: “Body Color”,
“value”: “rgb(255, 255, 255)”
},
“svgColor2”: {
“type”: “colorpicker”,
“label”: “Shaodw”,
“value”: “rgb(255, 255, 255)”
},
“svgColor3”: {
“type”: “colorpicker”,
“label”: “Header”,
“value”: “rgb(255, 255, 255)”
},
“svgColor4”: {
“type”: “colorpicker”,
“label”: “Outline Color”,
“value”: “rgb(255, 255, 255)”
}
}
DATA
{
“svgColor1”: “#FF9CED”,
“svgColor2”: “#9447ED”,
“svgColor3”: “#47E8EB”,
“svgColor4”: “#9447ED”
}
2. Progress Bar
Then, add this code as a new widget, same as before.
Credits to: Original code: Will Neithan (Github)
Changes in this code:
- Header and footer removed.
- Fireworks removed.
- Instead of 1, 400, 000 it shows 1.4Mil
- Buffer divider removed.
- Numbers count up every 30 seconds as it gets updated from the server
(looks more dynamic, number go up, awooga).
If you’d like to get in touch with me for more tweaking find my streams: (Twitch: HelloSajini) (I stream all work days) or write to hellosajini@gmail.com
HTML
CSS
JS
FIELDS
DATA
HTML
<link rel=“preconnect” href=“https://fonts.googleapis.com”>
<link rel=“preconnect” href=“https://fonts.gstatic.com” crossorigin>
<link href=“https://fonts.googleapis.com/css?family={topTextfont}:400,700” rel=“stylesheet”>
<link href=“https://fonts.googleapis.com/css?family={progressBarFont}:400,700” rel=“stylesheet”>
<link href=“https://fonts.googleapis.com/css?family={countdownfont}:400,700” rel=“stylesheet”>
<link href=“https://fonts.googleapis.com/css?family={websitefont}:400,700” rel=“stylesheet”>
<div id=“overlay”>
<div id=“progress”>
<div id=“fireworks”>
</div>
<div id=“header”>
</div>
<div id=“bar”>
<span class=“endgame”><span id=“goal” class=“amount”>0</span></span>
<div class=“loading”><span class=“amount”>0</span></div>
<div id=“divider”></div>
</div>
<div id=“footer”>
</div>
</div>
</div>
CSS
#fireworks {
display: flex;
justify-content: center;
}
#fireworksVideo {
position: absolute;
top: 0;
width: 100%;
height: 100%;
object-fit: fill;
z-index: 3;
opacity: 0;
transition: opacity 3s ease;
}
#fireworksVideo.fadeIn {
opacity: 0.6;
}
#fireworksVideo.fadeOut {
opacity: 0;
}
#divider {
opacity: 0;
width: 1%;
height: 100%;
position: absolute;
top: 0;
left: 50%;
z-index: 1;
background: {{progressGoalDivider}};
}
#progress {
float: right;
color: white;
display: flex;
flex-direction: column;
flex-wrap: nowrap;
width: {{widgetWidth}}px;
align-items: center;
justify-content: flex-end;
}
#header {
display: flex;
width: 100%;
justify-content: center;
}
#text {
display: flex;
padding-bottom: .7em;
text-align: center;
font-family: {{topTextfont}}, Arial, sans-serif;
font-size: {{topTextFontSize}}px;
color: {{topTextColor}};
font-weight: {{topTextFontWeight}};
font-style: {{topTextFontStyle}};
}
#footer {
display: flex;
width: 100%;
justify-content: space-between;
line-height: {{countdownFontSize}}px;
align-items: center;
}
#countdown {
display: inline-flex;
width: 100%;
text-align: center;
justify-content: center;
align-items: center;
margin-top: .5em;
font-family: {{countdownfont}}, Arial, sans-serif;
font-size: {{countdownFontSize}}px;
color: {{countdownColor}};
font-weight: {{countdownFontWeight}};
font-style: {{countdownFontStyle}};
}
#progress .label {
display: inline-flex;
align-items: center;
height: 20px;
margin-top: .5em;
background: {{websiteBackgroundColor}};
border-radius: {{websiteBackgroundRadius}}px;
font-family: {{websitefont}}, Arial, sans-serif;
font-size: {{websiteFontSize}}px;
color: {{websiteColor}};
font-weight: {{websiteFontWeight}};
font-style: {{websiteFontStyle}};
}
#progress #bar {
width: 94%;
height: 20px;
line-height: 23px;
padding: {{progressBarHeight}}px 22px;
border-radius: {{progressBarBackgroundRadius}}px;
background: {{progressBarGoalBackgroundColor}};
font-family: {{progressBarFont}}, Arial, sans-serif;
font-size: {{progressBarFontSize}}px;
font-weight: {{progressBarFontWeight}};
font-style: {{progressBarFontStyle}};
display: flex;
align-items: center;
justify-content: flex-end;
position: relative;
flex-wrap: wrap;
}
#progress #bar::before , #progress #bar .loading {
content: ”;
background: {{progressBarGoalBackgroundColor}};
border-radius: {{progressBarBackgroundRadius}}px;
width: 100%;
height: 100%;
position: absolute;
left: 0;
top: 0;
z-index: -2; }
#progress #bar .loading {
background: {{progressBarSignaturesBackgroundColor}};
min-width: 13%;
width: 13%;
z-index: 0;
display: flex;
align-items: center;
transition: .5s all ease-in-out; }
#progress #bar .loading .amount {
position: relative;
left: 24px;
}
#progress .loading .amount {
color: {{progressBarSignaturesColor}};
}
#progress .endgame .amount {
color: {{progressBarGoalColor}};
position: relative;
z-index: 2;
}
JS
// Signatures goal number
const goalSignatures = 1400000;
//
// *** FUN SECTION *** //
//
// Comment out the “goalSignature” line above and uncomment the “goalSignatures” line below
// if you want to see fireworks.
// Don’t forget to change it back and save it afterwards!
//
//const goalSignatures = 400000;
//
// *** END FUN SECTION *** //
//
// Deadline date adjusted to Belgium time UTC+2, so UTC deadline needs to be -2 hours to match
const countDownDate = new Date(“2025-07-31T21:59:59Z”).getTime();
// Upper case checkbox true/false variable
let upperCaseCountdown = false;
// Boolean variable so that end-goal video plays only once every widget load
let goalVideoPlayed = false;
// Border radius for end-goal video so it matches background
let fireworksVideoBorderRadius = null;
let previousSignatureCount = null;
let lastSignatureCount = 0;
let fetchSeconds = 0;
// Fetch petition data (at interval) from official petition site (AI generated, edited)
function fetchData() {
const xhr = new XMLHttpRequest();
xhr.open(“GET”, “https://eci.ec.europa.eu/045/public/api/report/progression”, true);
xhr.onreadystatechange = function () {
if (xhr.readyState === 4 && xhr.status === 200) {
// Parse JSON and extract signature count data
previousSignatureCount = lastSignatureCount;
lastSignatureCount = JSON.parse(xhr.responseText).signatureCount;
fetchSeconds = 0;
}
};
xhr.send();
}
// First call
fetchData();
// Call at interval
let fetchWaitSeconds = 30;
setInterval(fetchData, fetchWaitSeconds * 1000);
function update() {
let signatureCount = lastSignatureCount;
if (previousSignatureCount)
signatureCount = Math.round(
previousSignatureCount +
(lastSignatureCount – previousSignatureCount) *
fetchSeconds / fetchWaitSeconds
);
fetchSeconds++;
// Format numbers with spaces
const goalSignaturesFormatted = “1.4 MIL”;
const signatureCountFormatted = formatWithSpaces(signatureCount);
// Add signature count and goal numbers to HTML elements
$(‘#progress .endgame .amount’).text(goalSignaturesFormatted);
$(‘#progress .loading .amount’).text(signatureCountFormatted);
// Calculate progress in percent for progress bar visuals
const percentLoading = doPercent(signatureCount, goalSignatures);
// Edit width of progress bar according to the percentage in css
$(‘#progress .loading’).css(
{
‘width’: percentLoading + ‘%’
});
}
setInterval(update, 1000);
// Format numbers with spaces by thousands
function formatWithSpaces(num) {
return num.toString().replace(/\B(?=(\d{3})+(?!\d))/g, ‘ ‘);
}
// Percentage calculation for progress bar visuals
function doPercent(total, goal) {
const perc = total / goal;
let amount = perc * 100;
if (amount < 1) {
amount = 1;
}
if (amount > 100) {
amount = 100;
}
return amount;
}
// Calculation and HTML modification of countdown of petition deadline (function runs at 1s interval.. potential performance issues??)
const x = setInterval(function () {
const now = new Date().getTime();
// Get time left to deadline
const distance = countDownDate – now;
// Split remaining time into d/h/m/s
const days = Math.floor(distance / (1000 * 60 * 60 * 24));
const hours = Math.floor((distance % (1000 * 60 * 60 * 24)) / (1000 * 60 * 60));
const minutes = Math.floor((distance % (1000 * 60 * 60)) / (1000 * 60));
const seconds = Math.floor((distance % (1000 * 60)) / 1000);
// Print remaining days/hour/minutes/seconds accordingly to HTML element
if (days >= 1) {
if (days === 1) {
document.getElementById(“countdown”).innerHTML = days + upperCaseOrNot(” day left!”);
} else {
document.getElementById(“countdown”).innerHTML = days + upperCaseOrNot(” days left!”);
}
} else if (hours >= 1) {
if (hours === 1) {
document.getElementById(“countdown”).innerHTML = hours + upperCaseOrNot(” hour left!”);
} else {
document.getElementById(“countdown”).innerHTML = hours + upperCaseOrNot(” hours left!”);
}
} else if (minutes >= 1) {
if (minutes === 1) {
document.getElementById(“countdown”).innerHTML = minutes + upperCaseOrNot(” minute left!”);
} else {
document.getElementById(“countdown”).innerHTML = minutes + upperCaseOrNot(” minutes left!”);
}
} else {
if (seconds === 1) {
document.getElementById(“countdown”).innerHTML = seconds + upperCaseOrNot(” second left!”);
} else if (seconds < 1) {
document.getElementById(“countdown”).innerHTML = upperCaseOrNot(“Thank you, everyone!”);
} else {
document.getElementById(“countdown”).innerHTML = seconds + upperCaseOrNot(” seconds left!”);
}
}
if (distance < 0) {
clearInterval(x);
document.getElementById(“countdown”).innerHTML = upperCaseOrNot(“Thank you, everyone!”);
}
}, 1000);
// Use upper case letters in countdown text based on checkbox in settings
function upperCaseOrNot(text) {
return upperCaseCountdown ? text.toUpperCase() : text;
}
window.addEventListener(‘onWidgetLoad’, function (obj) {
// Get field data for widget
const fieldData = obj.detail.fieldData;
// Save countdown upper case checkbox state to variable
upperCaseCountdown = fieldData.countdownUpperCase;
// Draw and apply background settings if background checkbox is checked
if (fieldData.widgetBackgroundEnabled) {
// If background color setting is filled out, add it to css
if (fieldData.widgetBackgroundColor) {
$(‘#progress’).css(
{
‘background’: fieldData.widgetBackgroundColor
});
// If background color setting is empty, add default value to css
} else {
$(‘#progress’).css(
{
‘background’: ‘rgba(0,0,0,0)’
});
}
// If background padding size setting is filled out, add it to css
if (fieldData.widgetBackgroundPadding) {
$(‘#progress’).css(
{
‘padding’: fieldData.widgetBackgroundPadding
});
// If background padding size setting is empty, add default value to css
} else {
$(‘#progress’).css(
{
‘padding’: 0 + ‘px’
});
}
// If background radius size setting is filled out, add it to css
if (fieldData.widgetBackgroundRadius) {
$(‘#progress’).css(
{
‘border-radius’: fieldData.widgetBackgroundRadius + ‘px’
});
// Change value for goal-end video
fireworksVideoBorderRadius = fieldData.widgetBackgroundRadius;
// If background radius size setting is empty, add default value to css
} else {
$(‘#progress’).css(
{
‘border-radius’: 0 + ‘px’
});
}
// If background checkbox is unchecked, remove all background visuals in css
} else {
$(‘#progress’).css(
{
‘background’: ‘rgba(0,0,0,0)’,
‘padding’: 0 + ‘px’,
‘border-radius’: 0 + ‘px’
});
// Change value for goal-end video
fireworksVideoBorderRadius = null;
}
// Calculate and apply website label paddings from one value from settings if field is filled out
if (fieldData.websiteBackgroundPadding) {
$(‘#progress .label’).css(
{
‘padding’: Math.round(fieldData.websiteBackgroundPadding * 0.7) + ‘px’
+ ‘ ‘ + fieldData.websiteBackgroundPadding + ‘px’
});
$(‘#countdown’).css(
{
‘padding’: Math.round(fieldData.websiteBackgroundPadding * 0.7) + ‘px’
+ ‘ ‘ + fieldData.websiteBackgroundPadding + ‘px’
});
// Apply default paddings if settings field is empty
} else {
$(‘#progress .label’).css(
{
‘padding’: 11 + ‘px’ + ‘ ‘ + 16 + ‘px’
});
$(‘countdown’).css(
{
‘padding’: 11 + ‘px’ + ‘ ‘ + 16 + ‘px’
});
}
});
FIELDS
{
“widgetBackgroundEnabled”: {
“group”: “General”,
“type”: “checkbox”,
“label”: “Background Enabled”,
“value”: false
},
“widgetBackgroundColor”: {
“group”: “General”,
“type”: “colorpicker”,
“label”: “Background Color”,
“value”: “rgba(0,0,0,0)”
},
“widgetBackgroundPadding”: {
“group”: “General”,
“type”: “number”,
“label”: “Background Padding Size”,
“value”: 0,
“step”: 1,
“min”: 0
},
“widgetBackgroundRadius”: {
“group”: “General”,
“type”: “number”,
“label”: “Background Border Radius”,
“value”: 0,
“step”: 1,
“min”: 0
},
“widgetWidth”: {
“group”: “General”,
“type”: “number”,
“label”: “Width”,
“value”: 730,
“step”: 10,
“min”: 400,
“max”: 800
},
“topText”: {
“group”: “Text (top)”,
“type”: “text”,
“label”: “Text”,
“value”: “HELP US SAVE THE GAMES YOU LOVE, SIGN EU PETITION!”
},
“topTextfont”: {
“group”: “Text (top)”,
“type”: “googleFont”,
“label”: “Font (recommended alternative: Rubik)”,
“value”: “Architects Daughter”
},
“topTextFontSize”: {
“group”: “Text (top)”,
“type”: “number”,
“label”: “Font Size”,
“value”: 35,
“step”: 1,
“min”: 1
},
“topTextColor”: {
“group”: “Text (top)”,
“type”: “colorpicker”,
“label”: “Text Color”,
“value”: “#000000”
},
“topTextFontWeight”: {
“group”: “Text (top)”,
“type”: “dropdown”,
“label”: “Font Weight”,
“value”: “700”,
“options”: {
“400”: “Regular”,
“700”: “Bold”
}
},
“topTextFontStyle”: {
“group”: “Text (top)”,
“type”: “dropdown”,
“label”: “Font Style”,
“value”: “normal”,
“options”: {
“normal”: “Normal”,
“italic”: “Italic”
}
},
“progressGoalDivider”: {
“group”: “Progress Bar (middle)”,
“type”: “colorpicker”,
“label”: “Goal Divider Color”,
“value”: “#000000”
},
“progressBarFont”: {
“group”: “Progress Bar (middle)”,
“type”: “googleFont”,
“label”: “Font”,
“value”: “Rubik”
},
“progressBarFontSize”: {
“group”: “Progress Bar (middle)”,
“type”: “number”,
“label”: “Font Size”,
“value”: 25,
“step”: 1,
“min”: 1
},
“progressBarFontWeight”: {
“group”: “Progress Bar (middle)”,
“type”: “dropdown”,
“label”: “Font Weight”,
“value”: “bold”,
“options”: {
“normal”: “Normal”,
“bold”: “Bold”
}
},
“progressBarFontStyle”: {
“group”: “Progress Bar (middle)”,
“type”: “dropdown”,
“label”: “Font Style”,
“value”: “normal”,
“options”: {
“normal”: “Normal”,
“italic”: “Italic”
}
},
“progressBarSignaturesColor”: {
“group”: “Progress Bar (middle)”,
“type”: “colorpicker”,
“label”: “SIGNATURES NUMBER Color (left)”,
“value”: “#ffffff”
},
“progressBarSignaturesBackgroundColor”: {
“group”: “Progress Bar (middle)”,
“type”: “colorpicker”,
“label”: “SIGNATURES BACKGROUND Color (left)”,
“value”: “rgba(30, 68, 138, 1)”
},
“progressBarGoalColor”: {
“group”: “Progress Bar (middle)”,
“type”: “colorpicker”,
“label”: “GOAL NUMBER Color (right)”,
“value”: “#ffffff”
},
“progressBarGoalBackgroundColor”: {
“group”: “Progress Bar (middle)”,
“type”: “colorpicker”,
“label”: “GOAL BACKGROUND Color (right)”,
“value”: “rgba(100, 100, 100, 1)”
},
“progressBarHeight”: {
“group”: “Progress Bar (middle)”,
“type”: “number”,
“label”: “Bar Height (Thickness)”,
“value”: 11,
“step”: 1,
“min”: 0
},
“progressBarBackgroundRadius”: {
“group”: “Progress Bar (middle)”,
“type”: “number”,
“label”: “Bar Border Radius”,
“value”: 23,
“step”: 1,
“min”: 0
},
“countdownfont”: {
“group”: “Countdown (bottom left)”,
“type”: “googleFont”,
“label”: “Font”,
“value”: “Architects Daughter”
},
“countdownFontSize”: {
“group”: “Countdown (bottom left)”,
“type”: “number”,
“label”: “Font Size”,
“value”: 30,
“step”: 1,
“min”: 1
},
“countdownUpperCase”: {
“group”: “Countdown (bottom left)”,
“type”: “checkbox”,
“label”: “Uppercase Letters Applied”,
“value”: true
},
“countdownColor”: {
“group”: “Countdown (bottom left)”,
“type”: “colorpicker”,
“label”: “Text Color”,
“value”: “#000000”
},
“countdownFontWeight”: {
“group”: “Countdown (bottom left)”,
“type”: “dropdown”,
“label”: “Font Weight”,
“value”: “bold”,
“options”: {
“normal”: “Normal”,
“bold”: “Bold”
}
},
“countdownFontStyle”: {
“group”: “Countdown (bottom left)”,
“type”: “dropdown”,
“label”: “Font Style”,
“value”: “normal”,
“options”: {
“normal”: “Normal”,
“italic”: “Italic”
}
},
“websitefont”: {
“group”: “Website (bottom right)”,
“type”: “googleFont”,
“label”: “Font”,
“value”: “Rubik”
},
“websiteFontSize”: {
“group”: “Website (bottom right)”,
“type”: “number”,
“label”: “Font Size”,
“value”: 30,
“step”: 1,
“min”: 1
},
“websiteColor”: {
“group”: “Website (bottom right)”,
“type”: “colorpicker”,
“label”: “Text Color”,
“value”: “#1E448A”
},
“websiteFontWeight”: {
“group”: “Website (bottom right)”,
“type”: “dropdown”,
“label”: “Font Weight”,
“value”: “bold”,
“options”: {
“normal”: “Normal”,
“bold”: “Bold”
}
},
“websiteFontStyle”: {
“group”: “Website (bottom right)”,
“type”: “dropdown”,
“label”: “Font Style”,
“value”: “normal”,
“options”: {
“normal”: “Normal”,
“italic”: “Italic”
}
},
“websiteBackgroundColor”: {
“group”: “Website (bottom right)”,
“type”: “colorpicker”,
“label”: “Background Color”,
“value”: “rgba(253, 203, 11, 1)”
},
“websiteBackgroundPadding”: {
“group”: “Website (bottom right)”,
“type”: “number”,
“label”: “Background Padding Size”,
“value”: 16,
“step”: 1,
“min”: 0
},
“websiteBackgroundRadius”: {
“group”: “Website (bottom right)”,
“type”: “number”,
“label”: “Background Border Radius”,
“value”: 24,
“step”: 1,
“min”: 0
},
“widgetName”: {
“group”: “About”,
“type”: “hidden”,
“label”: “Stop Killing Games Overlay (unofficial)”,
“value”: “Stop Killing Games Overlay (unofficial)”
},
“widgetVersion”: {
“group”: “About”,
“type”: “hidden”,
“label”: “Version: 1.1.0”,
“value”: “1.1.0”
},
“widgetAuthor”: {
“group”: “About”,
“type”: “hidden”,
“label”: “Author: Will Neithan”,
“value”: “Will Neithan”
},
“widgetGithubUrl”: {
“group”: “About”,
“type”: “hidden”,
“label”: “Github: stopkillinggames_overlay”,
“value”: “https://github.com/will-neithan/stopkillinggames_overlay”
}
}
DATA
{
“eventsLimit”: 5,
“includeFollowers”: “yes”,
“includeRedemptions”: “yes”,
“includeHosts”: “yes”,
“minHost”: 1,
“includeRaids”: “yes”,
“minRaid”: 1,
“includeSubs”: “yes”,
“includeTips”: “yes”,
“minTip”: 1,
“includeCheers”: “yes”,
“minCheer”: 1,
“direction”: “top”,
“textOrder”: “nameFirst”,
“fadeoutTime”: 999,
“fontColor”: “rgb(255, 255, 255)”,
“theme”: “texture”,
“backgroundOpacity”: 50,
“backgroundColor”: “rgba(36, 6, 73, 0.15)”,
“iconColor”: “rgb(255, 255, 255, 255)”,
“locale”: “en-US”,
“widgetBackgroundEnabled”: false,
“widgetBackgroundColor”: “rgba(0,0,0,0)”,
“widgetBackgroundPadding”: 0,
“widgetBackgroundRadius”: 0,
“widgetWidth”: 800,
“topText”: “”,
“topTextfont”: “Roboto”,
“topTextFontSize”: 35,
“topTextColor”: “#000000”,
“topTextFontWeight”: “400”,
“topTextFontStyle”: “normal”,
“progressBarFont”: “Mukta”,
“progressBarFontSize”: 44,
“progressBarFontWeight”: “bold”,
“progressBarFontStyle”: “normal”,
“progressBarSignaturesColor”: “#ffffff”,
“progressBarSignaturesBackgroundColor”: “#9447ED”,
“progressBarGoalColor”: “#333333”,
“progressBarGoalBackgroundColor”: “#fffffe”,
“progressBarHeight”: 30,
“progressBarBackgroundRadius”: 89,
“countdownfont”: “Roboto”,
“countdownFontSize”: 30,
“countdownUpperCase”: false,
“countdownColor”: “#fffefe”,
“countdownFontWeight”: “bold”,
“countdownFontStyle”: “normal”,
“websitefont”: “Roboto”,
“websiteFontSize”: 10,
“websiteColor”: “#1E448A”,
“websiteFontWeight”: “normal”,
“websiteFontStyle”: “normal”,
“websiteBackgroundColor”: “rgba(253, 203, 11, 1)”,
“websiteBackgroundPadding”: 16,
“websiteBackgroundRadius”: 24,
“widgetName”: “Stop Killing Games Overlay (unofficial)”,
“widgetVersion”: “1.0.0”,
“widgetAuthor”: “Will Neithan”,
“widgetGithubUrl”: “https://github.com/will-neithan/stopkillinggames_overlay”,
“progressGoalDivider”: “#000000”
}