Código do Dia

Alerta super chat para live no youtube personalizado Multi Cor

Autor: Antonio Marcos 09/07/2023

Nesse alerta as cores mudam de acordo com o valor, além de um design clean.

Como primeira postagem, resolvi trazer um alerta de super chat, para o youtube, que tem um design clean e bonito, mudando as cores de acordo com o valor enviado dos inscritos, mostrando o nome do inscrito e o valor, além de dois ícones apenas para melhorar a visualização e deixar mais bonito.

Mas alguém pode estar se perguntando porque alteraria seu alerta de super-chat, existem vários motivos como, em uma era em que a transmissão de conteúdo ao vivo se tornou extremamente popular, os streamers e criadores de conteúdo estão constantemente buscando maneiras de se destacar e interagir com sua audiência. Uma das maneiras mais eficazes de fazer isso é através do recurso Super Chat do YouTube, que permite aos espectadores enviar mensagens em destaque durante uma transmissão ao vivo, em troca de um apoio financeiro ao criador. No entanto, para aproveitar ao máximo essa ferramenta, é essencial ter um alerta de Super Chat clean, personalizado e bonito.

Primeiramente, um alerta de Super Chat clean é importante porque contribui para a experiência visual da transmissão. Quando um espectador envia um Super Chat, é crucial que o criador seja notificado de forma clara e imediata. Um alerta clean garante que o aviso seja exibido de maneira elegante e profissional, sem poluição visual ou distrações desnecessárias. Isso permite que o criador e sua audiência permaneçam focados no conteúdo principal da live, mantendo uma estética visual agradável e atraente.

Além disso, um alerta personalizado é uma excelente forma de fortalecer a marca do criador e criar uma identidade visual única para suas transmissões. Cada canal do YouTube possui uma personalidade e estilo próprios, e um alerta de Super Chat reflete isso. Ao usar um design diferente, com cores, fontes e elementos visuais alinhados à identidade visual do canal, o criador fortalece a conexão com sua audiência e proporciona uma experiência consistente em todas as interações durante a transmissão.

A estética bonita do alerta de Super Chat também desempenha um papel fundamental na motivação dos espectadores a enviar Super Chats. Ao receber um alerta visualmente agradável, os espectadores se sentem valorizados e reconhecidos pelo criador. Isso cria uma atmosfera de gratidão e incentiva outros espectadores a contribuir financeiramente, para também receberem um reconhecimento especial. Portanto, um alerta bonito e bem projetado pode aumentar a participação dos espectadores no Super Chat, impulsionando o envolvimento e a interação durante a live.

Em resumo, ter um alerta de Super Chat clean, personalizado e bonito para uma live no YouTube é fundamental para proporcionar uma experiência visualmente agradável, fortalecer a identidade do canal, incentivar o envolvimento da audiência e demonstrar a expressão artística do criador. Ao combinar todos esses elementos, os streamers e criadores de conteúdo podem aprimorar significativamente suas transmissões ao vivo, promovendo uma interação mais profunda e duradoura com sua comunidade de espectadores.

Se você curtiu, abaixo mostrarei como adicionar esse estilo de alerta a sua transmissão no youtube, usando o StreamLabs.

No Streamlabs, deixei as opções de Animação do alerta em Fade In e Fade Out respectivamente, e a Duração do alerta em 6s, agora a parte importante, os códigos, marque a opção Permitir HTML/CSS personalizado como Habilitado.

Na parte do html cole o seguinte código:

