Projete potes e metas de dicas personalizadas

Mostre um GIF diferente conforme a arrecadação cresce

Use uma única sobreposição personalizada com a barra e sua arte. A barra já calcula o progresso; a arte deve seguir esse mesmo progresso em vez de contar doações separadamente. Esta receita exige uma cópia editada da sobreposição, não uma opção integrada extra.

1. No SSN, configure Pote de gorjetas e medidor de meta com Barra de meta fluida, o título, a meta e os filtros de doação. Para esta meta fixa em dinheiro de US$ 500, deixe Pontuação Hype Cup desativado e desabilite metas recorrentes ou crescentes. Faça o link original funcionar antes de personalizar.
2. Novo seguidor Baixe e mantenha a estrutura do arquivo abaixo para criar my-goal.html. Salve seus cinco GIFs ao lado desse arquivo com os nomes da tabela. Use telas do mesmo tamanho para a arte não pular nem esticar ao trocar.
3. Forneça ao editor ou à ferramenta de IA o código copiado e os GIFs. Use as instruções de marcos abaixo junto com o texto completo de personalização. Peça uma imagem ao lado da barra existente.
4. Veja a prévia da cópia editada em cada marco e siga Sessão e OBS para conectar usando as configurações do link original. Adicione a sobreposição combinada como uma única fonte de navegador do OBS.

Os nomes dos arquivos são exemplos: forneça sua própria arte. Esses valores em dólares se aplicam a esta meta fixa em dinheiro. Para metas de contagem, Hype, recorrentes ou com alvo crescente, selecione a imagem pela porcentagem exibida na barra.

Add milestone artwork beside the existing Fluid Goal Bar in my-goal.html.
Use these relative GIF files:
0%: goal-0.gif; 25%: goal-25.gif; 50%: goal-50.gif;
75%: goal-75.gif; 100%: goal-100.gif.

Read the existing getProgressState().percentage from the renderAmount()
update path. Do not add a second donation counter or change goal math.
Select the highest reached threshold. If progress jumps from 20% to 80%,
show goal-75.gif directly. Clamp the artwork selection to 0–100%.
Change img.src only when its selected file changes so ordinary updates
do not restart the GIF. Keep one fixed-size image box with object-fit: contain.
Provide meaningful alternative text and handle a missing image without
hiding or breaking the goal bar.

Update the artwork on first render, donations, manual total changes,
reset, restored totals, and recurring/advancing-goal transitions.
Keep the completion image while a fixed goal remains at or above 100%.
If the configured goal resets or advances, follow its displayed percentage.
Preserve the existing filters, session, password, currency/count/Hype
semantics, persistence, completion rules, and local dependencies.

Use the existing preview mode to test 0, 124, 125, 249, 250, 374,
375, 499, 500, and 600 against a fixed goal of 500. Also test a large
jump, a manual decrease, reset, refresh, and any enabled recurring rules.

Ensaie sem alterar os totais reais

Abra a cópia editada com as configurações de prévia abaixo. Altere startamount para os valores das instruções e atualize entre as verificações. A prévia usa dados de exemplo e desativa conexões ao vivo, totais salvos e som.

file:///C:/SSN/social_stream-beta/my-goal.html?preview&style=bar&goal=500&startamount=125

Ao chegar a US$ 125, o GIF do primeiro marco deve aparecer ao lado da barra 25% cheia. Remova preview e o parâmetro de ensaio startamount antes de usar sua sessão real e as configurações originais. Verifique os totais restaurados e as redefinições separadamente em uma sessão de teste, pois a prévia não salva totais.

Escolha a página inicial correta

O Tip Jar/Goal Meter pode apresentar diferentes métricas e estilos de um mesmo tipjar.html. Primeiro configure a métrica pretendida em SSN e, em seguida, mantenha o URL gerado ao alterar o design. A pontuação de hype neste gol é diferente do contador de espectadores/conversas em hype.html.

Baixe e mantenha a estrutura do arquivo

1. Baixe o ZIP de origem e extraia-o. Esses guias usam a fonte beta; mantenha os arquivos de um download juntos.
2. Copiar tipjar.html como my-goal.html ao lado do original. Se escolher uma página ou tema diferente, mantenha sua cópia na pasta original do arquivo.
3. Abra o HTML copiado e seu CSS/JS referenciado em seu editor ou ferramenta de IA. Adicione arte/fontes fornecidas ao mesmo projeto e use caminhos relativos. Comece com substituições de CSS; inclua o renderizador ao alterar a marcação gerada.

