Para aqueles que sempre quiseram adicionar aqueles Widget no seu site, seja do Discord, TeamSpeak3, etc, vou disponibilizar alguns código para que vocês consigam por o Widget desejado.

 

Widget Discord

Para adicionar esse Widget em seu site, você irá em seu layout.php e adicionar o seguinte código.

Mostrar conteúdo oculto

<script src="https://cdn.jsdelivr.net/npm/@widgetbot/crate@3" async defer>
  const button = new Crate({
    server: '488050113470529546',
    channel: '498881794133721108',
    shard: 'https://cl2.widgetbot.io'
  })
  
  button.notify('Discord Baiak Alpha')

</script>

Mostrar conteúdo oculto

Em server, você irá pegar o id do seu servidor, basta você ir nas configurações, Widget, e pegar o ID DO SERVIDOR.

Em channel, você irá pegar o id da sala que quando a pessoa clicar em join ele irá automaticamente para a sala escolhida, para pegar o id da sala ela aparece na URL do site

Em shard, você irá precisar adicionar um bot no seu servidor, esse bot será o Guest Chat, para adiciona-lo basta entrar neste site e baixar um dos Cluster. Se você instalou o Cluester 2 você deixa do jeito que estar, mais se você baixou o Cluster 3, você irá mudar o https://cl2.widgetbot.io para https://cl3.widgetbot.io

E por ultimo, em button.notify será a mensagem que assim que a pessoa entrar no seu site irá aparecer.

 

Pronto, seu Widget do Discord estar feito.

 

Widget TeamSpeak

Para adicionar esse Widget em seu site, você irá em seu layout.php e adicionar o seguinte código.

Mostrar conteúdo oculto

<!--Vermelho FF0000 ... Verde 03ff0d--> 
<style>
    .tstable{position:absolute;margin-left:60%;text-align:left;background:#01010185;border:2px solid #8595bb;padding:9px 8px 6px 47px;border-radius:0 0 10px 10px;color:#fff;margin-top:-8px;font:400 9pt Verdana,Arial,Times New Roman,sans-serif;box-shadow:2px 2px 18px 1px #67e9ff;z-index:10000;transition:all 600ms ease-out}.tstable:hover{box-shadow:2px 2px 18px 1px #03ff0d;border:2px solid #03ff0d;background:#343f58;transition:all 600ms ease-out;z-index:10000;cursor:pointer}.tstable img{position:absolute;margin-left:-47px;margin-top:-8px;width:43px}.tstable small{transition:all 600ms ease-out;display:none}.tstable:hover small{transition:all 600ms ease-out;display:block}
    </style>
    <a href="ts3server://Em Breve, TS próprio para vocês.">
        <div class="tstable">
            <div class="tsbox">
                <img src="./images/ts3.png"><strong>IP: </strong>Em Breve, TS próprio para vocês.<br>
                <strong>Slots: </strong>200 | <strong style="color: #FF0000;text-shadow: 1px 1px black;">Offline</strong> <small style="color: #03ff0d;text-shadow: 1px 1px black;text-align:center;">Clique aqui para se conectar!!</small>
            </div>
        </div>
    </a>

Mostrar conteúdo oculto

Esse <!--Vermelho FF0000 ... Verde 03ff0d--> não é nada de mais, só coloquei pra saber as cores e mudar a cor do OFFLINE e do ONLINE.

Para colocar o ip do seu ts, é só você mudar <a href="ts3server://Em Breve, TS próprio para vocês. para o seu ip do ts.

Coloca o ip também no IP: e muda a mensagem Em Breve, TS próprio para vocês. Para o que você quiser.

Infelizmente não tenho a imagem para usar nesse Widget, quem conseguir a imagem, por favor disponibiliza pra nós kkk

 

Pronto, seu Widget do TeamSpeak estar feito.

 

Se você quiser também adicionar o Discord com o box do TeamSpeak, só é fazer as devida modificações.

Mostrar conteúdo oculto

<style>
    .discordtable{position:absolute;margin-left:22%;text-align:left;background:#01010185;border:2px solid #8595bb;padding:9px 8px 6px 47px;border-radius:0 0 10px 10px;color:#fff;margin-top:-7px;font:400 9pt Verdana,Arial,Times New Roman,sans-serif;box-shadow:2px 2px 18px 1px #67e9ff;z-index:10000;transition:all 600ms ease-out}.discordtable:hover{box-shadow:2px 2px 18px 1px #03ff0d;border:2px solid #03ff0d;background:#343f58;transition:all 600ms ease-out;z-index:10000;cursor:pointer}.discordtable img{position:absolute;margin-left:-47px;margin-top:-8px;width:43px}.discordtable small{transition:all 600ms ease-out;display:none}.discordtable:hover small{transition:all 600ms ease-out;display:block}
    </style>
    <a href="https://discord.gg/ZRAkCNz" target="_blank">
        <div class="discordtable">
            <div class="discordbox">
                <img src="./images/discord.png"><strong>Discord do</strong><br>
                <strong>Servidor</strong><strong style="color: #FF0000;text-shadow: 1px 1px black;"></strong> <small style="color: #03ff0d;text-shadow: 1px 1px black;text-align:center;">Clique aqui para se conectar!!</small>
            </div>
        </div>
    </a>

Mostrar conteúdo oculto

Você só irá trocar o meu link https://discord.gg/ZRAkCNz pelo seu

Imagem para usar esse Widget

 

Pronto, seu Widget do Discord com o box do TeamSpeak já estar feito.

Editado Janeiro 30, 2019 6 anos por Phineasz (veja o histórico de edições)

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.

 

Top Mn,em breve vou estar disponibilizando algumas artes personalizadas pra isso.

@Astra Moskov Boa, 

@Phineasz DICA: Utilize função spolier no lugar da função citar.

 

Parabéns pelo tutorial!