{"id":111,"date":"2025-06-30T09:40:38","date_gmt":"2025-06-30T12:40:38","guid":{"rendered":"https:\/\/blog.kuroi.com.br\/?p=111"},"modified":"2025-07-19T19:09:30","modified_gmt":"2025-07-19T22:09:30","slug":"chattable-showing-an-online-user-list","status":"publish","type":"post","link":"https:\/\/blog.kuroi.com.br\/pt_br\/chattable-showing-an-online-user-list\/","title":{"rendered":"Chattable - Exibindo uma lista de usu\u00e1rios online"},"content":{"rendered":"

Chattable <\/a>\u00e9 uma ferramenta customiz\u00e1vel de chat em grupo para seu site. \u00c9 muito f\u00e1cil de come\u00e7ar a usar e voc\u00ea consegue ter basicamente um controle total da estiliza\u00e7\u00e3o do seu chat e muitas outras funcionalidades que pretendo falar sobre em futuros posts. Por enquanto, quero mostrar a nova lista de usu\u00e1rios online que ficou disponivel h\u00e1 um tempinho.<\/p>\n\n\n\n

Esse mini tutorial considera que voc\u00ea j\u00e1 seguiu o tutorial oficial do Chattable sobre como configurar sua chat box no seu seu site. <\/em><\/p>\n\n\n\n

Comando para exibir uma listagem de usu\u00e1rios online<\/h3>\n\n\n\n

Para um popup simples que exibe a lista de usu\u00e1rios online atualmente, voc\u00ea pode simplesmente digitar o comando !online<\/code> no seu chat. Esse popup tamb\u00e9m pode ser customizado atrav\u00e9s do arquivo chattable.css<\/p>\n\n\n\n

Lista de usu\u00e1rios customizada<\/h3>\n\n\n\n

Atrav\u00e9s desse simples m\u00e9todo, voc\u00ea pode listar todos os usu\u00e1rios online em qualquer lugar da sua p\u00e1gina. Por exemplo, voc\u00ea pode adicionar uma lista que fica sempre dispon\u00edvel para visualiza\u00e7\u00e3o ao lado do seu chat ou at\u00e9 mesmo em um popup customizado que abre ao clicar em um bot\u00e3o. <\/p>\n\n\n\n

Primeiro, voc\u00ea precisa definir onde sua lista vai ficar. Pra esse tutorial, usaremos o elemento <ul><\/code> . Lembre-se de definir um ID no elemento, precisaremos dele para renderizar os itens da lista atrav\u00e9s do script.<\/p>\n\n\n\n

 <div class="content">\n      <!-- Chattable embed -->\n      <iframe\n        src="https:\/\/iframe.chat\/embed?chat=YOUR_CHAT_ID"\n        id="chattable"\n        frameborder="none"\n      ><\/iframe>\n\n      <!-- Here is the element we'll use to render the online users: --> \n      <ul id="online-users"><\/ul>\n <\/div><\/code><\/pre><\/div>\n\n\n\n
Lembre-se de manter o elemento <ul><\/code> vazio, j\u00e1 que os <li><\/code> seguintes ser\u00e3o renderizados atrav\u00e9s do script JS. Agora vamos para o c\u00f3digo Javascript. Depois que voc\u00ea inicializar seu chatbox, utilize o c\u00f3digo abaixo. Eu adicionei alguns coment\u00e1rios (em ingl\u00eas) no c\u00f3digo pra explicar um pouco o que cada peda\u00e7o faz. Fique a vontade pra remov\u00ea-los no seu script.<\/p>\n\n\n\n
      \/\/ Chattable's initialization\n      chattable.initialize({\n        theme: "Pastel Pink",\n      });\n\n      \/\/ This variable stores the <ul> element we defined before, using the id as the target. \n      const onlineUsersElement = document.getElementById("online-users");\n\n      \/\/ This is Chattable's method for detecting user connections\n      chattable.on("connection", function (list) {\n        \n        \/\/ this variable stores the current online user list that comes from Chattable\n        onlineUserList = list;\n        onlineUsersElement.innerHTML = "";\n\n        \/\/ Loops through the onlineUserList and creates a <li> element inside the <ul> for\n        \/\/ each item on the list.\n        Object.values(onlineUserList).forEach((name) => {\n          const item = document.createElement("li");\n          item.textContent = name;\n          item.classList.add("list-item")\n          onlineUsersElement.appendChild(item);\n        });\n      });<\/code><\/pre><\/div>\n\n\n\n
Alguns pontos importantes:<\/p>\n\n\n\n