Concepts
Async Collaboration
- Comments
- In-app Notifications
- Recorder
- Inline Reactions Section
- Arrows
Realtime Collaboration
Realtime Collaboration
Presence
The Presence component displays the avatars of users in a room.
We recommend that you familiarize yourselves with UI Customization Concepts before attempting to modify any components.
VeltPresenceWireframe
Copy
Ask AI
<VeltWireframe>
<VeltPresenceWireframe>
<VeltPresenceWireframe.AvatarList />
<VeltPresenceWireframe.AvatarRemainingCount />
</VeltPresenceWireframe>
</VeltWireframe>
Copy
Ask AI
<VeltWireframe>
<VeltPresenceWireframe>
<VeltPresenceWireframe.AvatarList />
<VeltPresenceWireframe.AvatarRemainingCount />
</VeltPresenceWireframe>
</VeltWireframe>
Copy
Ask AI
<velt-wireframe style="display:none;">
<velt-presence-wireframe>
<velt-presence-avatar-list-wireframe></velt-presence-avatar-list-wireframe>
<velt-presence-avatar-remaining-count-wireframe></velt-presence-avatar-remaining-count-wireframe>
</velt-presence-wireframe>
</velt-wireframe>
AvatarList
Copy
Ask AI
<VeltWireframe>
<VeltPresenceWireframe.AvatarList>
<VeltPresenceWireframe.AvatarList.Item />
</VeltPresenceWireframe.AvatarList>
</VeltWireframe>
Copy
Ask AI
<VeltWireframe>
<VeltPresenceWireframe.AvatarList>
<VeltPresenceWireframe.AvatarList.Item />
</VeltPresenceWireframe.AvatarList>
</VeltWireframe>
Copy
Ask AI
<velt-wireframe style="display:none;">
<velt-presence-avatar-list-wireframe>
<velt-presence-avatar-list-item-wireframe></velt-presence-avatar-list-item-wireframe>
</velt-presence-avatar-list-wireframe>
</velt-wireframe>
Item
Copy
Ask AI
<VeltWireframe>
<VeltPresenceWireframe.AvatarList.Item />
</VeltWireframe>
Copy
Ask AI
<VeltWireframe>
<VeltPresenceWireframe.AvatarList.Item />
</VeltWireframe>
Copy
Ask AI
<velt-wireframe style="display:none;">
<velt-presence-avatar-list-item-wireframe></velt-presence-avatar-list-item-wireframe>
</velt-wireframe>
AvatarRemainingCount
Copy
Ask AI
<VeltWireframe>
<VeltPresenceWireframe.AvatarRemainingCount />
</VeltWireframe>
Copy
Ask AI
<VeltWireframe>
<VeltPresenceWireframe.AvatarRemainingCount />
</VeltWireframe>
Copy
Ask AI
<velt-wireframe style="display:none;">
<velt-presence-avatar-remaining-count-wireframe></velt-presence-avatar-remaining-count-wireframe>
</velt-wireframe>
VeltPresenceTooltipWireframe
Copy
Ask AI
<VeltWireframe>
<VeltPresenceTooltipWireframe>
<VeltPresenceTooltipWireframe.Avatar />
<VeltPresenceTooltipWireframe.StatusContainer />
</VeltPresenceTooltipWireframe>
</VeltWireframe>
Copy
Ask AI
<VeltWireframe>
<VeltPresenceTooltipWireframe>
<VeltPresenceTooltipWireframe.Avatar />
<VeltPresenceTooltipWireframe.StatusContainer />
</VeltPresenceTooltipWireframe>
</VeltWireframe>
Copy
Ask AI
<velt-wireframe style="display:none;">
<velt-presence-tooltip-wireframe>
<velt-presence-tooltip-avatar-wireframe></velt-presence-tooltip-avatar-wireframe>
<velt-presence-tooltip-status-container-wireframe></velt-presence-tooltip-status-container-wireframe>
</velt-presence-tooltip-wireframe>
</velt-wireframe>
Avatar
Copy
Ask AI
<VeltWireframe>
<VeltPresenceTooltipWireframe.Avatar />
</VeltWireframe>
Copy
Ask AI
<VeltWireframe>
<VeltPresenceTooltipWireframe.Avatar />
</VeltWireframe>
Copy
Ask AI
<velt-wireframe style="display:none;">
<velt-presence-tooltip-avatar-wireframe></velt-presence-tooltip-avatar-wireframe>
</velt-wireframe>
StatusContainer
Copy
Ask AI
<VeltWireframe>
<VeltPresenceTooltipWireframe.StatusContainer>
<VeltPresenceTooltipWireframe.UserName />
<VeltPresenceTooltipWireframe.UserActive />
<VeltPresenceTooltipWireframe.UserInactive />
</VeltPresenceTooltipWireframe.StatusContainer>
</VeltWireframe>
Copy
Ask AI
<VeltWireframe>
<VeltPresenceTooltipWireframe.StatusContainer>
<VeltPresenceTooltipWireframe.UserName />
<VeltPresenceTooltipWireframe.UserActive />
<VeltPresenceTooltipWireframe.UserInactive />
</VeltPresenceTooltipWireframe.StatusContainer>
</VeltWireframe>
Copy
Ask AI
<velt-wireframe style="display:none;">
<velt-presence-tooltip-status-container-wireframe>
<velt-presence-tooltip-user-name-wireframe></velt-presence-tooltip-user-name-wireframe>
<velt-presence-tooltip-user-active-wireframe></velt-presence-tooltip-user-active-wireframe>
<velt-presence-tooltip-user-inactive-wireframe></velt-presence-tooltip-user-inactive-wireframe>
</velt-presence-tooltip-status-container-wireframe>
</velt-wireframe>
UserName
Copy
Ask AI
<VeltWireframe>
<VeltPresenceTooltipWireframe.UserName />
</VeltWireframe>
Copy
Ask AI
<VeltWireframe>
<VeltPresenceTooltipWireframe.UserName />
</VeltWireframe>
Copy
Ask AI
<velt-wireframe style="display:none;">
<velt-presence-tooltip-user-name-wireframe></velt-presence-tooltip-user-name-wireframe>
</velt-wireframe>
UserActive
Copy
Ask AI
<VeltWireframe>
<VeltPresenceTooltipWireframe.UserActive />
</VeltWireframe>
Copy
Ask AI
<VeltWireframe>
<VeltPresenceTooltipWireframe.UserActive />
</VeltWireframe>
Copy
Ask AI
<velt-wireframe style="display:none;">
<velt-presence-tooltip-user-active-wireframe></velt-presence-tooltip-user-active-wireframe>
</velt-wireframe>
UserInactive
Copy
Ask AI
<VeltWireframe>
<VeltPresenceTooltipWireframe.UserInactive />
</VeltWireframe>
Copy
Ask AI
<VeltWireframe>
<VeltPresenceTooltipWireframe.UserInactive />
</VeltWireframe>
Copy
Ask AI
<velt-wireframe style="display:none;">
<velt-presence-tooltip-user-inactive-wireframe></velt-presence-tooltip-user-inactive-wireframe>
</velt-wireframe>
Styling
Disable ShadowDOM
- By default, ShadowDOM is used to ensure that your app’s CSS does not interfere with the styling of the SDK components.
- Disable the shadow dom to apply your custom CSS to the component.
Default: true
Copy
Ask AI
<VeltPresence shadowDom={false} />
Copy
Ask AI
<VeltPresence shadowDom={false} />
Copy
Ask AI
<velt-presence shadow-dom="false"></velt-presence>
Was this page helpful?
Assistant
Responses are generated using AI and may contain mistakes.