Os arquivos a seguir ajudam você a encontrar o design e o comportamento. Esta é uma lista de leitura, não um pacote completo de dependências: mantenha a pasta extraída intacta, incluindo imagens, fontes, scripts e quaisquer arquivos de dados.

Conecte sua cópia e abra-a em OBS

Inicie SSN e faça o URL de sobreposição gerado original funcionar primeiro. O session= conecta-se a essa sessão SSN; não é o nome do seu canal ou o nome deste arquivo. Mantenha SSN, o recurso relevante, e suas fontes de dados em execução.

1. Arraste seu arquivo HTML editado para o Chrome ou Edge. Copie seu endereço da barra de endereço; começa com file:///.
2. Copie tudo de ? em diante em seu link de sobreposição SSN de trabalho e adicione-o ao final do endereço do arquivo. Mantenha todas as configurações, incluindo a sessão, senha e qualquer # final.
3. Abra o resultado em um navegador e defina uma fonte do navegador OBS URL para o mesmo endereço com Arquivo local desmarcado. Combine as dimensões de origem com o design pretendido.

Para o arquivo inicial acima, o endereço local se parece com isto; seu link real pode conter opções adicionais obrigatórias:

file:///C:/SSN/social_stream-beta/my-goal.html?session=YOUR_SESSION

Use o endereço real do arquivo em seu computador. OBS salva com a fonte; mantenha a pasta baixada no mesmo lugar. Depois de salvar as alterações de design, atualize a fonte do navegador. O guia de configuração compartilhado inclui exemplos de Mac e um iniciador opcional para a caixa de seleção Arquivo local.

Onde alterar o design

Altere a arte do jarro, cores de preenchimento, faixa de barra, rótulo de meta, tipografia de quantidade e animação de conclusão. Comece com os controles de estilo e cor existentes descritos no guia de metas. Para arte personalizada, mantenha os ativos ao lado da sua cópia e atualize apenas o caminho referenciado.

A métrica da meta, regras de conclusão/redefinição, persistência e contagem de doadores pertencem ao seu comportamento. Guarde-os enquanto altera a apresentação. Não converta moedas brutas, assinaturas de presente e dólares americanos em um número sem rótulo. Preservar um número donoValue de zero quando a fonte o fornece.

Copie este prompt da IA

Forneça à IA seus arquivos de origem copiados e arte de referência. Substitua os detalhes entre colchetes. Mantenha as instruções de segurança de entrada no prompt.

Customize my-goal.html, copied from tipjar.html.
Design: [describe the look or attach a reference].
Colors/fonts/assets: [supply hex colors and local filenames].
OBS canvas and placement: [size and position].

Style this tip jar/goal as [design] for [canvas]. Change artwork, colors, layout, labels, and motion while preserving the chosen metric, amount calculation, source filters, streak handling, persistence, and completion/reset rules. Keep hasDonation display units and donoValue USD semantics. Do not fabricate progress when the feed is empty.

Read docs/event-reference.html for incoming fields and
docs/overlay-customization-guide.html for local setup and safe rendering.
Keep the existing session/password handling, labels, server routes, query
parameters, URL fragments, and relative asset paths. Use classic scripts
compatible with Chrome 80. Keep executable dependencies packaged locally.

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, any additional assets, exact local browser/OBS
setup instructions using placeholders, and the specific tests performed.
Do not put my private session link or credentials into a public example.

Teste este tipo de sobreposição

Use primeiro uma configuração de visualização ou teste. O guia de mensagens de teste explica como enviar cargas fictícias por meio de SSN; um teste enviado à sua sessão de produção pode acionar as automações existentes.

1. Experimente primeiro o modo de visualização da página (?visualização com suas opções de estilo); remova a visualização ao conectar a sessão real.
2. Use exemplos de eventos de suporte que correspondam à métrica escolhida. Verifique zero, progresso parcial, meta alcançada e progresso além da meta.
3. Verifique as configurações de redefinição/transição e uma atualização da fonte entre os ensaios. Inspecione rótulos de moeda, títulos longos e qualquer efeito sonoro ou de conclusão em OBS.

Execute também o verificações de renderização de entrada em relação aos caminhos de renderização que você alterou. Depois de salvar as edições, atualize a fonte do navegador OBS entre os ensaios e repita a interação visível. As visualizações do navegador não estabelecem captura ao vivo ou comportamento OBS.

Mais referências: Métricas e controles de metas · Campos de doação · Referência de eventos · Solução de problemas de configuração local.