Sobreposição

Use o Overlay para exibir alertas, chats, metas e outros elementos visuais em sua transmissão. O Overlay permite criar layouts personalizados combinando diferentes camadas, agrupadas em mídia, eventos do Twitch e widgets. Você pode criar múltiplos overlays, tipicamente um por cena em seu software de transmissão — por exemplo, cenas de início, principal e final. Adicione cada overlay como uma fonte de navegador separada e use apenas um overlay por cena para evitar conflitos como sons de alerta duplicados.

Configurações do Overlay:

Media

Text and labels

Para adicionar uma camada de Text & Labels, clique em + e selecione Text & labels. O campo Content é usado para o texto mostrado no overlay. Digite $ para inserir uma variável para conteúdo dinâmico, como um agradecimento a um espectador.

Preferências:

• Hide until something happens — mantém a camada oculta até que um evento desencadeante ocorra.
• Hide when all text variables are empty — oculta a camada sempre que todas as variáveis no texto não tiverem valor.

Image and video

Para adicionar uma camada de Image:

1. Clique em + e selecione Image.
2. Clique em Upload para fazer o upload de uma imagem:
   • Formatos aceitos: GIF, JPEG, PNG.
   • Tamanho máximo: 20 MB.

Para adicionar uma camada de Video:

1. Clique em + e selecione Video.
2. Clique em Upload para fazer o upload de um vídeo:
   • Formatos aceitos: MP4, WEBM, M4V, MOV.
   • Tamanho máximo do arquivo: 20 MB.

Twitch events

Alert

Para adicionar uma camada de Alert, clique em + e selecione Alert.

Tipos de alerta — Follow, Tip, Subscription, Resubscription, Subscription gift, Community gift, Charity donation, Twitch cheer, Twitch raid. Ative ou desative cada tipo e substitua qualquer uma das configurações acima para esse tipo individualmente.

Clique em Default alert settings para configurar as configurações padrão para todos os tipos de alerta. A tabela abaixo descreve cada configuração:

Para posicionar o alerta, arraste-o para qualquer local no overlay. Para testá-lo, use o botão Test para pré-visualizar cada tipo de alerta antes de ir ao ar.

Banner

Para adicionar uma camada de Banner, clique em + e selecione Banner.

Configurações:

• Background image — faça o upload de uma imagem ou selecione uma da galeria embutida.
• Hide banner timing — ative Periodically hide/show this banner, depois defina Hide (seconds) e Then show (seconds) para controlar o ciclo.

Adicione um ou mais banners com Add new; exclua qualquer um com o ícone de lixeira ou clique em um para configurá-lo. A tabela abaixo descreve cada configuração:

O fundo do cabeçalho, a cor de fundo, a transparência e a fonte também são personalizáveis por banner.

Chat

Para adicionar uma camada de Chat, clique em + e selecione Chat.

Configure as seguintes configurações:

• Show avatars — mostra a foto de perfil do espectador ao lado de sua mensagem.
• Show platform icon — mostra o ícone da plataforma ao lado de cada mensagem.
• Show colored line for platform — mostra uma linha colorida que indica o papel do remetente. Cores dos papéis:
  • Streamer (Você)
  • Moderador
  • Assinante
  • Turbo
  • Espectador
• Show message and username on separate lines — exibe o nome de usuário e a mensagem em linhas separadas.
• Reverse direction — controla se novas mensagens aparecem de cima para baixo ou de baixo para cima.
• Duration (seconds) — tempo que uma mensagem permanece na tela.

Events

Para adicionar uma camada de Events, clique em + e selecione Events.

Configure as seguintes configurações:

• Event types — selecione quais tipos de eventos exibir. Tipos disponíveis:
  • Dicas
  • Seguidores
  • Assinantes
  • Reassinantes
  • Doações de Caridade
  • Cheer do Twitch
  • Raid do Twitch
• Number of events — o número máximo de eventos exibidos de uma vez.

Goal

Uma meta rastreia o progresso em direção a um objetivo, como contagem de seguidores, contagem de assinantes ou bits do Twitch. Para adicionar uma camada de Goal, clique em + e selecione Goal, depois clique em Add goal. Configure as seguintes configurações:

Você também pode fazer o upload de uma imagem de fundo ou selecionar uma da galeria.

Trigger

Camadas de gatilho criam comandos de chat que exibem mídia e/ou som na sua transmissão. O acesso pode ser limitado por papel no chat ou custar pontos de fidelidade do seu programa de fidelidade do Partner Network (pontos de canal do Twitch não são usados para isso).

Para adicionar uma camada de Trigger, clique em + e selecione Trigger. Configure o gatilho usando as seguintes configurações:

Widgets

Countdown

Camadas de contagem regressiva exibem uma contagem regressiva ao vivo para o início da sua transmissão, uma revelação de evento ou um sub-a-thon.

