# Adicione um overlay do KickBot ao OBS

> Adicione qualquer overlay do KickBot (chat, alertas ou TTS) ao OBS Studio, Streamlabs Desktop ou Meld Studio como browser source, com tamanho, áudio e soluções.

Source: https://kickbot.com/pt/docs/getting-started/add-browser-source-obs

Todo overlay do KickBot é um link da web. Para mostrar o overlay na sua live da Kick, copie o link no painel do KickBot e adicione ao seu software de streaming como **browser source** (fonte de navegador). Funciona do mesmo jeito para overlay de chat, alertas, TTS, alertas de gorjeta e imagens com IA, no OBS Studio, no Streamlabs Desktop, no Meld Studio e em outros apps que aceitam browser source. Não precisa instalar nada.

## Encontre o link do overlay

Cada recurso tem o seu próprio link. Copie o link na página indicada abaixo.

| Overlay | Onde copiar o link | Mais ajuda |
|---|---|---|
| Overlay de chat, alertas, contadores e outros widgets | **Widgets** > **Widgets salvos**, depois de instalar um widget da Biblioteca de widgets | [Biblioteca de widgets](https://kickbot.com/pt/docs/widgets/widget-library), [overlay de chat](https://kickbot.com/pt/docs/widgets/chat-overlay) |
| Texto para fala | **TTS** > **Configurações**, **Browser source para o OBS** | [Configurar o TTS](https://kickbot.com/pt/docs/tts/set-up-tts) |
| Alertas de gorjeta | **Gorjetas** > **Widget** | [Alertas de gorjeta](https://kickbot.com/pt/docs/tipping/tip-alerts) |
| Imagens com IA | **Chat Bot** > **Imagens com IA**, **Widget** | [Imagens com IA](https://kickbot.com/pt/docs/ai/ai-images) |

> **Caution:** Não compartilhe os links dos overlays. Qualquer pessoa que tenha o link consegue usar o overlay. Não cole o link no chat nem mostre na live.

## Escolha o tamanho

Um widget da Biblioteca de widgets mostra o tamanho dele em **Tamanho na live**, por exemplo 800 × 600 px. Use essa largura e essa altura no browser source. O mesmo tamanho aparece no widget em **Widgets salvos**.

![O card Sobre este widget na Biblioteca de widgets, com Tamanho na live de 800 por 600 px](https://kickbot.com/docs/images/getting-started/add-browser-source-obs/01-size-on-stream.webp "Use os valores de Tamanho na live como largura e altura do browser source.")

Se a página não mostra um tamanho, coloque o browser source no tamanho da sua tela (canvas), por exemplo 1920 × 1080. Depois mova ou redimensione a fonte na cena. A maioria dos overlays tem fundo transparente, então só o conteúdo aparece na live.

## OBS Studio

1. Na caixa **Fontes** (*Sources*) da sua cena, clique em **+** e escolha **Navegador** (*Browser*).
2. Digite um nome, por exemplo "Chat do KickBot", e confirme.
3. Na janela de propriedades, cole o link do overlay em **URL**.
4. Coloque em **Largura** (*Width*) e **Altura** (*Height*) o tamanho do overlay.
5. Para overlays com som (TTS, alertas, alertas de gorjeta), ative **Controlar áudio via OBS** (*Control audio via OBS*). A fonte passa a aparecer no **Mixer de áudio** (*Audio Mixer*), onde você pode mudar o volume dela.
6. Clique em **OK**. Arraste a fonte para onde quiser na tela.

Outras opções do browser source no OBS:

- **Desligar fonte quando não visível** (*Shutdown source when not visible*): descarrega o overlay quando a cena dele não está no ar. Deixe desativado para alertas e TTS, para não perder nada enquanto você está em outra cena.
- **Atualizar navegador quando a cena se tornar ativa** (*Refresh browser when scene becomes active*): recarrega o overlay toda vez que você troca para a cena. Uma mensagem que está tocando para quando o overlay recarrega.
- **Atualizar cache da página atual** (*Refresh cache of current page*): um botão que recarrega o overlay na hora. Use depois de mudar configurações no KickBot ou quando o overlay não aparecer direito.

O OBS explica cada opção no [guia do Browser Source](https://obsproject.com/kb/browser-source) (em inglês).

> **Bom saber:** Para usar os mesmos overlays em várias cenas, coloque todos em uma cena só, por exemplo "Overlays do KickBot". Depois adicione essa cena como fonte nas outras cenas. Assim você adiciona cada link uma vez só.

## Streamlabs Desktop

1. Na visualização do estúdio, clique em **+** ao lado de **Fontes** (*Sources*).
2. Escolha **Fonte de navegador** (*Browser Source*), digite um nome e clique em **Adicionar fonte** (*Add Source*).
3. Nas configurações da fonte, cole o link do overlay no campo de URL e defina a largura e a altura.
4. Feche as configurações e coloque a fonte no lugar.

O Streamlabs Desktop tem as mesmas opções **Desligar fonte quando não visível** e **Atualizar navegador quando a cena se tornar ativa** do OBS. Veja o artigo do Streamlabs sobre [browser sources](https://streamlabs.com/content-hub/post/introducing-browser-source-interaction-for-streamlabs-desktop) (em inglês). Se você não ouve um overlay, confira se ele não está mudo no mixer de áudio.

## Meld Studio

1. No painel **Layers** (camadas), clique em **+** e escolha **Browser** (navegador).
2. Cole o link do overlay no campo **URL** do **Inspector** (inspetor).
3. Redimensione a camada na tela, ou defina W e H (largura e altura) no Inspector.
4. Para overlays com som, ative **Add an audio track for the source** (adicionar uma faixa de áudio para a fonte), abaixo do campo URL. O Meld não adiciona uma faixa de áudio sozinho para camadas de navegador.

Você também pode colar um link direto na tela do Meld para criar uma camada de navegador. O ícone de recarregar ao lado do campo URL recarrega o overlay. O Meld explica as camadas na [documentação de layers](https://meldstudio.co/docs/layers/) (em inglês).

## Solução de problemas

**A fonte está vazia.**
- Muitos overlays só mostram algo quando há algo para mostrar. Um overlay de chat fica vazio até alguém mandar mensagem. Um alerta só aparece quando um evento acontece.
- Copie o link de novo no painel e cole na fonte. Se você apagou e instalou um widget de novo, ele tem um link novo.
- Recarregue o overlay: **Atualizar cache da página atual** no OBS, ou o ícone de recarregar no Meld.
- Confira se a fonte não está oculta (o ícone de olho) e se não está atrás de outra fonte na lista.

**Sem som no TTS ou nos alertas.**
- OBS: ative **Controlar áudio via OBS** nas propriedades da fonte e depois confira se a fonte não está muda no **Mixer de áudio**.
- Meld: ative **Add an audio track for the source**.
- Confira as configurações de volume do recurso no KickBot, por exemplo o volume do TTS nas [Configurações de TTS](https://kickbot.com/pt/docs/tts/set-up-tts).
- Para você mesmo ouvir o overlay enquanto faz live no OBS, abra **Editar** > **Propriedades avançadas de áudio** (*Edit* > *Advanced Audio Properties*) e coloque o **Monitoramento de áudio** (*Audio Monitoring*) da fonte em **Monitorar e enviar para a saída** (*Monitor and Output*). Os espectadores ouvem de qualquer jeito.

**As mudanças no KickBot não aparecem na live.** Recarregue o overlay com **Atualizar cache da página atual**. Alguns overlays só leem as configurações quando carregam.

**O overlay aparece cortado ou pequeno demais.** Coloque a largura e a altura da fonte no tamanho do overlay, como aparece em **Tamanho na live**. Mude o tamanho nas propriedades da fonte, e não esticando a fonte na tela, para o texto continuar nítido.

## Perguntas frequentes

**Como coloco o chat da Kick no OBS?**

Instale um widget de chat da Biblioteca de widgets, copie o link dele em **Widgets salvos** e adicione ao OBS como fonte **Navegador**, com o tamanho que aparece no widget. Veja [overlay de chat](https://kickbot.com/pt/docs/widgets/chat-overlay).

**Os overlays do KickBot funcionam com Streamlabs e Meld?**

Sim. Qualquer software de streaming que aceita browser source funciona, incluindo OBS Studio, Streamlabs Desktop e Meld Studio.

**Posso usar o link de um overlay em mais de uma cena?**

Sim. Adicione a mesma fonte em cada cena, ou coloque seus overlays em uma cena só e adicione essa cena às outras.

**Os overlays deixam meu PC lento?**

Os overlays são páginas web leves. O trabalho pesado, como gerar o áudio do TTS, acontece nos servidores do KickBot. O browser source só mostra e toca o resultado.