- Examples
- /
- Add an avatar stack for live collaborative experiences
Add an avatar stack for live collaborative experiences
What is an avatar stack?
Avatar stacks show all the users currently collaborating within a shared space. They can help users make informed decisions by indicating the connection state of fellow collaborators, e.g. are they online, offline or have recently left. Avatars can take various forms from photos to initials or symbols.

Test Ably’s avatar stack implementation in realtime!
Click below to try Ably's avatar stack demo and to browse through the code that powers it.
Test the demo. Open on multiple browser windows/devices, or share with a friend. See new avatars instantly appear and become greyed out as soon as a tab is closed.
Where can I use avatar stacks?
Avatar stacks can add value to a range of live experiences online. Some example use cases are:
Showing members of a chat room
Collaborating with others in a virtual space (e.g. document, deck, sheet)
Showing recipients in a 1-1 chat
Visualising the audience in a virtual event
Building an avatar stack
You can incorporate more functionality within your avatar stack such as:
Displaying user profile information including username, name, status, description
Avatar customisation with the ability for users to include a profile picture, initials etc.

What to show, when
Consider whether it is practical or beneficial to the user to show a full list of collaborators that have access. For example only showing the avatars for online or recently left members, maybe sufficient. However in instances where you must show the full list, make sure to order with the online members listed first. This will make it easier for users to see who is available to collaborate, without having to scroll through a long list of users.
Display user presence in realtime
The value of instant updates to online status changes is often underestimated. Avatar stacks are huge contributors to unsaid virtual cues in a shared workspace, so make sure the status updates are reflected immediately in the UI, enabling users take appropriate action based on that information.
Find me, follow me
Avatar stacks can be used in conjunction with member location to show where exactly someone is within a space - allowing them to jump to their location or follow their movements.
How to add an avatar stack to your product
With Ably, it is easy to add an Avatar Stack to your product.
Step 1: Sign up to Ably
Visit our sign up page to start using Ably for free. Simply upgrade when you need to ramp up usage past 6M Monthly messages, 200 Peak concurrent channels, 200 Peak concurrent connections. Once you are signed up, download the Spaces and Ably-js SDK to get started.
Step 2: Start using Spaces
Space membership
A space is the virtual, collaborative area of an application you want to monitor. A space can be anything from a web page, a sheet within a spreadsheet, an individual slide in a slideshow, or the slideshow itself. Create a space and listen for events to see when clients enter and leave.
Space membership is used to build avatar stacks and find out which members are online within a space.
The following four event types are emitted by members:
enter
- member has entered a space.updateProfile
- a member has updated their profile data .leave
- a member has left the space.remove
- a member has been removed from the members list after the set period has elapsed. This is useful to show when a member was last seen online.
Next steps
Find out more on how to use spaces and build other collaborative functionality read the docs.
Don’t forget to try out Ably’s avatar stack implementation!
Get hands-on with our avatar stack offering by testing the demo in realtime - on multiple browsers, or with a friend. You can also browse through the code that powers it.
Discover more collaborative features
Discover the other features you could use to deliver a world-class collaborative experience, including:
Recommended Articles

How to implement a typing awareness indicator
Discover how to add a realtime typing indicator to your live chat, or other collaborative experiences, using Ably APIs and SDKs.

Implementing emoji reactions for live chat
Ably provides simple APIs to help you build and add emoji reactions to your chat application, allowing users to react to messages in realtime.

Activity Feeds: Explanation, benefits and how to get started
Discover what activity feeds and streams are, their use cases and benefits, and how to use Ably APIs and SDKs to set up an activity feed.