Chattable – Showing an online user list

Chattable is a customizable, live group chat tool for your website. It’s pretty easy to get started and you get almost full control of your chat styling and many other features that I’ll mention in future posts. For now, I want to share the new online user list which was made available a while ago.

This mini tutorial considers that you already followed Chattable’s official tutorial on how to setup the chat box in your website.

Online user list command

For a simple popup that shows the current online users, you can simply type the !online command on your chat. This one can also be customized throught the chattable.css

Customized user list

Through a simple method, you can list all the current online users anywhere on your page. For example, you could add a list that stays available at all times beside your chat or even in a customized popup that opens by clicking on a button.

First, you need to define where your list will be. For this tutorial we’ll be using the <ul> element. Remember to define an ID in it, we’ll need in to render the list items in the 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>

Remember to keep the <ul> element empty, the following <li> items will be rendered throught the JS script. Now we’ll move into the JS code. After you initialize your chatbox, use the following snippet. I added a few comments in the code to explain a bit of what each piece does. Feel free to delete them in your 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);
        });
      });

Some points worth mentioning:

• onlineUsersElement.innerHTML = ""; is needed to reset the list whenever a new user connects. This avoids the list repeating itself on each connection and keeps everything clean.
• item.classList.add("list-item") is optional, but it’s interesting if you need to add a specific css class to the <li> elements being rendered.

Conclusion

Pretty easy huh? You can modify the code as needed and style everything as you wish via CSS.

This was my first tutorial EVER, but I hope it helps! Chattable is an awesome tool with lots of functionalities and I’d love to see how creative people can get with it. If you have any questions, feel free to leave a comment on this post or reach out to me through KuroiOS Chat app!