Editor de widgets

O editor de widgets permite criar seu próprio overlay para a sua live na Kick com HTML, CSS e JavaScript. O KickBot envia os eventos da Kick ao vivo (follows, subs, subs presenteados, KICKs, raids, mensagens do chat e mais) para o seu código, então você não precisa se conectar a nenhuma API. Você pode usar o widget na sua própria live e pode publicar o widget para que outros streamers instalem pela biblioteca de widgets. Abra em kickbot.com/dashboard/widget-builder.

O editor é para quem sabe escrever um pouco de código. Se você só quer um overlay pronto, use a biblioteca de widgets. Para a referência do código (eventos, dados e configurações), veja Referência do editor de widgets.

O editor de widgets lista seus widgets e as URLs deles para o OBS.

Crie um widget novo

1. Abra kickbot.com/dashboard/widget-builder e clique em Novo widget.
2. Escolha Em branco ou comece por um template: Viewer Count, Simple Follower Goal ou Basic Chat Widget. O template copia o código daquele widget do KickBot, para você poder mudar.
3. Digite um Nome do widget. Para um widget em branco, defina também a Largura e a Altura em pixels (800 × 600 por padrão).
4. Clique em Criar widget. O editor abre.

Comece com um widget em branco ou com um template.

Nota

No plano Grátis, você pode ter até 10 widgets no editor de widgets. Com o Premium não há limite. Os widgets que você instala da biblioteca não contam.

O editor

O editor tem três partes: as configurações à esquerda, o código no meio e uma prévia ao vivo à direita.

Configurações, código e prévia no editor de widgets.

• Configurações básicas: o nome e a largura e altura em que o widget é renderizado.
• Variáveis do usuário: configurações que os streamers podem mudar sem código, como uma cor, um texto ou o número de uma meta. Veja Variáveis do usuário.
• Enviar eventos de teste: botões que enviam um evento falso (Sub, Sub presenteada, KICKs, Follow, Raid, Mensagem e mais) para a prévia.
• Visibilidade: mostra se o widget é privado ou publicado e tem o botão Publicar widget.
• Código: abas para HTML, CSS e JavaScript. Use Layout do editor no topo para mostrar um arquivo (Único) ou dois arquivos ao mesmo tempo (Lado a lado ou Empilhado).
• Prévia: mostra o widget no tamanho dele, ajustado para caber. Ela atualiza enquanto você digita. Use o botão de recarregar para começar de novo, ou o botão de abrir em janela separada (útil para abrir o console do navegador).

O editor salva seu trabalho sozinho enquanto você digita. Salvar salva tudo de uma vez, e o texto abaixo do botão mostra quando foi salvo pela última vez. Sair volta para a lista de widgets.

O editor precisa de uma tela larga. No celular, o KickBot pede para você abrir em um computador. Seu widget fica salvo, então você continua de lá.

Teste seu widget

1. Abra Enviar eventos de teste.
2. Clique em um evento, por exemplo Follow ou Mensagem.
3. Veja a prévia reagir.

Os eventos de teste têm o mesmo formato dos eventos reais, com dados de exemplo. Eles vão só para a prévia desta página, nunca para o OBS ou para a sua live. Para testar com eventos reais, adicione o widget ao OBS e entre ao vivo, ou peça para um amigo seguir seu canal.

Use seu widget na live

Todo widget que você cria também aparece em Widgets salvos com “Seu próprio widget” abaixo do nome. A URL dele sempre roda o seu código mais recente.

1. Na página do editor de widgets, clique em Copiar URL no seu widget.
2. No OBS, adicione uma fonte Navegador (Browser), cole a URL e defina a largura e a altura com o tamanho do widget.
3. Clique em OK.

Se você mudar o código enquanto o widget está no OBS, atualize o browser source para carregar o código novo. Quando você muda o valor de uma variável do usuário em Widgets salvos e clica em Salvar alterações, o OBS recarrega o widget sozinho. Para mais ajuda, veja Adicione um browser source ao OBS.

Cuidado

Mantenha a URL privada. Qualquer pessoa com ela pode mostrar seu widget na tela dela.

Publique na biblioteca de widgets

Publique um widget quando você quiser que outros streamers encontrem e instalem.

1. No editor, abra Visibilidade e clique em Publicar widget.
2. Adicione uma Imagem principal e pelo menos mais uma imagem. Você pode adicionar até 10 imagens no total, cada uma com até 10 MB. 1920 × 1080 funciona melhor.
3. Escreva uma Descrição: o que o widget mostra e como configurar.
4. Envie. A janela mostra Widget publicado!, e o widget vai para revisão.

A equipe do KickBot revisa cada widget. Se for aprovado, ele aparece na biblioteca de widgets com seu nome da Kick como criador. A revisão normalmente leva menos de 24 horas.

Cuidado

Você só pode publicar um widget uma vez. Depois disso, o editor mostra “Widget já publicado. Fale com o suporte para alterações”. Teste bem seu widget antes de publicar.

Exclua um widget

Na página do editor de widgets, abra o menu ⋯ de um widget e clique em Excluir. Isso remove o código e as configurações dele e não pode ser desfeito.

Membros da equipe

Os membros da equipe precisam da permissão Editor de Widgets para abrir o editor e criar widgets. Eles precisam de Configurar Widgets para ver as URLs dos widgets. Veja Gerenciar equipe.

Perguntas frequentes

Preciso saber programar?

Sim, um pouco de HTML, CSS e JavaScript. Se você não programa, instale um widget da biblioteca de widgets e mude as configurações dele.

Posso editar um widget do KickBot da biblioteca?

Você não pode mudar o código de um widget da biblioteca. Comece um widget novo pelo template Viewer Count, Simple Follower Goal ou Basic Chat Widget para ter uma cópia do código que você pode mudar.

Meu widget pode carregar fontes, imagens ou outros scripts?

Sim. Seu HTML, CSS e JavaScript rodam em uma página web normal no OBS, então você pode usar links para fontes web, imagens e scripts de outros sites. Use variáveis do usuário do tipo Imagem/GIF, Vídeo ou Áudio para os streamers enviarem os próprios arquivos.

Posso criar widgets com a API do KickBot?

Sim. A API do KickBot pode listar, criar e atualizar seus widgets. Veja a referência da API de widgets (em inglês).