Avatars

By default, an avatar is displayed for each user co-editing the document. You can optionally enable and disable these visual elements via the showUIinitialization parameter.

Avatar Rendering

The client-side library provides a default avatar implementation based on the values of the userfield supplied to the initialization config object. The default behavior is to extract the user's initials from the value of user.name to render a text-based avatar.

Alternatively, you can style the avatar with an image, by setting the value of user.avatarto a link that points to the image source. The image avatar will accept any format supported by a <img> tag.

If you would like to implement your own avatar component from scratch, then you can hook into session events, which updates whenever users join and leave the session.

Avatar Color

A user's avatar background color will match the same user's cursor and remote pointer. The colors are assigned on round-robin depending on when the user joined the session. To override the default color assignment and assign a specific color, set it in the user config option.

Avatar Positioning

By default, the a of user avatars will be rendered horizontally above the top-right corner of the editor window:

To update the rendering position, use the avatar initialization field. For example, setting avatar: {vertical: true} will cause the avatars to be rendered vertically along the right boarder of the editor window

Enable/Disable at Runtime

You may also programmatically enable and disable the avatars at run time via the following client API calls. These calls will only have visible effect after the user has started or joined a session.

codox.ui.hide()

Explicitly hides the online user avatars

codox.ui.show()

Displays the online user avatars