1. Examples
  2. /
  3. Add an avatar stack for live collaborative experiences
4 min readPublished Jul 19, 2022

Add an avatar stack for live collaborative experiences

Copy link to clipboard

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.

Copy link to clipboard

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.

Copy link to clipboard

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

Copy link to clipboard

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.

Copy link to clipboard

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.

Copy link to clipboard

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.

Copy link to clipboard

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.

Copy link to clipboard

How to add an avatar stack to your product

With Ably, it is easy to add an Avatar Stack to your product.

Copy link to clipboard

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.

Copy link to clipboard

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.

Find out more on how to use spaces and build other collaborative functionality read the docs.

Copy link to clipboard

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.

Copy link to clipboard

Discover more collaborative features

Discover the other features you could use to deliver a world-class collaborative experience, including:

Join the Ably newsletter today

1000s of industry pioneers trust Ably for monthly insights on the realtime data economy.
Enter your email