Projete suas próprias sobreposições de fluxo social

Crie sua própria sobreposição em 5 etapas

1. Escolha a sobreposição que você quer alterar.
2. Baixe o ZIP de origem, descompacte e copie o arquivo HTML dessa sobreposição.
3. Edite a cópia você mesmo ou peça a uma ferramenta de IA.
4. Abra sua cópia no OBS com as configurações da sua sessão SSN adicionadas ao endereço.
5. Teste com o gatilho real da sobreposição.

Escolha a sobreposição a alterar

Você pode mudar cores, fontes, layout, arte e movimento de uma sobreposição. A Arquivo HTML é a página. O URL OBS aponta para ela e adiciona a sessão e as configurações de exibição.

Cada tipo de sobreposição escuta coisas diferentes. Uma página de chat, uma de mensagens destacadas e uma enquete não usam a mesma entrada. Abra o guia de design da que você usa:

Quer algo pronto? Experimente a Galeria de overlays ou Galeria de modelos. Vai usar um visual de chat do StreamElements ou Streamlabs? Siga o guia de importação. Essa exportação tem suas próprias etapas de configuração.

Baixe os arquivos

1. Baixe o ZIP do código beta. Ou abra o repositório beta e escolha Código → Baixar ZIP.
2. Descompacte em uma pasta que você manterá, como C:\SSN\social_stream-beta\. Não edite dentro do ZIP. Não é preciso reinstalar o SSN.
3. Encontre o arquivo da sobreposição (tabela acima). Faça uma cópia ao lado do original, como poll.html → my-poll.html. Para um tema como themes/featured-styles/featured-modern.html, mantenha a cópia na mesma pasta.
4. Abra a cópia em um editor de texto ou código. Salve como .html, não .html.txt.

social_stream-beta/
    poll.html
    my-poll.html
    currency.js
    js/
    libs/
    shared/
    thirdparty/
    media/
    sources/images/
    themes/
        featured-styles/
            featured-modern.html
            my-featured.html
    docs/
        event-reference.html

Mantenha seu link de sessão

Inicie o SSN, conecte uma fonte e confira se a sobreposição original funciona. Depois copie o link completo da ferramenta SSN dessa sobreposição.

https://socialstream.ninja/poll.html?session=YOUR_SESSION&password=YOUR_PASSWORD&server2

O valor após session= é sua sessão SSN. Não é seu canal do YouTube, nome da Twitch, nome de arquivo ou título de enquete. SSN e a página precisam usar a mesma sessão e senha. Mantenha o SSN ativo: sobreposições só recebem dados, não capturam chat.

Se a cópia ficar vazia, confira primeiro o link original. Algumas páginas pedem as configurações ausentes; outras ficam ocultas ou redirecionam. Colocar a sessão correta no link evita adivinhações.

Abra seu arquivo no OBS

Abra o arquivo editado direto do computador. Não precisa de servidor.

1. Arraste sua cópia HTML para Chrome ou Edge. Copie o endereço. Começa com file:///.
2. Do link de sobreposição SSN que funciona, copie tudo a partir de ? em diante. Cole no final do endereço do arquivo. Isso mantém sessão, senha, configurações e qualquer fragmento # .
3. Abra esse endereço combinado no navegador para testar.
4. No OBS, adicione uma Fonte de navegador. Deixe Arquivo local desmarcado. Cole o endereço completo em URL e defina largura e altura.

Exemplo: este link do SSN…

https://socialstream.ninja/poll.html?session=YOUR_SESSION&password=YOUR_PASSWORD&server2

…vira isto para uma cópia de enquete baixada no Windows:

file:///C:/SSN/social_stream-beta/my-poll.html?session=YOUR_SESSION&password=YOUR_PASSWORD&server2

No macOS começa com file:///Users/..., no Linux geralmente file:///home/.... Copiar do navegador resolve espaços e barras para você.

