1. Examples
  2. /
  3. Avatar Stack
3 min readPublished Jul 19, 2022

Avatar Stack

Copy link to clipboardAdd an Avatar Stack to your application

Click below to play with Ably's Avatar Stack implementation and to browse through the code that powers it. You can test the demo in realtime, on multiple browser windows/devices, or with a friend.

Copy link to clipboardAvatar Stack

An Avatar Stack visually represents users who are connected in a digital space. It can be a useful feature for creating shared experiences online.

Copy link to clipboardActivity indicators

Avatar Stacks typically also include information about user connection state such as online, offline and last seen information which helps to understand recent activity.

Copy link to clipboardWhere can I use Avatar Stacks?

Copy link to clipboardOther Possible Features?

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 clipboardBuilding your Avatar Stack

Ably has simple yet powerful APIs to help you effortlessly build and implement an Avatar Stack to your realtime application.

Copy link to clipboardAbly Channels

Channel is the unit of distribution of messages. Messages can be anything and a channel can represent a chat room, direct messaging, a virtual event etc. Users or their devices can connect to a specific channel. The Avatar Stack is not related to messages in a channel, but the digital place where an Avatar Stack can be used is the channel itself.

Copy link to clipboardAbly Presence

Presence allows you to automatically track who is present in a channel. This feature is used to update the Avatar Stack when users or their devices connect or disconnect from a channel. This provides visibility of user activity in realtime.

Some key methods to help you get started are:

Copy link to clipboardAbly History

History provides access to historical messages, including presence events for up to 2 minutes. This can be used to see who has disconnected from the channel. This enables the Avatar Stack to see who is offline and to show when the user was last seen.

Copy link to clipboardGetting started: Avatar Stack checklist

You'll need to do the following to get started with adding an Avatar Stack to your application.

  • Implement a UI for the Avatar Stack

  • Implement behaviour for the Avatar Stack

  • Manage storage for user information in a datastore or similar

Copy link to clipboardWhat's next?

Join the Ably newsletter today

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