Avatar stack
Add a visual representation of a user’s presence, showing them as online and connected, with this React starter-kit.
Get started with Avatar stacks
What is an avatar stack? Avatar stacks show all the users 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.
Where to use avatar stacks
Avatar stacks can add value to a range of multiplayer collaboration experiences, especially when used in combination with other collaborative features.
Some example use cases include:
- Project management
- Chat
- CRM
- Slide decks
- Spreadsheets
- Collaborative forms
- Whiteboards
- CMS
Avatar stacks best practices
Show just the online members in the stack
Make it easy for users to see who is available to collaborate with, without having to scroll through a long list of users. 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.
Reflect presence changes instantly
Enable users to take appropriate action based on who is present now. 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.
Make it easy to find and follow members
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.
Discover more live demos
A host of collaborative features to enhance your user experience.
Live cursors
Live cursors show the mouse pointer position of other collaborators. They can be useful to show what someone is currently looking at and their movement around a space.
Member location
Member location is a way to show where fellow collaborators are located within a shared space. This can be useful for understanding what other members are working on.
Component locking
Component locking can be a valuable tool for collaborative applications. A lock displayed over a particular component signals to other members that they are currently being edited.
Integrations, whatever your stack
From Webhooks to Lambdas to stream processors like Kafka, Ably has built integrations for a range of protocols, frameworks, databases and cloud services.
View all integrationsStart building with Ably today
Join more than 900 companies already building with Ably.