Presence

We recommend that you familiarize yourselves with UI Customization Concepts before attempting to modify any components.

VeltPresenceWireframe

React / Next.js
Other Frameworks

<VeltWireframe>
    <VeltPresenceWireframe>
        <VeltPresenceWireframe.AvatarList />
        <VeltPresenceWireframe.AvatarRemainingCount />
    </VeltPresenceWireframe>
</VeltWireframe>

<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

React / Next.js
Other Frameworks

<VeltWireframe>
    <VeltPresenceWireframe.AvatarList>
        <VeltPresenceWireframe.AvatarList.Item />
    </VeltPresenceWireframe.AvatarList>
</VeltWireframe>

<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

React / Next.js
Other Frameworks

<VeltWireframe>
    <VeltPresenceWireframe.AvatarList.Item />
</VeltWireframe>

<velt-wireframe style="display:none;">
    <velt-presence-avatar-list-item-wireframe></velt-presence-avatar-list-item-wireframe>
</velt-wireframe>

AvatarRemainingCount

React / Next.js
Other Frameworks

<VeltWireframe>
    <VeltPresenceWireframe.AvatarRemainingCount />
</VeltWireframe>

<velt-wireframe style="display:none;">
    <velt-presence-avatar-remaining-count-wireframe></velt-presence-avatar-remaining-count-wireframe>
</velt-wireframe>

VeltPresenceTooltipWireframe

React / Next.js
Other Frameworks

<VeltWireframe>
    <VeltPresenceTooltipWireframe>
        <VeltPresenceTooltipWireframe.Avatar />
        <VeltPresenceTooltipWireframe.StatusContainer />
    </VeltPresenceTooltipWireframe>
</VeltWireframe>

<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

React / Next.js
Other Frameworks

<VeltWireframe>
    <VeltPresenceTooltipWireframe.Avatar />
</VeltWireframe>

<velt-wireframe style="display:none;">
    <velt-presence-tooltip-avatar-wireframe></velt-presence-tooltip-avatar-wireframe>
</velt-wireframe>

StatusContainer

React / Next.js
Other Frameworks

<VeltWireframe>
    <VeltPresenceTooltipWireframe.StatusContainer>
        <VeltPresenceTooltipWireframe.UserName />
        <VeltPresenceTooltipWireframe.UserActive />
        <VeltPresenceTooltipWireframe.UserInactive />
    </VeltPresenceTooltipWireframe.StatusContainer>
</VeltWireframe>

<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

React / Next.js
Other Frameworks

<VeltWireframe>
    <VeltPresenceTooltipWireframe.UserName />
</VeltWireframe>

<velt-wireframe style="display:none;">
    <velt-presence-tooltip-user-name-wireframe></velt-presence-tooltip-user-name-wireframe>
</velt-wireframe>

UserActive

React / Next.js
Other Frameworks

<VeltWireframe>
    <VeltPresenceTooltipWireframe.UserActive />
</VeltWireframe>

<velt-wireframe style="display:none;">
    <velt-presence-tooltip-user-active-wireframe></velt-presence-tooltip-user-active-wireframe>
</velt-wireframe>

UserInactive

React / Next.js
Other Frameworks

<VeltWireframe>
    <VeltPresenceTooltipWireframe.UserInactive />
</VeltWireframe>

<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

React / Next.js
Other Frameworks

<VeltPresence shadowDom={false} />

<velt-presence shadow-dom="false"></velt-presence>

Limitations

Anonymous local users never see presence. The feature requires an identified user.
maxUsers does double duty: it caps the avatars shown and gates the “+N” overflow badge, which renders only when filteredPresenceUsers.length > maxUsers.
A custom template needs shadowDom="true" explicitly if you want it inside the shadow DOM.
Tooltip slots are status-gated: .UserActive renders only for online and .UserInactive only for away. Neither renders for offline.

Concepts

Approaches

Components: Async Collaboration

Components: Realtime Collaboration

Reference

VeltPresenceWireframe

AvatarList

Item

AvatarRemainingCount

VeltPresenceTooltipWireframe

Avatar

StatusContainer

UserName

UserActive

UserInactive

Styling

Disable ShadowDOM

Limitations

​VeltPresenceWireframe

​AvatarList

​Item

​AvatarRemainingCount

​VeltPresenceTooltipWireframe

​Avatar

​StatusContainer

​UserName

​UserActive

​UserInactive

​Styling

​Disable ShadowDOM

​Limitations

VeltPresenceWireframe

AvatarList

Item

AvatarRemainingCount

VeltPresenceTooltipWireframe

Avatar

StatusContainer

UserName

UserActive

UserInactive

Styling

Disable ShadowDOM

Limitations