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

VeltPresenceWireframe

presence-overview.png

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

AvatarList

presence-avatar-list.png

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

Item

presence-avatar-list-item.png

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

AvatarRemainingCount

presence-avatar-remaining-count.png

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

VeltPresenceTooltipWireframe

presence-tooltip.png

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

Avatar

presence-tooltip-avatar.png

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

StatusContainer

presence-tooltip-avatar-status.png

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

UserName

presence-tooltip-username.png

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

UserActive

presence-tooltip-user-active.png

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

UserInactive

presence-tooltip-user-inactive.png

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

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

<VeltPresence shadowDom={false} />