Para adicionar uma camada de Countdown, clique em + e selecione Countdown.

Configure as seguintes configurações:

• Title — texto mostrado acima da contagem regressiva (ex.: Começando em breve)
• Target — alvo da contagem regressiva:
  • Pick date and time — conta regressivamente até uma data e hora fixas.
  • Set duration from now — conta regressivamente por uma duração especificada.
• Display format:
  • Dias : Horas : Minutos : Segundos
  • Horas : Minutos : Segundos
  • Minutos : Segundos
  • Segundos
• Show labels under each digit — exibe os rótulos para as unidades de tempo usadas na contagem regressiva.
• Show a custom message when complete — exibe uma mensagem personalizada após o término da contagem regressiva.
• Style — raio da borda.

Now playing

A camada Now playing exibe a música que está tocando atualmente em um player de música conectado ao Last.fm.

Para adicionar uma camada de Now playing:

1. Clique em + e selecione Now playing.
2. Crie uma conta Last.fm se você não tiver uma.
3. Configure um scrobbler do Last.fm — a ferramenta que envia seus dados de música para o Last.fm. Muitos players suportam isso nativamente, outros precisam de software extra ou uma extensão do Chrome para players baseados na web. O Last.fm sincroniza com Spotify, YouTube, Apple Music, Tidal e SoundCloud.
4. Vincule seu player de música à sua conta do Last.fm.

Você também pode fazer o upload de uma imagem de fundo ou selecionar uma da galeria.

Se a música não aparecer no seu overlay, verifique seu perfil do Last.fm para confirmar se seu scrobbler está enviando dados de música para lá. Se a música não aparecer no Last.fm também, o scrobbler em si não está funcionando — verifique a conexão ou extensão do seu player com o Last.fm.

Code

Camadas de código permitem que os desenvolvedores construam suas próprias camadas de overlay com código personalizado. Não há limite para quantas camadas você pode adicionar ao seu overlay.

Para adicionar uma camada de Code, clique em + e selecione Code.

Configure as seguintes configurações:

1. Defina o campo Message — uma variável que seu código pode referenciar (padrão: Hello ${username})
2. Clique em Open editor para editar sua camada usando HTML, CSS, JavaScript ou Blueprint.
3. Clique em Save para aplicar suas alterações.

Adicione seu overlay ao seu software de transmissão

Para adicionar seu overlay ao seu software de transmissão, vá para a aba Overlay no seu painel, copie o URL do seu overlay e adicione-o como uma fonte de navegador/web:

Lightstream

Lightstream Studio usa o mesmo editor de overlay que o Partner Network — todos os tipos de camada disponíveis no editor de Overlay do Partner Network também estão disponíveis diretamente no Lightstream Studio, e qualquer cena que você construir lá é visível no Partner Network. Na maioria dos casos, se você estiver usando o Lightstream Studio, pode construir seu overlay diretamente lá em vez de importar um do Partner Network.

Se você já construiu um overlay separado na conta de criador do Partner Network e deseja trazê-lo para o Lightstream via URL:

1. Vá para a página Overlay.
2. Clique no botão de corrente de URL para copiar o URL do seu overlay.
3. Vá para o Lightstream:

1. 1. Para Fonte de Navegador do Lightstream Studio:
      1. Clique em Adicionar.
      2. Na seção Integrações de terceiros clique em Fonte de navegador.
      3. Escolha Xsolla Partner Network.
      4. Cole seu URL e clique em Verificar URL.

1. 2. Para Fonte de Navegador Clássica do Lightstream:
      1. Clique em Adicionar camada.
      2. Clique:
         • Integrações de terceiros e escolha Xsolla Partner Network.
         • O banner do Partner Network na parte inferior.
      3. Cole seu URL e clique em Verificar URL.

OBS Studio

Para adicionar seu overlay no OBS Studio:

1. Vá para a página Overlay.
2. Clique no botão de corrente URL para copiar o URL do seu overlay.
3. No OBS Studio, clique no sinal de + na seção Sources e selecione Browser.

4. Nomeie a fonte e clique em OK.

5. Cole seu URL de overlay no campo de URL. Em Width & height, combine a resolução com seu overlay (padrão: 1920 x 1080 px).

Transmissão de console

Os consoles Xbox e PlayStation não suportam fontes de navegador, então você não pode adicionar um overlay à sua transmissão diretamente do console. Recomendamos usar o Lightstream:

1. Configure seu console para transmitir para o Lightstream em vez de diretamente para o Twitch.
2. Adicione seu overlay no editor web do Lightstream. O Lightstream envia a transmissão combinada para o Twitch, então você só precisa de um dispositivo com um navegador web.

Alternativamente, transmita de um PC usando uma placa de captura e software de transmissão.

Mesmo sem um overlay configurado, dicas e notificações no chat ainda funcionarão se ativadas.