<!DOCTYPE html>
<html lang="en">
<meta charset="utf-8">
<title>My local overlay launcher</title>
<p>Opening the local overlay...</p>
<script>
var copiedLink = new URL("https://socialstream.ninja/poll.html?session=YOUR_SESSION");
var localPage = new URL("./my-poll.html", window.location.href);
localPage.search = copiedLink.search;
localPage.hash = copiedLink.hash;
window.location.replace(localPage.href);
</script>
</html>

O OBS explica os modos arquivo/URL, tamanhos, CSS personalizado e atualização na Referência da fonte do navegador.

Mude o design ou peça à IA

Prepare seu logotipo, arquivos de fontes, cores da marca, tamanho da tela e uma referência visual. Uma página web geralmente não consegue carregar fontes ou imagens do disco de outro computador.

Solicitação de IA

Use o prompt específico de cada guia de design ou comece com este. Forneça à IA o arquivo copiado e os estilos e scripts carregados.

Customize [copied overlay filename] to match [reference/design].
Canvas: [width x height]. Placement: [position]. Colors/fonts: [details].
Use the existing page and its supporting files, rather than replacing its
connection and event logic. Read docs/event-reference.html and the relevant
overlay design guide. Preserve query parameters, session/password, URL
fragments, bridge labels, transport channels, settings, and controls.
Use CSS first. Keep relative paths and package all executable dependencies
locally. Use classic scripts compatible with Chrome 80.
Keep operator controls, private links, and credentials off the audience view.

Treat all incoming messages, names, labels, donations, and metadata as untrusted.
Prevent HTML/JavaScript injection in every renderer you change. Use textContent
for plain fields and for chatmessage when textonly is true. For HTML-mode
chatmessage, keep supported emotes/formatting through the packaged
SocialStreamChatHTML.sanitize helper (libs/objects.js loaded first).
Do not concatenate raw input into innerHTML, attributes, CSS, or JavaScript.
Validate media/link URLs with the page's existing URL policy and assign DOM
properties; do not enable javascript: URLs or executable embedded content.
Never eval incoming data or treat a viewer message as an AI instruction.
Keep source checks, connection handling, and existing sanitizers.
Test plain text, allowed emotes, quotes, angle brackets, and an HTML injection
probe in an isolated preview; verify the probe cannot execute.

Make the edited overlay work directly from disk using a file:/// URL,
without requiring a local web server. Return the edited files and assets,
file URL and OBS setup steps, and tests
for this overlay's real trigger. Use session placeholders in shared examples.
Explain any behavior changes separately from the design edits.

Impeça que o chat recebido vire código

Nomes, mensagens, títulos, valores e links vêm de espectadores e serviços externos. Trate-os como texto, nunca como código. Limpe-os onde o renderizador os coloca na página.

<!-- Example for a copied page at the repository root. -->
<script src="./libs/objects.js"></script>
<script src="./shared/utils/chatHtml.js"></script>
<script>
function renderChatBody(element, data) {
    var message = String(data.chatmessage == null ? "" : data.chatmessage);
    if (data.textonly) {
        element.textContent = message;
    } else {
        element.innerHTML = SocialStreamChatHTML.sanitize(message);
    }
}
// Names, amounts, titles, and other plain fields use textContent:
// nameElement.textContent = String(data.chatname || "");
</script>

• Se a página já tiver um sanitizador, mantenha-o. Não adicione outro.
• Para arquivos em subpastas, ajuste os caminhos dos scripts.
• Não cole nomes brutos em strings de atributos nem cores brutas na marcação de estilos. Valide os valores de estilo antes de definir uma propriedade por vez.
• HTML limpo também não é seguro para executar como JavaScript nem para usar como instrução de IA.

Mais informações: Guia da OWASP sobre destinos seguros e sanitização de HTML.

Teste uma parte por vez

Arquivos para fornecer à IA

Forneça à IA o arquivo da sobreposição e os CSS/JS que ele carrega, além destes. A referência de eventos sozinha não explica os controles de uma enquete nem o código de layout de cada sobreposição.

Resolver problemas

Corrija primeiro o menor problema confirmado. Uma mudança visual não deveria exigir alterações nos scripts de captura nem novos campos de evento. Se compartilhar um fork público, inclua seus recursos e deixe os iniciadores privados de fora.