Quote from Mrr Zed0 on March 8, 2025, 3:23 am

Requirements:

• StreamElements Account
• OBS Studio
• StreamLabs

 

Add ’Twitch Shoutout Alert !so’ Onto StreamElements

 

StreamElements:

https://streamelements.com/dashboard/overlays/share/65b9834dab1fab2d44a4438f

 

_______________________

StreamElements Editor:

HTML:

<div class=”main-container”>

  <div class=”balloon-container”>

    <div class=”hearts”>

      <div class=”heart big”>♥</div>

      <div class=”heart small”>♥</div>

    </div>

    <div class=”balloon”>

      <div class=”complete”>

        <svg id=”balloonBG” class=”balloonBG” data-name=”balloonBG” xmlns=”http://www.w3.org/2000/svg” viewBox=”0 0 2168.29 2641.29″><path d=”M2168,761.93c-2.8-434.28-322.6-756.88-755-760.14-225.22-1.7-450.49-2.3-675.68.5C326.87,7.39,5.36,331.21,1.65,742.47q-3.09,341.16,0,682.37c3.93,413.23,329.65,736.79,742.91,739.62,159.1,1.09,318.36,4.35,477.26-1.53,80-3,142.53,23.34,205.54,67.27,189.71,132.28,377.48,267.69,575.77,387.12,87.57,52.75,156,14.74,156.26-87.86l8.73-1364.31c0-134.4.73-268.82-.14-403.22m-352.68,493.32c-130.18,129.67,155.11-154.49,0,0″/></svg>

        <div class=”s2-container”>

          <svg id=”so” class=”logo” data-name=”so” xmlns=”http://www.w3.org/2000/svg” viewBox=”0 0 3677.32 2802.25″><path d=”M3547.39,488.81C3364.93,156.17,3057.66-4.08,2689,4.25c-257,5.79-482.27,133.27-666.36,324-182.44,189-187.09,187-376.73,1.13C1438.09,125.63,1193-21.68,900.8,2.63,356.92,47.88-3.91,458.67,0,945c-.41,248.1,89.28,483.79,255.87,652q460.17,462.59,922.17,923.25c188.72,188.17,432.1,291.49,683.17,281.3,249.85-10.18,484-126.06,669.46-318.35,274.1-284.17,556.11-560.73,835.88-839.39v0C3699.89,1311.81,3773,900,3547.39,488.81Zm-2272,628.52a60.66,60.66,0,0,1-60.67,60.66H1063.64v151.08a60.64,60.64,0,0,1-60.65,60.65H852.07a60.66,60.66,0,0,1-60.67-60.65V1178H630.24a60.66,60.66,0,0,1-60.66-60.66V966.41h0a60.66,60.66,0,0,1,60.66-60.66H791.4V744.59a60.67,60.67,0,0,1,60.67-60.65H1003a60.66,60.66,0,0,1,60.65,60.65V905.75h151.08a60.66,60.66,0,0,1,60.67,60.66Zm1260.36-75.44a146.21,146.21,0,1,1-146.2-146.22h0a146.21,146.21,0,0,1,146.2,146.21Zm312.57,342.82a146.21,146.21,0,1,1-146.2-146.22h0a146.19,146.19,0,0,1,146.18,146.2Zm0-685.65a146.2,146.2,0,1,1-146.2-146.2h0a146.19,146.19,0,0,1,146.18,146.2Zm312.56,342.83a146.21,146.21,0,1,1-146.2-146.22h0a146.21,146.21,0,0,1,146.2,146.21Z”/></svg>

        </div>

      </div>

      <div class=”infos”>

          <span class=”conheca”>Co<br>nhe<br>ça</span>

          <span class=”jogando”>Jo<br>gan<br>do</span>

          <span class=”twitch”>twitch.tv/</span>

      </div>

    </div>

    <div class=”infos”>

      <span class=”username”>UserName</span>

      <span class=”jogo”>MyGame</span>

    </div>

    <div class=”avatar-container”>

      <div class=”profile”>

        <img src=”https://cdn.streamelements.com/static/user/avatar_default.png”>

      </div>

    </div>

  </div>

</div>

 

CSS:

