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>

Concepts

Async Collaboration

Realtime Collaboration

VeltPresenceWireframe

AvatarList

Item

AvatarRemainingCount

VeltPresenceTooltipWireframe

Avatar

StatusContainer

UserName

UserActive

UserInactive

Styling

Disable ShadowDOM

​VeltPresenceWireframe

​AvatarList

​Item

​AvatarRemainingCount

​VeltPresenceTooltipWireframe

​Avatar

​StatusContainer

​UserName

​UserActive

​UserInactive

​Styling

​Disable ShadowDOM

VeltPresenceWireframe

AvatarList

Item

AvatarRemainingCount

VeltPresenceTooltipWireframe

Avatar

StatusContainer

UserName

UserActive

UserInactive

Styling

Disable ShadowDOM