title: streamlabs streamboss Name change
body: <p>Let me start by saying thank you in advance!</p>
  
  <p>I'm on this site called StreamLabs for twitch streamers and they've introduced a way to use custom HTML, CSS, &amp; JS to customize your look.</p>
  
  <p>They have a thing called "Stream boss" that reacts to users following, sub, and/or donating.</p>
  
  <p>I don't know how to change the name of the streamboss can someone help me with that </p>
  
  <pre><code>/*
   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);
  });
  </code></pre>
  
  <pre class="lang-css prettyprint-override"><code>@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&gt;#username {
    float: left;
  }
  
  .vbi-aligner&gt;#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%);
  }
  </code></pre>
  
  <pre class="lang-html prettyprint-override"><code>&lt;!-- All html objects will be wrapped in the #wrap div --&gt;
  &lt;div class='boss_cont'&gt;
  
    &lt;div class="vbi-aligner"&gt;
  
      &lt;div id='ussername'&gt;&lt;/div&gt;
      &lt;div id='user_hp_cont'&gt;
        HP&amp;nbsp;&lt;span id='current_health'&gt;0&lt;/span&gt;/&lt;span id='total_health'&gt;0&lt;/span&gt;
      &lt;/div&gt;
    &lt;/div&gt;
  
    &lt;div class="vbi-health-frame vbi-health-magic"&gt;
      &lt;div class="vbi-health-bar" id="vbi-health-bar"&gt;&lt;/div&gt;
    &lt;/div&gt;
  
    &lt;div class="vbi-health-frame"&gt;&lt;/div&gt;
  
    &lt;div style="display: none;" class='user_pic_cont'&gt;
      &lt;img id='user_pic' src='' \&gt;
    &lt;/div&gt;
  
    &lt;div id='message'&gt;&lt;/div&gt;
  
  &lt;/div&gt;
  </code></pre>