Add an avatar stack for live collaborative experiences

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.

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.

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

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.

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.

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.

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.

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

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.

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.

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 the other features you could use to deliver a world-class collaborative experience, including:

• Live cursors

• Typing indicators

• Emoji reactions