Chattable - Exibindo uma lista de usuários online

Chattable é uma ferramenta customizável de chat em grupo para seu site. É muito fácil de começar a usar e você consegue ter basicamente um controle total da estilização do seu chat e muitas outras funcionalidades que pretendo falar sobre em futuros posts. Por enquanto, quero mostrar a nova lista de usuários online que ficou disponivel há um tempinho.

Esse mini tutorial considera que você já seguiu o tutorial oficial do Chattable sobre como configurar sua chat box no seu seu site.

Comando para exibir uma listagem de usuários online

Para um popup simples que exibe a lista de usuários online atualmente, você pode simplesmente digitar o comando !online no seu chat. Esse popup também pode ser customizado através do arquivo chattable.css

Lista de usuários customizada

Através desse simples método, você pode listar todos os usuários online em qualquer lugar da sua página. Por exemplo, você pode adicionar uma lista que fica sempre disponível para visualização ao lado do seu chat ou até mesmo em um popup customizado que abre ao clicar em um botão.

Primeiro, você precisa definir onde sua lista vai ficar. Pra esse tutorial, usaremos o elemento <ul> . Lembre-se de definir um ID no elemento, precisaremos dele para renderizar os itens da lista através do script.

 <div class="content">
      <!-- Chattable embed -->
      <iframe
        src="https://iframe.chat/embed?chat=YOUR_CHAT_ID"
        id="chattable"
        frameborder="none"
      ></iframe>

      <!-- Here is the element we'll use to render the online users: --> 
      <ul id="online-users"></ul>
 </div>

Lembre-se de manter o elemento <ul> vazio, já que os <li> seguintes serão renderizados através do script JS. Agora vamos para o código Javascript. Depois que você inicializar seu chatbox, utilize o código abaixo. Eu adicionei alguns comentários (em inglês) no código pra explicar um pouco o que cada pedaço faz. Fique a vontade pra removê-los no seu script.

      // Chattable's initialization
      chattable.initialize({
        theme: "Pastel Pink",
      });

      // This variable stores the <ul> element we defined before, using the id as the target. 
      const onlineUsersElement = document.getElementById("online-users");

      // This is Chattable's method for detecting user connections
      chattable.on("connection", function (list) {
        
        // this variable stores the current online user list that comes from Chattable
        onlineUserList = list;
        onlineUsersElement.innerHTML = "";

        // Loops through the onlineUserList and creates a <li> element inside the <ul> for
        // each item on the list.
        Object.values(onlineUserList).forEach((name) => {
          const item = document.createElement("li");
          item.textContent = name;
          item.classList.add("list-item")
          onlineUsersElement.appendChild(item);
        });
      });

Alguns pontos importantes:

• onlineUsersElement.innerHTML = ""; é necessário para resetar a lista sempre que um novo usuário se conectar. Isso impede que os itens da lista fiquem se repetindo a cada nova conexão e mantém tudo limpo.
• item.classList.add("list-item") é opcional, mas é interessante caso você deseje adicionar uma classe CSS específica aos elementos <li> renderizados.

Conclusão

Bem fácil né? Você pode modificar o código conforme for necessário e estilizar tudo da forma que desejar através do CSS.

Esse foi meu primeiro tutorial da vida inteira, mas espero que ajude! Chattable é uma ferramenta incrível com muitas funcionalidades e eu adoraria ver o quão criativa a galera pode ser com ele. Se tiver dúvidas, sinta-se a vontade pra deixar um comentário nesse post ou me dê um toque lá no chat do KuroiOS !