streamlabs streamboss Name change - streaming

Question

Let me start by saying thank you in advance!
I'm on this site called StreamLabs for twitch streamers and they've introduced a way to use custom HTML, CSS, & JS to customize your look.
They have a thing called "Stream boss" that reacts to users following, sub, and/or donating.
I don't know how to change the name of the streamboss can someone help me with that
/*
bar(asset) width is 315
math for doing the stuff
x = {asset_length} - ( {asset_length} * ( {current_health}/{max_health} ) );
*/
// Events will be sent when the boss is damaged or killed.
// Please use event listeners to run functions.
document.addEventListener('bossLoad', function(obj) {
// obj.detail will contain information about the current boss
// this will fire only once when the widget loads
console.log(obj.detail);
//$('#user_pic').attr('src', obj.detail.boss_img);
$('#current_health').text(obj.detail.current_health);
$('#total_health').text(obj.detail.total_health);
$('#username').text(obj.detail.boss_name);
});
document.addEventListener('bossDamaged', function(obj) {
// obj.detail will contain information about the boss and a
// custom message
var x_coordinate = 0;
console.log(obj.detail);
// set the text
$('#current_health').text(obj.detail.boss.current_health);
// calculate where the x is
x_coordinate = 315 - (315 * (Number(obj.detail.boss.current_health) / Number(obj.detail.boss.total_health)));
// round the output
x_coordinate = -(~~x_coordinate);
// we animate the `background-position-x`
$('#vbi-health-bar').animate({
'background-position-x': x_coordinate + 'px'
}, 1000);
});
// Similarly for for when a boss is killed
document.addEventListener('bossKilled', function(obj) {
var x_coordinate = 0;
console.log(obj.detail);
$('#username').text(obj.detail.boss.boss_name);
//$('#user_pic').attr('src', obj.detail.boss.boss_img);
$('#current_health').text(obj.detail.boss.current_health);
$('#total_health').text(obj.detail.boss.total_health);
// calculate where the x is
x_coordinate = 315 - (315 * (Number(obj.detail.boss.current_health) / Number(obj.detail.boss.total_health)));
// round the output
x_coordinate = -(~~x_coordinate);
// we animate the `background-position-x`
$('#vbi-health-bar').animate({
'background-position-x': x_coordinate + 'px'
}, 1000);
});
#import url('https://fonts.googleapis.com/css?family=Teko:700');
/* All html objects will be wrapped in the #wrap div */
#username,
#user_hp_cont {
height: 33px;
line-height: 50px;
font-family: 'Teko', sans-serif;
font-size: 1.2em;
font-weight: 700;
text-shadow: 0px 0px 5.64px rgba(0, 0, 0, 0.004);
background-image: -webkit-linear-gradient(-180deg, #c0ff00 65%, #00ff0c);
/* For Chrome and Safari */
background-image: -moz-linear-gradient(-180deg, #c0ff00 65%, #00ff0c);
/* For old Fx (3.6 to 15) */
background-image: -ms-linear-gradient(-180deg, #c0ff00 65%, #00ff0c);
/* For pre-releases of IE 10*/
background-image: -o-linear-gradient(-180deg, #c0ff00 65%, #00ff0c);
/* For old Opera (11.1 to 12.0) */
background-image: linear-gradient(-180deg, #c0ff00 65%, #00ff0c);
/* Standard syntax; must be last #c0ff00, #00ff0c*/
color: transparent;
-webkit-background-clip: text;
background-clip: text;
text-transform: uppercase;
}
.boss_cont {
height: 120px;
color: white;
background-color: transparent;
background-image: url(https://s3.us-east-2.amazonaws.com/streamlabs-designers/indigo/1530912534steam_boss_frame.png);
background-size: auto 100%;
background-repeat: no-repeat;
background-position: center;
}
.vbi-aligner {
width: 370px;
height: 35px;
margin: 0 auto;
}
.vbi-aligner>#username {
float: left;
}
.vbi-aligner>#user_hp_cont {
float: right;
}
.vbi-health-frame {
position: absolute;
width: 315px;
height: 47px;
left: calc(50% - 157px);
background-image: url(https://s3.us-east-2.amazonaws.com/streamlabs-designers/indigo/1530912558health_bar_frame.png);
background-repeat: no-repeat;
background-size: cover;
background-position: center;
-ms-transform: translateY(15px);
-webkit-transform: translateY(15px);
transform: translateY(15px);
overflow: hidden;
z-index: 1;
}
.vbi-health-magic {
background: transparent;
z-index: 0;
}
.vbi-health-bar {
position: absolute;
top: 1px;
width: 315px;
height: 45px;
background-image: url(https://s3.us-east-2.amazonaws.com/streamlabs-designers/indigo/1530912589health_bar.png);
background-repeat: no-repeat;
background-size: cover;
background-position: 0 0;
-ms-transform: translateX(0);
-webkit-transform: translateX(0);
transform: translateX(0);
-ms-transition: transform .5s ease-in-out;
-webkit-transition: transform .5s ease-in-out;
transition: transform .5s ease-in-out;
-webkit-clip-path: polygon(0 50%, 25px 0, 100% 0, 100% 100%, 25px 100%);
clip-path: polygon(0 50%, 25px 0, 100% 0, 100% 100%, 25px 100%);
}
<!-- All html objects will be wrapped in the #wrap div -->
<div class='boss_cont'>
<div class="vbi-aligner">
<div id='ussername'></div>
<div id='user_hp_cont'>
HP <span id='current_health'>0</span>/<span id='total_health'>0</span>
</div>
</div>
<div class="vbi-health-frame vbi-health-magic">
<div class="vbi-health-bar" id="vbi-health-bar"></div>
</div>
<div class="vbi-health-frame"></div>
<div style="display: none;" class='user_pic_cont'>
<img id='user_pic' src='' \>
</div>
<div id='message'></div>
</div>

Answer 1

It's right there in the custom JS section. Wherever you see the line:
$('#username').text(obj.detail.boss_name);
Change '#username' to whatever you want your boss name to be. It's in there twice.