# Editor de widgets > Crie seu próprio widget para a live na Kick com HTML, CSS e JavaScript no editor de widgets do KickBot, teste com eventos falsos e publique na biblioteca. Source: https://kickbot.com/pt/docs/widgets/widget-builder 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](https://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](https://kickbot.com/pt/docs/widgets/widget-library). Para a referência do código (eventos, dados e configurações), veja [Referência do editor de widgets](https://kickbot.com/pt/docs/widgets/widget-builder-reference). ![A tela inicial do editor de widgets do KickBot com o botão Novo widget, um widget com a URL oculta e a seção Referência](https://kickbot.com/docs/images/widgets/widget-builder/01-home.webp "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](https://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. ![A janela Novo widget com Em branco e os templates Viewer Count e Simple Follower Goal](https://kickbot.com/docs/images/widgets/widget-builder/02-new-widget.webp "Comece com um widget em branco ou com um template.") > **Note:** 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. ![O editor de widgets com Configurações básicas e Variáveis do usuário à esquerda, a aba de código HTML no meio e a prévia à direita](https://kickbot.com/docs/images/widgets/widget-builder/03-editor.webp "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](https://kickbot.com/pt/docs/widgets/widget-builder-reference#user-variables). - **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](https://kickbot.com/dashboard/saved-widgets) 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](https://kickbot.com/pt/docs/getting-started/add-browser-source-obs). > **Caution:** 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. > **Caution:** 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](https://kickbot.com/pt/docs/account/team). ## 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](https://kickbot.com/pt/docs/widgets/widget-library) 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](https://kickbot.com/docs/api/reference/widgets) (em inglês).