Como adicionar uma fonte web

Este guia mostra como adicionar páginas web, widgets e conteúdo baseado em navegador como camadas na sua transmissão.

Passos rápidos

1. Clique em Add New Layer (adicionar nova camada) no painel Layers
2. Selecione Web Source (fonte web) no menu
3. Digite a URL da página web
4. Redimensione e posicione como quiser

Entendendo as fontes web

Uma fonte web exibe uma página web ao vivo dentro da sua transmissão. É como incorporar uma janela de navegador na transmissão.

Caso de uso	Exemplo
Widgets	Overlays de chat, alertas, metas
Feeds sociais	Linha do tempo do Twitter/X
Dados ao vivo	Cotações da bolsa, placares esportivos
Animações	Animações em HTML5
Overlays personalizados	Gráficos baseados em navegador

Método 1: adicionar pelo painel Layers

Passo 1: adicionar nova camada

1. No Layers panel (painel de camadas, no lado esquerdo), clique em Add New Layer
2. Selecione Web Source entre os tipos de camada disponíveis
3. Uma camada de fonte web é adicionada à cena

Passo 2: digitar a URL

1. Clique no ícone de settings (configurações, a engrenagem) na barra de ferramentas acima da camada
2. Mantenha Use link (usar link) selecionado, ou mude para Use HTML code (usar código HTML) para colar o código
3. Digite a URL completa (incluindo https://)

Passo 3: configurar o tamanho

1. Defina Frame width (largura do quadro) e Frame height (altura do quadro) no mesmo painel
2. Tamanhos comuns: 1920x1080, 800x600, 400x200
3. Use o tamanho para o qual o widget foi projetado, se for o caso

Passo 4: posicionar a camada

1. Arraste para posicionar na cena
2. Ou defina as coordenadas X e Y exatas
3. Traga para a frente se precisar para ficar visível

Usos comuns de fontes web

Alertas de transmissão (Streamlabs, StreamElements)

URL: a URL do widget da plataforma
Tamanho: geralmente 800x600 ou personalizado
Posição: topo ou centro da tela

Overlay de chat

URL: a URL do widget de chat da sua plataforma
Tamanho: 400x800 (vertical)
Posição: lateral da tela

Feed de rede social

URL: a URL de incorporação da rede social
Tamanho: varia por plataforma
Posição: canto ou área dedicada

Contagem regressiva

URL: a URL de um contador regressivo online
Tamanho: 400x200
Posição: onde fique visível para os espectadores

Configurações da fonte web

Configurações básicas

Configuração	Descrição
URL	Endereço web a exibir
Width (largura)	Largura de exibição em pixels
Height (altura)	Altura de exibição em pixels
Refresh Rate (taxa de atualização)	Com que frequência recarregar (se aplicável)

Configurações avançadas

Configuração	Descrição
Custom CSS (CSS personalizado)	Injeta CSS para estilizar a página
Shutdown when hidden (desligar quando oculta)	Para de carregar quando a camada está oculta
Control audio (controlar áudio)	Ativa/desativa o áudio da página web

Dicas para fontes web

Desempenho

• Fontes web consomem recursos
• Não adicione muitas ao mesmo tempo
• Páginas mais simples carregam mais rápido

Transparência

• Muitos widgets são feitos com fundo transparente
• Funciona automaticamente se a página suportar
• Verifique se o widget tem uma opção “transparent”

Tamanho

• Defina o tamanho da fonte web igual ao tamanho para o qual o widget foi projetado
• Ampliar pode ficar borrado
• Reduzir desperdiça recursos

Áudio de fontes web

• Páginas web podem tocar áudio
• Controle pelas configurações de áudio da fonte web
• Ou defina o volume dessa camada em zero

Criando fontes web personalizadas

Você pode criar suas próprias páginas HTML:

Overlay personalizado simples

Crie um arquivo HTML com o seu conteúdo:

<!DOCTYPE html>
<html>
<head>
  <style>
    body { background: transparent; }
    .text { color: white; font-size: 48px; }
  </style>
</head>
<body>
  <div class="text">Seu texto aqui</div>
</body>
</html>

Hospede online e use a URL.

Conteúdo dinâmico

• Use JavaScript para atualizar o conteúdo
• Conecte a APIs para dados ao vivo
• Anime com CSS ou JavaScript

Serviços de widgets populares

Streamlabs

1. Pegue a URL do widget no painel do Streamlabs
2. Copie a URL única
3. Adicione como fonte web
4. Alertas, metas, chat etc.

StreamElements

1. Pegue a URL do overlay no StreamElements
2. Copie a URL do widget
3. Adicione como fonte web

Outros serviços

• OWN3D
• Muxy
• Stream Avatars
• Widgets personalizados

Solução de problemas

A página web não carrega?

• Verifique se a URL está correta e completa
• Confirme que a URL funciona em um navegador normal
• Verifique se o site permite incorporação (X-Frame-Options)
• Alguns sites bloqueiam a incorporação em iframe

O conteúdo parece do tamanho errado?

• Combine as dimensões da fonte web com o conteúdo
• Verifique se o widget tem um tamanho recomendado
• Não amplie além do tamanho original

A fonte web está em branco?

• A página pode não permitir incorporação
• Tente outra URL
• Verifique o console do navegador em busca de erros

O áudio da fonte web está tocando?

• Verifique as configurações de áudio da fonte web
• Defina o volume da camada em zero
• Desative o áudio nas propriedades da fonte web

As atualizações não aparecem?

• A página pode estar em cache
• Tente a opção de atualizar/recarregar
• Limpe o cache da fonte web, se disponível

O fundo transparente não funciona?

• Confirme que a página web suporta transparência
• Verifique as configurações do widget
• Algumas páginas têm fundo sólido por padrão

Considerações de segurança

• Use somente URLs confiáveis
• Não adicione fontes web com credenciais de login visíveis
• Cuidado com páginas que mostram informações pessoais
• URLs de widgets geralmente são privadas, não as compartilhe

Boas práticas

1. Teste antes de entrar ao vivo: confirme que a fonte web aparece corretamente
2. Combine os tamanhos: use as dimensões projetadas
3. Limite a quantidade: cada fonte web consome recursos
4. Use HTTPS: URLs seguras são preferíveis
5. Tenha um plano B: serviços externos podem cair

Relacionados

• Conceito de camada de fonte web
• Sistema de camadas
• Referência de tipos de camada
• Como adicionar uma sobreposição de texto

Artigos relacionados

• Camadas
• Referência de tipos de camada