- Add an Avatar Stack for live collaborative experiences
Add an Avatar Stack for live collaborative experiences
What is an Avatar Stack?
An Avatar Stack visually represents users who are connected in a digital space. It is an important feature for a variety of multiuser applications from chat to collaborative spaces.
Avatar Stacks can also include information about user connection state such as online, offline and last seen information which helps to understand recent activity.
Test Ably’s Avatar Stack implementation in realtime!
Click below to try Ably's Avatar Stack implementation 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.
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
Advanced Avatar Stack functionality
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.
How to add an Avatar Stack to your product
With Ably, it is easy to add an Avatar Stack to your product.
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 one of our SDKs to get started.
Step 2: Start using Ably Channels, Presence, and History
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.
channels.get- to get an existing or create a new channel
channel.presence- to get the presence object
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:
presence.get- to retrieve the current list of users
presence.enter(data)- to add a user with a specific name
presence.leave- to remove a user
presence.subscribe- to watch for users being added or removed
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.
presence.history- to get a paginated history of presence events
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
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.
Discover more collaborative features
Discover the other features you could use to deliver a world-class collaborative experience, including:
Activity Feeds: Explanation, benefits and how to get started
Discover what activity feeds and streams are, their use cases and benefits, and how to use Ably APIs and SDKs to set up an activity feed.
How to implement a typing awareness indicator
Discover how to add a realtime typing indicator to your live chat, or other collaborative experiences, using Ably APIs and SDKs.
Add live cursors for collaborative multiplayer experiences
It’s easy to add live cursors with Ably. Using our APIs or SDKs you can use live cursors and other realtime collaboration features to enhance your product.