@import url(‘https://fonts.googleapis.com/css2?family=Baloo+Chettan+2:wght@800&display=swap’);

.main-container {

  width: 100%;

  height: 100%;

  position: relative;

}

.balloon-container {

  width: 560px;

  height: 684px;

  position: absolute;

  left: 0;

  right: 0;

  bottom: 0;

  top: 0;

  margin: auto;

  font-family: ‘Baloo Chettan 2’, cursive;

}

.s2-container {

  position: absolute;

  left: 0;

  top: 0;

  width: 100%;

  height: 100%;

}

.balloon-container.reverse {

  transform: scaleX(-1);

}

.balloon-container.reverse.s2-container,

.balloon-container.reverse.hearts,

.balloon-container.reverse.infos,

.balloon-container.reverse .avatar-container {

  transform: scaleX(-1);

}

.balloon-container .complete {

  transform: scale(0);

  opacity: 0;

}

.balloon-container .hearts {

  position: absolute;

  color: #A750F9;

  font-size: 62px;

  display: block;

  width: 74px;

  height: 162px;

  font-family: sans-serif;

  top: 0;

  right: -34px;

}

.balloon-container.reverse .hearts {

  right: auto;

  left: -34px;

}

.balloon-container .hearts .heart {

  position: absolute;

  -webkit-transform: scale(0);

  -ms-transform: scale(0);

  transform: scale(0);

}

.balloon-container .hearts .big {

  top: 0;

  left: 0;

}

.balloon-container .hearts .small {

  bottom: 0px;

  right: 40px;

  font-size: 0.6em;

}

.balloon-container .balloon {

  position: absolute;

  left: 0;

  right: 0;

  z-index: 0;

  -webkit-transform-origin: 100% 0;

  -ms-transform-origin: 100% 0;

  transform-origin: 100% 0;

  width: 100%;

  height: 100%;

}

.balloon-container .balloon path {

  fill: #A750F9;

}

.balloon-container .logo {

  opacity: 1;

  position: absolute;

  z-index: 2;

  -webkit-transform-origin: 50% 50%;

  -ms-transform-origin: 50% 50%;

  transform-origin: 50% 50%;

  -webkit-animation-fill-mode: both;

  animation-fill-mode: both;

  width: 460px;

  top: 0;

  bottom: 124px;

  left: 0;

  right: 0;

  margin: auto;

  display: block;

}

.balloon-container::before {

  content: ”;

  position: absolute;

  right: 0;

  bottom: 0;

}

.balloon-container .infos {

  position: absolute;

  z-index: 1;

  width: 560px;

  height: 560px;

  left: 60px;

  top: 60px;

}

.balloon-container.reverse .infos {

  left: auto;

  right: 50px

}

.balloon-container .infos span {

  display: block;

  line-height: 0.9;

}

.balloon-container .infos span.conheca, .balloon-container .infos span.jogando {

  color: #1ED3D1;

  font-size: 110px;

  font-weight: 900;

  text-transform: uppercase;

  margin-bottom: 26px;

  letter-spacing: -0.075em;

  line-height: 0.75;

  opacity: 0;

  position: absolute;

  top: 0;

  left: 0;

}

.balloon-container .infos span.jogando {

  top: 38px;

}

.balloon-container .infos span.twitch {

  color: #fff;

  font-size: 48px;

  font-weight: bold;

  left: 0;

  text-transform: uppercase;

  opacity: 0;

  bottom: 204px;

  position: absolute;

}

.balloon-container .infos span.username, .balloon-container .infos span.jogo {

  position: absolute;

  background-color: #1ED3D1;

  color: #fff;

  font-weight: bold;

  font-size: 48px;

  width: 632px;

  text-align: center;

  left: -92px;

  right: 0;

  bottom: 118px;

  line-height: 60px;

  padding-bottom: 6px;

  opacity: 0;

  -webkit-transform: scale(0);

  -ms-transform: scale(0);

  transform: scale(0);

}

.balloon-container .infos span.username.show, .balloon-container .infos span.jogo.show {

  opacity: 1;

  -webkit-animation: 0.5s bounceInProfile;

  animation: 0.5s bounceInProfile;

}

.balloon-container .profile {

  position: absolute;

  right: -96px;

  top: -60px;

  width: 370px;

  height: 370px;

  z-index: 2;

  border-radius: 100%;

  overflow: hidden;

  border: 16px solid #1ED3D1;

  opacity: 0;

  -webkit-transform: scale(0);

  -ms-transform: scale(0);

  transform: scale(0);

  background-color: #A750F9;

  -webkit-box-shadow: inset 0 0 0 370px rgba(0, 0, 0, 0.45), 0 0.5rem 1rem rgba(0, 0, 0, 0.15);

  box-shadow: inset 0 0 0 370px rgba(0, 0, 0, 0.45), 0 0.5rem 1rem rgba(0, 0, 0, 0.15);

}

.balloon-container .profile.sombra {

  -webkit-box-shadow: 0 0px 16px 4px rgba(0, 0, 0, 0.35);

  box-shadow: 0 0px 16px 4px rgba(0, 0, 0, 0.35);

  mix-blend-mode: overlay;

}

.balloon-container .profile img {

  width: 100%;

  height: 100%;

  -o-object-fit: cover;

  object-fit: cover;

  -o-object-position: center;

  object-position: center;

}

.balloon-container .hearts {color: {{hearts}}!important}

.balloon-container .balloon .logo path {fill: {{heartLogo}} !important;}

.balloon-container .balloon .balloonBG path {fill: {{balloonConheca}} !important;}

.balloon-container .balloon.phase2 .balloonBG path {fill: {{balloonJogando}} !important;}

.balloon-container .infos span.conheca {color: {{conheca}} !important;}

.balloon-container .infos span.jogando {color: {{jogando}} !important;}

.balloon-container .infos span.twitch {color: {{twitchtv}} !important;}

.balloon-container .infos span.username {

    background-color: {{blockUsername}} !important;

    color: {{username}} !important;

}

.balloon-container .infos span.jogo {

    background-color: {{blockJogando}} !important;

    color: {{jogo}} !important;

}

.balloon-container .profile {

    border: 16px solid {{bordaAvatar}} !important;

    background-color: {{fundoAvatar}} !important;

}

 

JS:

// Import GreenSocks Library

$.getScript(‘https://cdnjs.cloudflare.com/ajax/libs/gsap/3.5.1/gsap.min.js’);

// Global Variables

let $fieldData,

    $currentUser,

    $lastUsernameShouted,

    $timeLine,

    $queue       = []       // Array for the queue list

    $isRunning   = false,   // Var to check if overlay is running for the callback

    $audio1      = false,   // Audio when the overlay show

    $audio2      = false,   // Audio when the first page show

    $audio3      = false,   // Audio when the second page show

    $onRaid      = false,   // Var to check if is to execute on Raid Received

    $onRaidDelay = 10;      // Var to add the username in the query after the raid received

// Translations

const $translations = {

    ‘pt-br’: {

        conheca: “Co<br>nhe<br>ça”,

        jogando: “Jo<br>gan<br>do”,

    },

    ‘en-us’: {

        conheca: “Fea<br>tur<br>ing”,

        jogando: “Str<br>eam<br>ing”,

    }

}

// onWidgetLoad

window.addEventListener(‘onWidgetLoad’, function (obj) {

    $fieldData   = obj.detail.fieldData;

    $currentUser = obj.detail.channel.username;

    // Set the language

    let language = $fieldData.language || ‘pt-br’;

    $(“.balloon-container .infos .conheca”).html($translations[language].conheca);

    $(“.balloon-container .infos .jogando”).html($translations[language].jogando);

    $onRaid       = $fieldData.raidTrigger || false;

    $onRaidDelay  = $fieldData.raidInterval || 10;

    // Set audios and audios volume (volume)

    if ($fieldData.soundAlert) {

      $audio1        = new Audio();

      $audio1.src    = $fieldData.soundAlert;

      $audio1.volume = $fieldData.soundVolume / 100;

    }

    if ($fieldData.soundAlert2) {

      $audio2        = new Audio();

      $audio2.src    = $fieldData.soundAlert2;

      $audio2.volume = $fieldData.soundVolume / 100;

    }

    if ($fieldData.soundAlert3) {

      $audio3        = new Audio();

      $audio3.src    = $fieldData.soundAlert3;

      $audio3.volume = $fieldData.soundVolume / 100;

    }

});

// onEventReceived

window.addEventListener(‘onEventReceived’, function (obj) {

    // If there is no event, do nothing.

    if (!obj.detail.event) {return;}

    // The event

    const listener = obj.detail.listener;

    const event    = obj.detail.event;

    // If we want to test the overlay, emulate it with the current user (aka YOU);

    if (listener === ‘event:test’) {

        // If the field and value are from our fields.

        if (event.field === ’emulateShoutout’ && event.value === ’emulate’) {

            // Add YOU to the query and RUN the overlay

            $queue.push($currentUser);

            run();

        }

    }

    // If it’s a chat message

    if (listener === ‘message’) {

        // Make a array with every word and check

        const message = event.data.text.split(‘ ‘);

        if (message.length > 1) {

            // Array of permissions that are allowed to trigger the widget

            let permConfig = [“broadcaster”];

            if ($fieldData.permNormal === true) {permConfig.push(“”);}

            if ($fieldData.permVip === true) {permConfig.push(“vip”);}

            if ($fieldData.permMod === true) {permConfig.push(“moderator”);}

            // get permissions

            const permissions = event.data.tags.badges.replace(/,/g, ”).replace(/\d+/g, ”).split(‘/’);

            // get username

            const username = message[1].replace(‘@’, ”).trim().toLowerCase();

            // get the trigger

            const trigger = message[0].toLowerCase();

            // check if the user who sent the message can trigger the overlay

            const canTrigger = permConfig.some(r => permissions.indexOf(r) >= 0)

            // if the trigger word (message[0]) is the trigger, user can trigger and the username wasn’t the last username shouted in the last 3.5s

            if (trigger == ‘!so’  && canTrigger && ($lastUsernameShouted != username)) {

                // set last username shouted to be the actual user

                $lastUsernameShouted = username;

                // set a timeout to set last user shouted be false so we can repeat him/her later

                setTimeout(() => {$lastUsernameShouted = false}, 3000);

                // Add the USER to the query and RUN the overlay

                $queue.push(username);

                run();

            }

        }

    }

    if (listener === ‘raid-latest’ && $onRaid) {

      setTimeout( () => {

        $queue.push(event.name);

        run();

      },$onRaidDelay * 1000);

    }

});

// Ajax calls and query management, this acts as callback for animate too.

function run() {

    let avatar,

        game,

        name;

    // Check if the animation is not running and if there is queued users.

    // It is necessary to not overlap any running animation and remove anyone queued without being featured.

    if ($isRunning == false && $queue.length > 0) {

        $isRunning = true;

        // Urls to fetch information about the user, thanks decapi and streamelements <3

        const urls = [

            ‘https://decapi.me/twitch/avatar/’ + $queue[0],

            ‘https://decapi.me/twitch/game/’ + $queue[0]

        ];

        // Make a promisse with the urls and get the infos from the responses

        Promise.all(urls.map(u => fetch(u)))

            .then(responses => Promise.all(responses.map(res => res.text())))

            .then(responses => {

                avatar = responses[0];

                game   = responses[1];

                name   = $queue[0];

                // Make the animation run

                animate(name, game, avatar);

            });

    }

}

// Animation timeline and elements manipulation

function animate(name, game, avatar) {

    if ($fieldData.invert) {

       $(‘.balloon-container’).addClass(‘reverse’);

    } else {

       $(‘.balloon-container’).removeClass(‘reverse’);

    }

    setTimeout(function () {

        // If something strange happen or this function is called with an animation being displayed (maybe a bug?), stop it (that is why $timeline is a global variable)

        if ($timeLine) {$timeLine.pause()};

        // Create a new timeline

        $timeLine = gsap.timeline();

        // Reset everything to initial state

        $(‘.balloon-container *’).removeAttr(‘style’);

        // By an unknown reason, i need to add to main-container its own html to unbug the opening animation… its crazy but it’s work.

        $(‘.main-container’).html($(‘.main-container’).html());

        // Manipulate the elements bellow to show user data

        $(‘.username’).text(name);

        $(‘.jogo’).text(game);

        $(‘.profile img’).attr(‘src’, avatar);

        // Play the sound if is set

        if ($audio1) {$audio1.play()};

        // Play the animation, don’t ask me details, just google “greensocks timeline”

        $timeLine.to(‘.balloon-container .complete’, {

            scale: 1.3,

            opacity: 1,

            ease: Bounce.linear,

            duration: 0.3

        }).to(‘.balloon-container .heart’, {

            rotate: 45,

            scale: 0,

            x: 0,

            y: -0,

            duration: 0

        }, “<“).to(‘.balloon-container .heart’, {

            rotate: 45,

            scale: 2,

            x: 45,

            y: -45,

            duration: 0.2

        }, “>”).to(‘.balloon-container .heart’, {

            rotate: 45,

            scale: 0,

            x: 90,

            y: -90,

            duration: 0.2

        }, “<0.1”).to(‘.balloon-container .complete’, {

            scale: 0.8,

            ease: Bounce.linear,

            duration: 0.2

        }, “>-0.1”).to(‘.balloon-container .complete’, {

            scale: 1.2,

            ease: Bounce.linear,

            duration: 0.2

        }).to(‘.balloon-container .complete’, {

            scale: 0.95,

            ease: Bounce.linear,

            duration: 0.2

        }).to(‘.balloon-container .complete’, {

            scale: 1,

            ease: Bounce.linear,

            duration: 0.2

        }, “<“).to(‘.balloon-container .complete’, {

            scale: 1,

            ease: Bounce.linear,

            duration: 0.2

        }).to(‘.balloon-container .complete’, {

            scale: 1,

            ease: Bounce.linear,

            duration: 0.2

        }).to(‘.balloon-container .logo’, {

            scale: 1.1,

            duration: 0

        }, “>”).to(‘.balloon-container .logo’, {

            scale: 1,

            ease: Elastic.Linear,

            repeat: 1,

            duration: 0.3

        }).to(‘.balloon-container .balloon’, {

            scaleX: 0.01,

            opacity: 0.1,

            ease: Bounce.EaseOut,

            duration: 0.35,

            delay: 1

        }, “>”).to(‘.balloon-container .logo’, {

            opacity: 0,

            duration: 0

        })

        .call(function () {

            $(‘.balloon-container .balloon’).addClass(“phase2”);

            if ($audio2) {$audio2.play()};

        }, null, null, 2)

          .to(‘.balloon-container .balloon’, {

            scaleX: 1,

            opacity: 1,

            ease: Bounce.EaseIn,

            duration: 0.35

        }, “<“).to(‘.balloon-container .conheca’, {

            opacity: 1,

            ease: Bounce.EaseOut,

            duration: 0

        }, “<“).to(‘.balloon-container .profile’, {

            scale: 1.3,

            opacity: 1,

            ease: Bounce.linear,

            duration: 0.4

        }, “<“).to(‘.balloon-container .profile’, {

            scale: 1,

            ease: Bounce.linear,

            duration: 0.2

        }).to(‘.balloon-container .twitch’, {

            opacity: 1,

            duration: 0.2

        }).to(‘.balloon-container .username’, {

            scale: 1.3,

            opacity: 1,

            ease: Bounce.linear,

            duration: 0.2

        }, “<“).to(‘.balloon-container .username’, {

            scale: 1,

            ease: Bounce.linear,

            duration: 0.2

        }).to(‘.balloon-container .username’, {

            scale: 1.1,

            duration: 0,

            delay: 4

        }, “>”).to(‘.balloon-container .username’, {

            scale: 1,

            ease: Elastic.EaseInOut,

            repeat: 1,

            duration: 0.3

        }).to(‘.balloon-container .username’, {

            scale: 1.2,

            ease: Bounce.EaseIn,

            duration: 0.2

        }, “<“).to(‘.balloon-container .username’, {

            scale: 0,

            opacity: 0,

            ease: Bounce.EaseOut,

            duration: 0.5

        }, “<0.2”).to(‘.balloon-container .balloon’, {

            scaleX: 0.05,

            opacity: 0.1,

            ease: Bounce.EaseOut,

            duration: 0.35

        }, “<0.2”).to(‘.balloon-container .username’, {

            scale: 0,

            opacity: 0,

            duration: 0

        }).to(‘.balloon-container .twitch’, {

            opacity: 0,

            duration: 0

        }, “<“).to(‘.balloon-container .conheca’, {

            opacity: 0,

            duration: 0

        }, “<“)

          .call(function () {

            $(‘.balloon-container .balloon’).addClass(“phase2”);

            if ($audio3) {$audio3.play()};

        }, null, null, 2)

          .to(‘.balloon-container .balloon’, {

            scaleX: 1,

            opacity: 1,

            ease: Bounce.EaseIn,

            duration: 0.35

        }, “<“).to(‘.balloon-container .jogando’, {

            opacity: 1,

            ease: Bounce.EaseOut,

            duration: 0

        }, “<“).to(‘.balloon-container .jogo’, {

            scale: 1.3,

            opacity: 1,

            ease: Bounce.linear,

            duration: 0.2

        }).to(‘.balloon-container .jogo’, {

            scale: 1,

            ease: Bounce.linear,

            duration: 0.2

        }).to(‘.balloon-container .jogo’, {

            scale: 1.1,

            duration: 0,

            delay: 4

        }, “>”).to(‘.balloon-container .jogo’, {

            scale: 1,

            ease: Elastic.EaseInOut,

            repeat: 1,

            duration: 0.3

        }).to(‘.balloon-container .jogo’, {

            scale: 1.2,

            ease: Bounce.EaseIn,

            duration: 0.2

        }, “<“).to(‘.balloon-container .jogo’, {

            scale: 0,

            opacity: 0,

            ease: Bounce.EaseOut,

            duration: 0.5

        }, “<0.2”).to(‘.balloon-container .profile’, {

            scale: 1.2,

            ease: Bounce.EaseIn,

            duration: 0.2

        }, “<“).to(‘.balloon-container .profile’, {

            scale: 0,

            opacity: 0,

            ease: Bounce.EaseOut,

            duration: 0.5

        }, “<0.2”).to(‘.balloon-container .balloon’, {

            scaleX: 0,

            opacity: 0,

            ease: Bounce.EaseOut,

            duration: 0.35

        }, “<“).to(‘.balloon-container .jogando’, {

            opacity: 0,

            ease: Bounce.linear,

            duration: 0,

            onComplete: function () {

                $(‘.balloon-container *’).removeAttr(‘style’);

                $(‘.balloon’).removeClass(‘phase2’);

                // Set isRunning False;   Call CallBack to see if there is more to execute

                $isRunning = false;

                // Remove the user from the queue list;

                $queue.shift();

                // Call run to see if there is queued users

                run();

            }

        });

    }, 1500);

}

 

FIELDS:

{

  “emulateShoutout”: {

    “type”: “button”,

    “label”: “Testar”,

    “group”: “Configurações”,

    “value”: “emulate”

  },

  “invert”: {

    “type”: “checkbox”,

    “label”: “Inverter Balão”,

    “group”: “Configurações”,

    “value”: false

  },

  “language”: {

    “type”: “dropdown”,

    “group”: “Configurações”,

    “label”: “Language”,

    “value”: “pt-br”,

    “options”: {

      “pt-br”: “Português (BR)”,

      “en-us”: “English (US)”

    }

  },

  “permMod”: {

    “type”: “checkbox”,

    “label”: “Moderador”,

    “group”: “Permissões”,

    “value”: true

  },

  “permVip”: {

    “type”: “checkbox”,

    “label”: “Vip”,

    “group”: “Permissões”,

    “value”: false

  },

  “permNormal”: {

    “type”: “checkbox”,

    “label”: “Usuário Comum”,

    “group”: “Permissões”,

    “value”: false

  },

  “soundAlert”: {

    “type”: “sound-input”,

    “group”: “Efeitos Sonoros”,

    “label”: “Ao Exibir”

  },

  “soundAlert2”: {

    “type”: “sound-input”,

    “group”: “Efeitos Sonoros”,

    “label”: “Em Conheça”

  },

  “soundAlert3”: {

    “type”: “sound-input”,

    “group”: “Efeitos Sonoros”,

    “label”: “Em Jogando”

  },

  “soundVolume”: {

    “type”: “slider”,

    “group”: “Efeitos Sonoros”,

    “label”: “Volume”,

    “value”: 100,

    “min”: 0,

    “max”: 100,

    “step”: 1

  },

  “bordaAvatar”: {

    “type”: “colorpicker”,

    “label”: “Avatar: Borda”,

    “group”: “Cores dos Elementos”,

    “value”: “#1ED3D1”

  },

  “fundoAvatar”: {

    “type”: “colorpicker”,

    “label”: “Avatar: Cor de Fundo”,

    “group”: “Cores dos Elementos”,

    “value”: “#5c2c89”

  },

  “hearts”: {

    “type”: “colorpicker”,

    “label”: “Corações”,

    “group”: “Cores dos Elementos”,

    “value”: “#A750F9”

  },

  “heartLogo”: {

    “type”: “colorpicker”,

    “label”: “Cor do Logo”,

    “group”: “Cores dos Elementos”,

    “value”: “#FFFFFF”

  },

  “balloonConheca”: {

    “type”: “colorpicker”,

    “label”: “Balão: Logo & Conheça”,

    “group”: “Cores dos Elementos”,

    “value”: “#A750F9”

  },

  “blockUsername”: {

    “type”: “colorpicker”,

    “label”: “Fundo do Nome do Streamer”,

    “group”: “Cores dos Elementos”,

    “value”: “#1ED3D1”

  },

  “balloonJogando”: {

    “type”: “colorpicker”,

    “label”: “Balão: Jogando”,

    “group”: “Cores dos Elementos”,

    “value”: “#A750F9”

  },

  “blockJogando”: {

    “type”: “colorpicker”,

    “label”: “Fundo do nome do Jogo”,

    “group”: “Cores dos Elementos”,

    “value”: “#1ED3D1”

  },

  “conheca”: {

    “type”: “colorpicker”,

    “label”: “Conheça”,

    “group”: “Cores dos Textos”,

    “value”: “#1ED3D1”

  },

  “twitchtv”: {

    “type”: “colorpicker”,

    “label”: “Twitch.tv”,

    “group”: “Cores dos Textos”,

    “value”: “#FFFFFF”

  },

  “username”: {

    “type”: “colorpicker”,

    “label”: “Nome do Streamer”,

    “group”: “Cores dos Textos”,

    “value”: “#FFFFFF”

  },

  “jogando”: {

    “type”: “colorpicker”,

    “label”: “Jogando”,

    “group”: “Cores dos Textos”,

    “value”: “#1ED3D1”

  },

  “jogo”: {

    “type”: “colorpicker”,

    “label”: “Nome do Jogo”,

    “group”: “Cores dos Textos”,

    “value”: “#FFFFFF”

  },

  “raidTrigger”: {

    “type”: “checkbox”,

    “label”: “Executar ao receber raid”,

    “group”: “onRaid”,

    “value”: false

  },

  “raidInterval”: {

    “type”: “number”,

    “label”: “Delay (segundos)”,

    “group”: “onRaid”,

    “value”: 10,

    “min”: 0,

    “max”: 60,

    “step”: 1

  },

  “widgetName”: {

    “type”: “hidden”,

    “group”: “Configurações”,

    “value”: “!s2 Streamando”

  },

  “widgetAuthor”: {

    “type”: “hidden”,

    “group”: “Configurações”,

    “value”: “NissoJR & Nyokeon (Streamando)”

  }

}

 

DATA:

{

  “emularChat”: “emular”,

  “permMod”: true,

  “permVip”: 0,

  “permNormal”: 0,

  “bordaAvatar”: “#F7941D”,

  “fundoAvatar”: “#BE1E2D”,

  “hearts”: “#F15A29”,

  “heartLogo”: “#FFFFFF”,

  “balloonConheca”: “#F15A29”,

  “blockUsername”: “#F7941D”,

  “balloonJogando”: “#F15A29”,

  “blockJogando”: “#F7941D”,

  “conheca”: “#F7941D”,

  “twitchtv”: “#FFFFFF”,

  “username”: “#FFFFFF”,

  “jogando”: “#F7941D”,

  “jogo”: “#FFFFFF”,

  “widgetName”: “!s2 ShoutOut”,

  “widgetAuthor”: “Nyokeon”,

  “emulation”: “emular”,

  “soundVolume”: 100,

  “language”: “en-us”,

  “emulateShoutout”: “emulate”,

  “soundAlert”: null,

  “soundAlert2”: null,

  “soundAlert3”: null,

  “raidTrigger”: false,

  “raidInterval”: 10,

  “invert”: false

}