HTML 
<li>    
<div id="principal" onload="start()">
      <i id="bell">
            <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 448 512"><!--! Font Awesome Pro 6.3.0 by @fontawesome - https://fontawesome.com License - https://fontawesome.com/license (Commercial License) Copyright 2023 Fonticons, Inc. --><path d="M224 0c-17.7 0-32 14.3-32 32V51.2C119 66 64 130.6 64 208v18.8c0 47-17.3 92.4-48.5 127.6l-7.4 8.3c-8.4 9.4-10.4 22.9-5.3 34.4S19.4 416 32 416H416c12.6 0 24-7.4 29.2-18.9s3.1-25-5.3-34.4l-7.4-8.3C401.3 319.2 384 273.9 384 226.8V208c0-77.4-55-142-128-156.8V32c0-17.7-14.3-32-32-32zm45.3 493.3c12-12 18.7-28.3 18.7-45.3H224 160c0 17 6.7 33.3 18.7 45.3s28.3 18.7 45.3 18.7s33.3-6.7 45.3-18.7z"/></svg>
        </i>
        <span>{name} mandou  </span>
      	<span id="getColor">{amount}</span>
      	<i id="yt">
          <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 576 512"><!--! Font Awesome Pro 6.3.0 by @fontawesome - https://fontawesome.com License - https://fontawesome.com/license (Commercial License) Copyright 2023 Fonticons, Inc. --><path d="M549.655 124.083c-6.281-23.65-24.787-42.276-48.284-48.597C458.781 64 288 64 288 64S117.22 64 74.629 75.486c-23.497 6.322-42.003 24.947-48.284 48.597-11.412 42.867-11.412 132.305-11.412 132.305s0 89.438 11.412 132.305c6.281 23.65 24.787 41.5 48.284 47.821C117.22 448 288 448 288 448s170.78 0 213.371-11.486c23.497-6.321 42.003-24.171 48.284-47.821 11.412-42.867 11.412-132.305 11.412-132.305s0-89.438-11.412-132.305zm-317.51 213.508V175.185l142.739 81.205-142.739 81.201z"/></svg>
      </i>
    </div>
 </li>

Na parte do javascript cole o seguinte código:

Javascript 
var principal = document.querySelector('#principal')
var getColor = document.querySelector('#getColor')
var imageYT = document.querySelector('#principal #yt')
var imageBell = document.querySelector('#principal #bell')

start()

function start() {
    let regex = /[0-9]*\.?[0-9][0-9]?/
    let valor = parseFloat(getColor.innerText.match(regex)[0])
    imageYT.classList.add('active')
    imageBell.classList.add('active')
    if (valor >= 1 && valor < 2) {
        principal.style.backgroundColor = '#193EA6'
    }

    if (valor >= 2 && valor < 5) {
        principal.style.backgroundColor = '#009aa5'
    }

    if (valor >= 5 && valor < 10) {
        principal.style.backgroundColor = '#00af86'
    }

    if (valor >= 10 && valor < 20) {
        principal.style.backgroundColor = '#b37700'
    }

    if (valor >= 20 && valor < 50) {
        principal.style.backgroundColor = '#FF7300'
    }

    if (valor >= 50 && valor < 100) {
        principal.style.backgroundColor = '#F20259'
    }

    if (valor >= 100) {
        principal.style.backgroundColor = '#C20F0A'
    }
}

E por fim cole esse código na parte do CSS:

CSS 
@import url('https://fonts.googleapis.com/css2?family=Quicksand:wght@300&display=swap');

li{
    list-style: none;
}

div#principal{
    font-family: 'Quicksand', sans-serif;
    box-sizing: border-box;
    display: flex;
    flex-direction: row;
    align-items: center;
    justify-content: center;
    background-size: 400px;
    background-position: center;
    width: 870px;
    height: 72px;
    color: white;
    padding: 0px 100px;
    font-size: 40px;
}

i{
    position: absolute;
    filter: invert();
    opacity: .4;
}

i#yt{
    top: -2px;
    right: -40px;
    width: 100px;
    height: 100px;
    transform: rotate(10deg);
}

i#bell{
    top: -10px;
    left: -20px;
    width: 60px;
    height: 60px;
    transform: rotate(10deg);
}

i#yt.active{
    top: -10px;
    right: 10px;
    transition: 2s;
}

i#bell.active{
    top: 0px;
    left: 20px;
    transform: rotate(-10deg);
    transition: 2s;
}

Após isso tudo, se configurado corretamente os super-chats aparecerão com esse novo estilo ao seu canal no youtube, lembrando que nesse site ainda virão muito mais posts com esse conteúdo, além de outros designs e alertas, fundos para vídeos e lives, conteúdo para outras plataformas e muito mais.