discordwidget
Feito por Miguel RochaDiscord
Widget
Mostre no seu portfólio seus status diretamente do Discord, simultaneamente.
Sobre o projeto
Olá, eu sou Miguel Rocha, engenheiro de software. Criei este projeto a partir de um recurso do meu portfólio pessoal, construído com o OpenPortfolios, de @MatheusAudibert. É open source, sob licença MIT, feito com Next.js, React e TypeScript, e estilizado com Tailwind CSS.
O widget usa os status de atividade do Discord em tempo real através da API do Lanyard, que escuta os eventos de presença do seu servidor via WebSocket e atualiza automaticamente, sem precisar dar refresh na página.
O gerador aqui no site entrega um snippet pronto para colar, já com seu Discord ID e tema configurados — em TypeScript/React, em HTML puro, ou como uma imagem SVG ao vivo para o README do seu perfil no GitHub, já que o GitHub remove tags <script>. Vou continuar compartilhando trechos de código e guias passo a passo por aqui para você integrar isso facilmente ao seu próprio site.
FAQ
Sim. O código-fonte completo está no GitHub sob a licença MIT, então você pode lê-lo, fazer um fork ou hospedar sua própria instância.
Você pode escolher de qual canal ele lê, o tema (escuro, claro ou transparente), a cor de destaque, e se as atividades são exibidas ao lado de cada membro.
O widget escuta os eventos de presença do seu servidor e atualiza automaticamente, então os membros aparecem como online ou offline em segundos.
Sim, desde que o recurso de widget esteja ativado nas configurações do seu servidor. Somente as informações que você escolher exibir ficam públicas.
Copie o trecho de incorporação do seu painel e cole em qualquer lugar que aceite HTML ou um iframe: um site, um README ou uma página de wiki pessoal.