Fala pessoal do TibiaKing, meu nome é Waliston mais conhecido como Totten, trabalho com desenvolvimento de sites e vejo que muitas pessoas me perguntam como adicionar um Widget do Discord no site, e como não vi nenhum tutorial explicando sobre isso, eu resolvi ensinar passo a passo como fazer o mesmo.

Adquirindo o código do Widget:

Mostrar conteúdo oculto

1° Passo:

Acesse seu servidor do discord e vá em configuração do servidor.

2° Passo:

Vá em Widget.

3° Passo:

Vá em Widget Pronto e clique em copy (destacado em verde na imagem).

 

Adicionando o Widget no Site:
 

Mostrar conteúdo oculto

1° Passo:

Acesse a página que você deseja adicionar o Widget, após isso cole o código copiado no Discord. Vai ficar +/- assim:

<iframe src="https://discordapp.com/widget?id=575000555957518336&theme=dark" width="350" height="500" allowtransparency="true" frameborder="0"></iframe>

2° Passo(Configurando tamanho do mesmo):

Para configurar o tamanho do Widget basta modificar o width e o height, por padrão o discord disponibiliza o Widget nas proporções de 350x500. Para alterar, basta mudar o valor em width e em height. Por exemplo: Se você quiser que ele seja 200x300, simplesmente precisa mudar o valor de width para 200 e o valor de height para 300. Pronto, tamanho alterado. 

 

Resultado final:

 

Mostrar conteúdo oculto

 

Parabéns, seu tópico de conteúdo foi aprovado!
Muito obrigado pela sua contribuição, nós do Tibia King agradecemos.
Seu conteúdo com certeza ajudará à muitos outros, você recebeu +1 REP.

Mostrar conteúdo oculto

Congratulations, your content has been approved!
Thank you for your contribution, we of Tibia King we are grateful.
Your content will help many other users, you received +1 REP.

 

Muito obrigado, mas estou tendo um problmea, alguem sabe me ajudar?

A aba do Discord fica em cima do TopLVL

O que devo fazer?

No iframe coloca um margin-top de 30px