Visuais de chat do StreamElements no Social Stream Ninja

O que funciona?

O importador é destinado a widgets de chat personalizados feitos para StreamElements ou Streamlabs, incluindo o componente de chat de um pacote de tema. Você precisa dos arquivos-fonte do widget. Ele não importa uma conta inteira do StreamElements nem um tema a partir de uma URL de sobreposição.

Use o Aplicativo do SSN para Windows ou extensão do Chrome para capturar o chat. O visual importado exibe esse chat no OBS. A compatibilidade depende do widget; recursos de conta, como metas, fidelidade, lojas e alertas, podem precisar de conversão manual.

1. Obtenha os arquivos do widget

Comece pelo ZIP ou pasta original do designer. Procure HTML, CSS e JavaScript, além de arquivos JSON de campos/dados, imagens e fontes. Escolha um widget de chat quando um pacote incluir vários designs.

Você só tem um link de instalação? Peça ao designer o código-fonte do widget de chat ou use o código disponível no editor de widgets personalizados do StreamElements. Uma captura de tela, vídeo ou URL de Fonte de navegador não pode ser convertida sozinha.

Meu código de widget está no editor do StreamElements

Abra o editor de código do widget personalizado. Salve cada parte disponível como um arquivo de texto simples separado: html.txt, css.txt, js.txt, fields.txt e data.txt. Copie o conteúdo sem adicionar formatação nem alterar o JSON. Se não houver arquivo de dados, o importador usará os valores padrão dos campos.

Selecione todos esses arquivos juntos usando Escolher arquivos. Inclua as artes ou fontes locais; Escolher pasta preserva os caminhos das pastas. Veja a referência do editor de código do StreamElements para o código e a estrutura dos campos.

Importe apenas código confiável: o JavaScript do widget é executado na prévia e na sobreposição baixada.

2. Abra o importador

No menu do SSN, abaixo da seção Sobreposições de chat pré-estilizadas, procure a opção Importar visual de chat do StreamElements / Streamlabs. Isso preenche sua sessão atual. Você também pode pesquisar no menu por StreamElements ou abrir o importador diretamente.

Use Escolher ZIP, Escolher arquivos ou Escolher pasta. Uma prévia de demonstração é carregada após o processamento dos arquivos. Confira os avisos de importação; use Seleção avançada de arquivos se os arquivos-fonte errados tiverem sido detectados.

Importador de chat mostrando as três etapas de configuração ao lado de mensagens de exemplo, com controles Prévia de demonstração, Prévia ao vivo e Baixar HTML para OBS. — O importador com um widget de exemplo e um ID de sessão fictício. O visual de chat que você importar terá seu próprio design.

3. Conecte e visualize

Mantenha o SSN em execução e confirme que uma mensagem real aparece no dock de chat.
Confira no importador ID de sessão / ID de transmissão do SSN. Se estiver vazio, copie-o de Opções de sessão no SSN. Este não é seu nome de usuário do Twitch ou YouTube.
Insira a senha opcional da sessão, se usar uma.
Use Prévia de demonstração (Demo Preview) para mensagens de exemplo, depois Prévia ao vivo (Live Preview) e envie uma nova mensagem de chat para sua transmissão.
Se Histórico de mensagens aparecer, ajuste a remoção por tempo ou a quantidade máxima de mensagens.

A Prévia de demonstração funciona sem sessão e usa apenas mensagens de exemplo. A Prévia ao vivo precisa de chat chegando pelo SSN; uma prévia vazia, por si só, não significa que a conexão falhou.

4. Baixe e adicione ao OBS

Clique em Baixar HTML para OBS (Download OBS HTML) e salve em um local permanente.
No OBS, adicione uma Fonte de navegador, ative Arquivo local, e selecione esse arquivo HTML.
Defina a largura e a altura da área de chat e envie outra mensagem para conferir.

Sua sessão já está incorporada; não é necessário editar a URL no OBS. Use o arquivo baixado como Fonte de navegador. Mantenha o SSN e as fontes de captura do chat em execução; você pode fechar o importador e o StreamElements.

O arquivo exportado contém seu ID de sessão e a senha opcional. Mantenha-o privado. Para alterar a sessão, a senha ou as configurações do widget depois, importe os arquivos originais novamente e baixe um substituto, depois atualize a fonte no OBS.

Se algo não funcionar

Nenhum código de widget encontrado: use os arquivos-fonte originais. Imagens, campos/dados sozinhos e arquivos SSN já convertidos não são o código-fonte do widget.
A demonstração está em branco ou com aparência incorreta: confira HTML/CSS/JS em Seleção avançada de arquivos. Forneça os arquivos correspondentes de campos e dados e todos os recursos.
A demonstração funciona, mas a Prévia ao vivo está em branco: envie uma nova mensagem, confira o dock do SSN e faça o ID de sessão e a senha corresponderem.
A prévia ao vivo funciona, mas o OBS está em branco: confira o arquivo HTML local selecionado, as dimensões e a visibilidade da Fonte de navegador, depois atualize o cache.
Faltam fontes ou artes: inspecione o resumo da exportação. Recursos remotos que não puderam ser incorporados ainda precisam de uma URL acessível e de acesso à internet.
As mensagens desaparecem: ajuste o Histórico de mensagens se o widget oferecer essa opção. Alguns widgets controlam a remoção em seu próprio JavaScript.
APIs ou plugins da conta falham: alguns widgets precisam de alterações no código. Use o prompt de conversão do importador ou peça ajuda com os arquivos originais do widget e uma captura de tela do problema, sem compartilhar suas credenciais de sessão.