Guia · 6 passos
Como adicionar um custom widget no StreamElements
Um custom widget é um widget do StreamElements cujo código você mesmo fornece. É assim que a maioria dos widgets premium é entregue quando não há instalação com um clique, e leva uns cinco minutos para configurar.
Resposta rápida
Abra um overlay no StreamElements, clique em +, escolha Static/Custom › Custom widget, selecione o novo widget e clique em Open Editor. Cole o código nas abas HTML, CSS, JS e FIELDS, feche o editor, clique em Save e adicione a URL do overlay ao OBS como fonte Navegador (Browser).
Passo a passo
Abra ou crie um overlay
No StreamElements, vá em Streaming tools › My overlays. Abra um overlay existente, ou crie um novo em 1920×1080.
Adicione um custom widget
No editor do overlay, clique em + e escolha Static/Custom › Custom widget. Um widget provisório aparece no canvas.
Abra o editor de código
Selecione o widget e clique em Open Editor no painel da esquerda. O editor tem quatro abas: HTML, CSS, JS e FIELDS.
Cole o código
Troque o conteúdo de cada aba pelo arquivo correspondente do seu download. Os arquivos de código normalmente têm o nome da aba (por exemplo widget.html, widget.css, widget.js e fields.json). Cole o arquivo de fields em FIELDS; ele cria as configurações que você poderá mudar depois.
Salve e posicione
Feche o editor e clique em Save no topo do editor do overlay. Arraste e redimensione o widget no canvas, depois use as configurações dele no painel da esquerda para mudar textos, cores e opções.
Mostre no OBS
Copie a URL do overlay com o ícone de link. No painel Fontes (Sources), clique em +, escolha Navegador (Browser), dê um nome e clique em OK. Cole a URL, use 1920×1080 e clique em OK.
Bom saber
- A aba FIELDS cria as configurações do widget. Se o painel de configurações aparecer vazio depois de colar, confira se o arquivo de fields foi para FIELDS e não para JS.
- Cole cada arquivo na sua própria aba, inteiro. Um widget com o código cortado no meio costuma ficar em branco.
- Só cole código de fontes em que você confia. O código do custom widget roda no seu overlay.
- Para testar alertas ou chat, use Emulate no editor do overlay.
Prefere não colar código?
Nossos packs incluem um link de instalação do StreamElements com um clique, que cria o overlay com todos os widgets já configurados, então você pode pular isso. Os arquivos de código continuam no download para a instalação manual. Veja como instalar um overlay por link.
