Avatar stack

Add a visual representation of a user’s presence, showing them as online and connected, with this React starter-kit.

What is an avatar stack?

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
View the docs
Where to use live cursors

Avatar stacks best practices

Show just the online members in the stack

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.

Show just the online members in the stack

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.

Show just the online members in the stack

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

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.

Check it out
Member location

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.

Check it out
Component locking

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.

Check it out
Spaces Integrations: datadog, AWS, React, Lambda, WebHooks, Apache Kafka, AWS SQS, AWS Kinesis

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 integrations

Start building with Ably today

Join more than 900 companies already building with Ably.