Concepts
Async Collaboration
- Comments
- In-app Notifications
- Recorder
- Inline Reactions
- Arrows
Realtime Collaboration
- Presence
- Cursors
- Live Selection
- Huddle
- Single Editor Mode
In-app Notifications
Notifications Panel
The Notification Panel contains all notifications within the current organization. It appears when you click the notification tool or embed it directly on a page.
We recommend that you familiarize yourselves with UI Customization Concepts before attempting to modify any components.
Overview
<VeltWireframe>
<VeltNotificationsPanelWireframe>
<VeltNotificationsPanelWireframe.Title />
<VeltNotificationsPanelWireframe.ReadAllButton />
<VeltNotificationsPanelWireframe.SettingsButton />
<VeltNotificationsPanelWireframe.Skeleton />
<VeltNotificationsPanelWireframe.Header />
<VeltNotificationsPanelWireframe.Content />
<VeltNotificationsPanelWireframe.Settings />
</VeltNotificationsPanelWireframe>
</VeltWireframe><VeltWireframe>
<VeltNotificationsPanelWireframe>
<VeltNotificationsPanelWireframe.Title />
<VeltNotificationsPanelWireframe.ReadAllButton />
<VeltNotificationsPanelWireframe.SettingsButton />
<VeltNotificationsPanelWireframe.Skeleton />
<VeltNotificationsPanelWireframe.Header />
<VeltNotificationsPanelWireframe.Content />
<VeltNotificationsPanelWireframe.Settings />
</VeltNotificationsPanelWireframe>
</VeltWireframe><velt-wireframe style="display:none;">
<velt-notifications-panel-wireframe>
<velt-notifications-panel-title-wireframe></velt-notifications-panel-title-wireframe>
<velt-notifications-panel-read-all-button-wireframe></velt-notifications-panel-read-all-button-wireframe>
<velt-notifications-panel-settings-button-wireframe></velt-notifications-panel-settings-button-wireframe>
<velt-notifications-panel-skeleton-wireframe></velt-notifications-panel-skeleton-wireframe>
<velt-notifications-panel-header-wireframe></velt-notifications-panel-header-wireframe>
<velt-notifications-panel-content-wireframe></velt-notifications-panel-content-wireframe>
<velt-notifications-panel-settings-wireframe></velt-notifications-panel-settings-wireframe>
</velt-notifications-panel-wireframe>
</velt-wireframe>Title
<VeltWireframe>
<VeltNotificationsPanelWireframe.Title />
</VeltWireframe><VeltWireframe>
<VeltNotificationsPanelWireframe.Title />
</VeltWireframe><velt-wireframe style="display:none;">
<velt-notifications-panel-title-wireframe></velt-notifications-panel-title-wireframe>
</velt-wireframe>ReadAllButton
<VeltWireframe>
<VeltNotificationsPanelWireframe.ReadAllButton />
</VeltWireframe><VeltWireframe>
<VeltNotificationsPanelWireframe.ReadAllButton />
</VeltWireframe><velt-wireframe style="display:none;">
<velt-notifications-panel-read-all-button-wireframe></velt-notifications-panel-read-all-button-wireframe>
</velt-wireframe>Skeleton
<VeltWireframe>
<VeltNotificationsPanelWireframe.Skeleton />
</VeltWireframe><VeltWireframe>
<VeltNotificationsPanelWireframe.Skeleton />
</VeltWireframe><velt-wireframe style="display:none;">
<velt-notifications-panel-skeleton-wireframe></velt-notifications-panel-skeleton-wireframe>
</velt-wireframe>Header
<VeltWireframe>
<VeltNotificationsPanelWireframe.Header>
<VeltNotificationsPanelWireframe.Header.TabAll />
<VeltNotificationsPanelWireframe.Header.TabDocuments />
<VeltNotificationsPanelWireframe.Header.TabForYou />
<VeltNotificationsPanelWireframe.Header.TabPeople />
</VeltNotificationsPanelWireframe.Header>
</VeltWireframe><VeltWireframe>
<VeltNotificationsPanelWireframe.Header>
<VeltNotificationsPanelWireframe.Header.TabAll />
<VeltNotificationsPanelWireframe.Header.TabDocuments />
<VeltNotificationsPanelWireframe.Header.TabForYou />
<VeltNotificationsPanelWireframe.Header.TabPeople />
</VeltNotificationsPanelWireframe.Header>
</VeltWireframe><velt-wireframe style="display:none;">
<velt-notifications-panel-header-wireframe>
<velt-notifications-panel-header-tab-all-wireframe></velt-notifications-panel-header-tab-all-wireframe>
<velt-notifications-panel-header-tab-documents-wireframe></velt-notifications-panel-header-tab-documents-wireframe>
<velt-notifications-panel-header-tab-for-you-wireframe></velt-notifications-panel-header-tab-for-you-wireframe>
<velt-notifications-panel-header-tab-people-wireframe></velt-notifications-panel-header-tab-people-wireframe>
</velt-notifications-panel-header-wireframe>
</velt-wireframe>TabAll
<VeltWireframe>
<VeltNotificationsPanelWireframe.Header.TabAll />
</VeltWireframe><VeltWireframe>
<VeltNotificationsPanelWireframe.Header.TabAll />
</VeltWireframe><velt-wireframe style="display:none;">
<velt-notifications-panel-header-tab-all-wireframe></velt-notifications-panel-header-tab-all-wireframe>
</velt-wireframe>TabDocuments
<VeltWireframe>
<VeltNotificationsPanelWireframe.Header.TabDocuments />
</VeltWireframe><VeltWireframe>
<VeltNotificationsPanelWireframe.Header.TabDocuments />
</VeltWireframe><velt-wireframe style="display:none;">
<velt-notifications-panel-header-tab-documents-wireframe></velt-notifications-panel-header-tab-documents-wireframe>
</velt-wireframe>TabForYou
<VeltWireframe>
<VeltNotificationsPanelWireframe.Header.TabForYou />
</VeltWireframe><VeltWireframe>
<VeltNotificationsPanelWireframe.Header.TabForYou />
</VeltWireframe><velt-wireframe style="display:none;">
<velt-notifications-panel-header-tab-for-you-wireframe></velt-notifications-panel-header-tab-for-you-wireframe>
</velt-wireframe>TabPeople
<VeltWireframe>
<VeltNotificationsPanelWireframe.Header.TabPeople />
</VeltWireframe><VeltWireframe>
<VeltNotificationsPanelWireframe.Header.TabPeople />
</VeltWireframe><velt-wireframe style="display:none;">
<velt-notifications-panel-header-tab-people-wireframe></velt-notifications-panel-header-tab-people-wireframe>
</velt-wireframe>Content
<VeltWireframe>
<VeltNotificationsPanelWireframe.Content>
<VeltNotificationsPanelWireframe.Content.ForYou />
<VeltNotificationsPanelWireframe.Content.All />
<VeltNotificationsPanelWireframe.Content.Documents />
<VeltNotificationsPanelWireframe.Content.People />
</VeltNotificationsPanelWireframe.Content>
</VeltWireframe><VeltWireframe>
<VeltNotificationsPanelWireframe.Content>
<VeltNotificationsPanelWireframe.Content.ForYou />
<VeltNotificationsPanelWireframe.Content.All />
<VeltNotificationsPanelWireframe.Content.Documents />
<VeltNotificationsPanelWireframe.Content.People />
</VeltNotificationsPanelWireframe.Content>
</VeltWireframe><velt-wireframe style="display:none;">
<velt-notifications-panel-content-wireframe>
<velt-notifications-panel-content-for-you-wireframe></velt-notifications-panel-content-for-you-wireframe>
<velt-notifications-panel-content-all-wireframe></velt-notifications-panel-content-all-wireframe>
<velt-notifications-panel-content-documents-wireframe></velt-notifications-panel-content-documents-wireframe>
<velt-notifications-panel-content-people-wireframe></velt-notifications-panel-content-people-wireframe>
</velt-notifications-panel-content-wireframe>
</velt-wireframe>ForYou
<VeltWireframe>
<VeltNotificationsPanelWireframe.Content.ForYou>
<VeltNotificationsPanelWireframe.Content.List />
<VeltNotificationsPanelWireframe.Content.LoadMore />
<VeltNotificationsPanelWireframe.Content.AllReadContainer />
</VeltNotificationsPanelWireframe.Content.ForYou>
</VeltWireframe><VeltWireframe>
<VeltNotificationsPanelWireframe.Content.ForYou>
<VeltNotificationsPanelWireframe.Content.List />
<VeltNotificationsPanelWireframe.Content.LoadMore />
<VeltNotificationsPanelWireframe.Content.AllReadContainer />
</VeltNotificationsPanelWireframe.Content.ForYou>
</VeltWireframe><velt-wireframe style="display:none;">
<velt-notifications-panel-content-for-you-wireframe>
<velt-notifications-panel-content-list-wireframe></velt-notifications-panel-content-list-wireframe>
<velt-notifications-panel-content-load-more-wireframe></velt-notifications-panel-content-load-more-wireframe>
<velt-notifications-panel-content-all-read-container-wireframe></velt-notifications-panel-content-all-read-container-wireframe>
</velt-notifications-panel-content-for-you-wireframe>
</velt-wireframe>All
<VeltWireframe>
<VeltNotificationsPanelWireframe.Content.All>
<VeltNotificationsPanelWireframe.Content.All.List />
<VeltNotificationsPanelWireframe.Content.AllReadContainer />
</VeltNotificationsPanelWireframe.Content.All>
</VeltWireframe><VeltWireframe>
<VeltNotificationsPanelWireframe.Content.All>
<VeltNotificationsPanelWireframe.Content.All.List />
<VeltNotificationsPanelWireframe.Content.AllReadContainer />
</VeltNotificationsPanelWireframe.Content.All>
</VeltWireframe><velt-wireframe style="display:none;">
<velt-notifications-panel-content-all-wireframe>
<velt-notifications-panel-content-all-list-wireframe></velt-notifications-panel-content-all-list-wireframe>
<velt-notifications-panel-content-all-read-container-wireframe></velt-notifications-panel-content-all-read-container-wireframe>
</velt-notifications-panel-content-all-wireframe>
</velt-wireframe>All List
<VeltWireframe>
<VeltNotificationsPanelWireframe.Content.All.List>
<VeltNotificationsPanelWireframe.Content.All.List.Item />
</VeltNotificationsPanelWireframe.Content.All.List>
</VeltWireframe><VeltWireframe>
<VeltNotificationsPanelWireframe.Content.All.List>
<VeltNotificationsPanelWireframe.Content.All.List.Item />
</VeltNotificationsPanelWireframe.Content.All.List>
</VeltWireframe><velt-wireframe style="display:none;">
<velt-notifications-panel-content-all-list-wireframe>
<velt-notifications-panel-content-all-list-item-wireframe></velt-notifications-panel-content-all-list-item-wireframe>
</velt-notifications-panel-content-all-list-wireframe>
</velt-wireframe>All List Item
<VeltWireframe>
<VeltNotificationsPanelWireframe.Content.All.List.Item>
<VeltNotificationsPanelWireframe.Content.All.List.Item.Label />
<VeltNotificationsPanelWireframe.Content.All.List.Item.Content />
</VeltNotificationsPanelWireframe.Content.All.List.Item>
</VeltWireframe><VeltWireframe>
<VeltNotificationsPanelWireframe.Content.All.List.Item>
<VeltNotificationsPanelWireframe.Content.All.List.Item.Label />
<VeltNotificationsPanelWireframe.Content.All.List.Item.Content />
</VeltNotificationsPanelWireframe.Content.All.List.Item>
</VeltWireframe><velt-wireframe style="display:none;">
<velt-notifications-panel-content-all-list-item-wireframe>
<velt-notifications-panel-content-all-list-item-label-wireframe></velt-notifications-panel-content-all-list-item-label-wireframe>
<velt-notifications-panel-content-all-list-item-content-wireframe></velt-notifications-panel-content-all-list-item-content-wireframe>
</velt-notifications-panel-content-all-list-item-wireframe>
</velt-wireframe>All List Item Label
<VeltWireframe>
<VeltNotificationsPanelWireframe.Content.All.List.Item.Label />
</VeltWireframe><VeltWireframe>
<VeltNotificationsPanelWireframe.Content.All.List.Item.Label />
</VeltWireframe><velt-wireframe style="display:none;">
<velt-notifications-panel-content-all-list-item-label-wireframe></velt-notifications-panel-content-all-list-item-label-wireframe>
</velt-wireframe>All List Item Content
<VeltWireframe>
<VeltNotificationsPanelWireframe.Content.All.List.Item.Content>
<VeltNotificationsPanelWireframe.Content.List />
<VeltNotificationsPanelWireframe.Content.LoadMore />
</VeltNotificationsPanelWireframe.Content.All.List.Item.Content>
</VeltWireframe><VeltWireframe>
<VeltNotificationsPanelWireframe.Content.All.List.Item.Content>
<VeltNotificationsPanelWireframe.Content.List />
<VeltNotificationsPanelWireframe.Content.LoadMore />
</VeltNotificationsPanelWireframe.Content.All.List.Item.Content>
</VeltWireframe><velt-wireframe style="display:none;">
<velt-notifications-panel-content-all-list-item-content-wireframe>
<velt-notifications-panel-content-list-wireframe></velt-notifications-panel-content-list-wireframe>
<velt-notifications-panel-content-load-more-wireframe></velt-notifications-panel-content-load-more-wireframe>
</velt-notifications-panel-content-all-list-item-content-wireframe>
</velt-wireframe>Documents
<VeltWireframe>
<VeltNotificationsPanelWireframe.Content.Documents>
<VeltNotificationsPanelWireframe.Content.Documents.List />
<VeltNotificationsPanelWireframe.Content.AllReadContainer />
</VeltNotificationsPanelWireframe.Content.Documents>
</VeltWireframe><VeltWireframe>
<VeltNotificationsPanelWireframe.Content.Documents>
<VeltNotificationsPanelWireframe.Content.Documents.List />
<VeltNotificationsPanelWireframe.Content.AllReadContainer />
</VeltNotificationsPanelWireframe.Content.Documents>
</VeltWireframe><velt-wireframe style="display:none;">
<velt-notifications-panel-content-documents-wireframe>
<velt-notifications-panel-content-documents-list-wireframe></velt-notifications-panel-content-documents-list-wireframe>
<velt-notifications-panel-content-all-read-container-wireframe></velt-notifications-panel-content-all-read-container-wireframe>
</velt-notifications-panel-content-documents-wireframe>
</velt-wireframe>Documents List
<VeltWireframe>
<VeltNotificationsPanelWireframe.Content.Documents.List>
<VeltNotificationsPanelWireframe.Content.Documents.List.Item />
</VeltNotificationsPanelWireframe.Content.Documents.List>
</VeltWireframe><VeltWireframe>
<VeltNotificationsPanelWireframe.Content.Documents.List>
<VeltNotificationsPanelWireframe.Content.Documents.List.Item />
</VeltNotificationsPanelWireframe.Content.Documents.List>
</VeltWireframe><velt-wireframe style="display:none;">
<velt-notifications-panel-content-documents-list-wireframe>
<velt-notifications-panel-content-documents-list-item-wireframe></velt-notifications-panel-content-documents-list-item-wireframe>
</velt-notifications-panel-content-documents-list-wireframe>
</velt-wireframe>Documents List Item
<VeltWireframe>
<VeltNotificationsPanelWireframe.Content.Documents.List.Item>
<VeltNotificationsPanelWireframe.Content.Documents.List.Item.Unread />
<VeltNotificationsPanelWireframe.Content.Documents.List.Item.Name />
<VeltNotificationsPanelWireframe.Content.Documents.List.Item.Count />
<VeltNotificationsPanelWireframe.Content.Documents.List.Item.Content />
</VeltNotificationsPanelWireframe.Content.Documents.List.Item>
</VeltWireframe><VeltWireframe>
<VeltNotificationsPanelWireframe.Content.Documents.List.Item>
<VeltNotificationsPanelWireframe.Content.Documents.List.Item.Unread />
<VeltNotificationsPanelWireframe.Content.Documents.List.Item.Name />
<VeltNotificationsPanelWireframe.Content.Documents.List.Item.Count />
<VeltNotificationsPanelWireframe.Content.Documents.List.Item.Content />
</VeltNotificationsPanelWireframe.Content.Documents.List.Item>
</VeltWireframe><velt-wireframe style="display:none;">
<velt-notifications-panel-content-documents-list-item-wireframe>
<velt-notifications-panel-content-documents-list-item-unread-wireframe></velt-notifications-panel-content-documents-list-item-unread-wireframe>
<velt-notifications-panel-content-documents-list-item-name-wireframe></velt-notifications-panel-content-documents-list-item-name-wireframe>
<velt-notifications-panel-content-documents-list-item-count-wireframe></velt-notifications-panel-content-documents-list-item-count-wireframe>
<velt-notifications-panel-content-documents-list-item-content-wireframe></velt-notifications-panel-content-documents-list-item-content-wireframe>
</velt-notifications-panel-content-documents-list-item-wireframe>
</velt-wireframe>Documents List Item Unread
<VeltWireframe>
<VeltNotificationsPanelWireframe.Content.Documents.List.Item.Unread />
</VeltWireframe><VeltWireframe>
<VeltNotificationsPanelWireframe.Content.Documents.List.Item.Unread />
</VeltWireframe><velt-wireframe style="display:none;">
<velt-notifications-panel-content-documents-list-item-unread-wireframe></velt-notifications-panel-content-documents-list-item-unread-wireframe>
</velt-wireframe>Documents List Item Name
<VeltWireframe>
<VeltNotificationsPanelWireframe.Content.Documents.List.Item.Name />
</VeltWireframe><VeltWireframe>
<VeltNotificationsPanelWireframe.Content.Documents.List.Item.Name />
</VeltWireframe><velt-wireframe style="display:none;">
<velt-notifications-panel-content-documents-list-item-name-wireframe></velt-notifications-panel-content-documents-list-item-name-wireframe>
</velt-wireframe>Documents List Item Count
<VeltWireframe>
<VeltNotificationsPanelWireframe.Content.Documents.List.Item.Count />
</VeltWireframe><VeltWireframe>
<VeltNotificationsPanelWireframe.Content.Documents.List.Item.Count />
</VeltWireframe><velt-wireframe style="display:none;">
<velt-notifications-panel-content-documents-list-item-count-wireframe></velt-notifications-panel-content-documents-list-item-count-wireframe>
</velt-wireframe>Documents List Item Content
<VeltWireframe>
<VeltNotificationsPanelWireframe.Content.Documents.List.Item.Content>
<VeltNotificationsPanelWireframe.Content.List />
<VeltNotificationsPanelWireframe.Content.LoadMore />
</VeltNotificationsPanelWireframe.Content.Documents.List.Item.Content>
</VeltWireframe><VeltWireframe>
<VeltNotificationsPanelWireframe.Content.Documents.List.Item.Content>
<VeltNotificationsPanelWireframe.Content.List />
<VeltNotificationsPanelWireframe.Content.LoadMore />
</VeltNotificationsPanelWireframe.Content.Documents.List.Item.Content>
</VeltWireframe><velt-wireframe style="display:none;">
<velt-notifications-panel-content-documents-list-item-content-wireframe>
<velt-notifications-panel-content-list-wireframe></velt-notifications-panel-content-list-wireframe>
<velt-notifications-panel-content-load-more-wireframe></velt-notifications-panel-content-load-more-wireframe>
</velt-notifications-panel-content-documents-list-item-content-wireframe>
</velt-wireframe>People
<VeltWireframe>
<VeltNotificationsPanelWireframe.Content.People>
<VeltNotificationsPanelWireframe.Content.People.List />
<VeltNotificationsPanelWireframe.Content.AllReadContainer />
</VeltNotificationsPanelWireframe.Content.People>
</VeltWireframe><VeltWireframe>
<VeltNotificationsPanelWireframe.Content.People>
<VeltNotificationsPanelWireframe.Content.People.List />
<VeltNotificationsPanelWireframe.Content.AllReadContainer />
</VeltNotificationsPanelWireframe.Content.People>
</VeltWireframe><velt-wireframe style="display:none;">
<velt-notifications-panel-content-people-wireframe>
<velt-notifications-panel-content-people-list-wireframe></velt-notifications-panel-content-people-list-wireframe>
<velt-notifications-panel-content-all-read-container-wireframe></velt-notifications-panel-content-all-read-container-wireframe>
</velt-notifications-panel-content-people-wireframe>
</velt-wireframe>People List
<VeltWireframe>
<VeltNotificationsPanelWireframe.Content.People.List>
<VeltNotificationsPanelWireframe.Content.People.List.Item />
</VeltNotificationsPanelWireframe.Content.People.List>
</VeltWireframe><VeltWireframe>
<VeltNotificationsPanelWireframe.Content.People.List>
<VeltNotificationsPanelWireframe.Content.People.List.Item />
</VeltNotificationsPanelWireframe.Content.People.List>
</VeltWireframe><velt-wireframe style="display:none;">
<velt-notifications-panel-content-people-list-wireframe>
<velt-notifications-panel-content-people-list-item-wireframe></velt-notifications-panel-content-people-list-item-wireframe>
</velt-notifications-panel-content-people-list-wireframe>
</velt-wireframe>People List Item
<VeltWireframe>
<VeltNotificationsPanelWireframe.Content.People.List.Item>
<VeltNotificationsPanelWireframe.Content.People.List.Item.Avatar />
<VeltNotificationsPanelWireframe.Content.People.List.Item.Name />
<VeltNotificationsPanelWireframe.Content.People.List.Item.Count />
<VeltNotificationsPanelWireframe.Content.People.List.Item.Content />
</VeltNotificationsPanelWireframe.Content.People.List.Item>
</VeltWireframe><VeltWireframe>
<VeltNotificationsPanelWireframe.Content.People.List.Item>
<VeltNotificationsPanelWireframe.Content.People.List.Item.Avatar />
<VeltNotificationsPanelWireframe.Content.People.List.Item.Name />
<VeltNotificationsPanelWireframe.Content.People.List.Item.Count />
<VeltNotificationsPanelWireframe.Content.People.List.Item.Content />
</VeltNotificationsPanelWireframe.Content.People.List.Item>
</VeltWireframe><velt-wireframe style="display:none;">
<velt-notifications-panel-content-people-list-item-wireframe>
<velt-notifications-panel-content-people-list-item-avatar-wireframe></velt-notifications-panel-content-people-list-item-avatar-wireframe>
<velt-notifications-panel-content-people-list-item-name-wireframe></velt-notifications-panel-content-people-list-item-name-wireframe>
<velt-notifications-panel-content-people-list-item-count-wireframe></velt-notifications-panel-content-people-list-item-count-wireframe>
<velt-notifications-panel-content-people-list-item-content-wireframe></velt-notifications-panel-content-people-list-item-content-wireframe>
</velt-notifications-panel-content-people-list-item-wireframe>
</velt-wireframe>People List Item Avatar
<VeltWireframe>
<VeltNotificationsPanelWireframe.Content.People.List.Item.Avatar />
</VeltWireframe><VeltWireframe>
<VeltNotificationsPanelWireframe.Content.People.List.Item.Avatar />
</VeltWireframe><velt-wireframe style="display:none;">
<velt-notifications-panel-content-people-list-item-avatar-wireframe></velt-notifications-panel-content-people-list-item-avatar-wireframe>
</velt-wireframe>People List Item Name
<VeltWireframe>
<VeltNotificationsPanelWireframe.Content.People.List.Item.Name />
</VeltWireframe><VeltWireframe>
<VeltNotificationsPanelWireframe.Content.People.List.Item.Name />
</VeltWireframe><velt-wireframe style="display:none;">
<velt-notifications-panel-content-people-list-item-name-wireframe></velt-notifications-panel-content-people-list-item-name-wireframe>
</velt-wireframe>People List Item Count
<VeltWireframe>
<VeltNotificationsPanelWireframe.Content.People.List.Item.Count />
</VeltWireframe><VeltWireframe>
<VeltNotificationsPanelWireframe.Content.People.List.Item.Count />
</VeltWireframe><velt-wireframe style="display:none;">
<velt-notifications-panel-content-people-list-item-count-wireframe></velt-notifications-panel-content-people-list-item-count-wireframe>
</velt-wireframe>People List Item Content
<VeltWireframe>
<VeltNotificationsPanelWireframe.Content.People.List.Item.Content>
<VeltNotificationsPanelWireframe.Content.List />
<VeltNotificationsPanelWireframe.Content.LoadMore />
</VeltNotificationsPanelWireframe.Content.People.List.Item.Content>
</VeltWireframe><VeltWireframe>
<VeltNotificationsPanelWireframe.Content.People.List.Item.Content>
<VeltNotificationsPanelWireframe.Content.List />
<VeltNotificationsPanelWireframe.Content.LoadMore />
</VeltNotificationsPanelWireframe.Content.People.List.Item.Content>
</VeltWireframe><velt-wireframe style="display:none;">
<velt-notifications-panel-content-people-list-item-content-wireframe>
<velt-notifications-panel-content-list-wireframe></velt-notifications-panel-content-list-wireframe>
<velt-notifications-panel-content-load-more-wireframe></velt-notifications-panel-content-load-more-wireframe>
</velt-notifications-panel-content-people-list-item-content-wireframe>
</velt-wireframe>Settings
<VeltWireframe>
<VeltNotificationsPanelWireframe.Settings>
<VeltNotificationsPanelWireframe.Settings.Header />
<VeltNotificationsPanelWireframe.Settings.Title />
<VeltNotificationsPanelWireframe.Settings.Description />
<VeltNotificationsPanelWireframe.Settings.List />
<VeltNotificationsPanelWireframe.Settings.Footer />
</VeltNotificationsPanelWireframe.Settings>
</VeltWireframe><VeltWireframe>
<VeltNotificationsPanelWireframe.Settings>
<VeltNotificationsPanelWireframe.Settings.Header />
<VeltNotificationsPanelWireframe.Settings.Title />
<VeltNotificationsPanelWireframe.Settings.Description />
<VeltNotificationsPanelWireframe.Settings.List />
<VeltNotificationsPanelWireframe.Settings.Footer />
</VeltNotificationsPanelWireframe.Settings>
</VeltWireframe><velt-wireframe style="display:none;">
<velt-notifications-panel-settings-wireframe>
<velt-notifications-panel-settings-header-wireframe></velt-notifications-panel-settings-header-wireframe>
<velt-notifications-panel-settings-title-wireframe></velt-notifications-panel-settings-title-wireframe>
<velt-notifications-panel-settings-description-wireframe></velt-notifications-panel-settings-description-wireframe>
<velt-notifications-panel-settings-list-wireframe></velt-notifications-panel-settings-list-wireframe>
<velt-notifications-panel-settings-footer-wireframe></velt-notifications-panel-settings-footer-wireframe>
</velt-notifications-panel-settings-wireframe>
</velt-wireframe>Settings Header
<VeltWireframe>
<VeltNotificationsPanelWireframe.Settings.Header>
<VeltNotificationsPanelWireframe.Settings.BackButton />
<VeltNotificationsPanelWireframe.Settings.Header.Title />
</VeltNotificationsPanelWireframe.Settings.Header>
</VeltWireframe><VeltWireframe>
<VeltNotificationsPanelWireframe.Settings.Header>
<VeltNotificationsPanelWireframe.Settings.BackButton />
<VeltNotificationsPanelWireframe.Settings.Header.Title />
</VeltNotificationsPanelWireframe.Settings.Header>
</VeltWireframe><velt-wireframe style="display:none;">
<velt-notifications-panel-settings-header-wireframe>
<velt-notifications-panel-settings-back-button-wireframe></velt-notifications-panel-settings-back-button-wireframe>
<velt-notifications-panel-settings-header-title-wireframe></velt-notifications-panel-settings-header-title-wireframe>
</velt-notifications-panel-settings-header-wireframe>
</velt-wireframe>Header BackButton
<VeltWireframe>
<VeltNotificationsPanelWireframe.Settings.BackButton />
</VeltWireframe><VeltWireframe>
<VeltNotificationsPanelWireframe.Settings.BackButton />
</VeltWireframe><velt-wireframe style="display:none;">
<velt-notifications-panel-settings-back-button-wireframe></velt-notifications-panel-settings-back-button-wireframe>
</velt-wireframe>Header Title
<VeltWireframe>
<VeltNotificationsPanelWireframe.Settings.Header.Title />
</VeltWireframe><VeltWireframe>
<VeltNotificationsPanelWireframe.Settings.Header.Title />
</VeltWireframe><velt-wireframe style="display:none;">
<velt-notifications-panel-settings-header-title-wireframe></velt-notifications-panel-settings-header-title-wireframe>
</velt-wireframe>Settings Title
<VeltWireframe>
<VeltNotificationsPanelWireframe.Settings.Title />
</VeltWireframe><VeltWireframe>
<VeltNotificationsPanelWireframe.Settings.Title />
</VeltWireframe><velt-wireframe style="display:none;">
<velt-notifications-panel-settings-title-wireframe></velt-notifications-panel-settings-title-wireframe>
</velt-wireframe>Settings Description
<VeltWireframe>
<VeltNotificationsPanelWireframe.Settings.Description />
</VeltWireframe><VeltWireframe>
<VeltNotificationsPanelWireframe.Settings.Description />
</VeltWireframe><velt-wireframe style="display:none;">
<velt-notifications-panel-settings-description-wireframe></velt-notifications-panel-settings-description-wireframe>
</velt-wireframe>Settings List
<VeltWireframe>
<VeltNotificationsPanelWireframe.Settings.List>
<VeltNotificationsPanelWireframe.Settings.List.Accordion />
</VeltNotificationsPanelWireframe.Settings.List>
</VeltWireframe><VeltWireframe>
<VeltNotificationsPanelWireframe.Settings.List>
<VeltNotificationsPanelWireframe.Settings.List.Accordion />
</VeltNotificationsPanelWireframe.Settings.List>
</VeltWireframe><velt-wireframe style="display:none;">
<velt-notifications-panel-settings-list-wireframe>
<velt-notifications-panel-settings-accordion-wireframe></velt-notifications-panel-settings-accordion-wireframe>
</velt-notifications-panel-settings-list-wireframe>
</velt-wireframe>Settings List Accordion
<VeltWireframe>
<VeltNotificationsPanelWireframe.Settings.List.Accordion>
<VeltNotificationsPanelWireframe.Settings.List.Accordion.Trigger />
<VeltNotificationsPanelWireframe.Settings.List.Accordion.Content />
</VeltNotificationsPanelWireframe.Settings.List.Accordion>
</VeltWireframe><VeltWireframe>
<VeltNotificationsPanelWireframe.Settings.List.Accordion>
<VeltNotificationsPanelWireframe.Settings.List.Accordion.Trigger />
<VeltNotificationsPanelWireframe.Settings.List.Accordion.Content />
</VeltNotificationsPanelWireframe.Settings.List.Accordion>
</VeltWireframe><velt-wireframe style="display:none;">
<velt-notifications-panel-settings-accordion-wireframe>
<velt-notifications-panel-settings-accordion-trigger-wireframe></velt-notifications-panel-settings-accordion-trigger-wireframe>
<velt-notifications-panel-settings-accordion-content-wireframe></velt-notifications-panel-settings-accordion-content-wireframe>
</velt-notifications-panel-settings-accordion-wireframe>
</velt-wireframe>Accordion Trigger
<VeltWireframe>
<VeltNotificationsPanelWireframe.Settings.List.Accordion.Trigger>
<VeltNotificationsPanelWireframe.Settings.List.Accordion.Trigger.Label />
<VeltNotificationsPanelWireframe.Settings.List.Accordion.Trigger.SelectedValue />
<VeltNotificationsPanelWireframe.Settings.List.Accordion.Trigger.Icon />
</VeltNotificationsPanelWireframe.Settings.List.Accordion.Trigger>
</VeltWireframe><VeltWireframe>
<VeltNotificationsPanelWireframe.Settings.List.Accordion.Trigger>
<VeltNotificationsPanelWireframe.Settings.List.Accordion.Trigger.Label />
<VeltNotificationsPanelWireframe.Settings.List.Accordion.Trigger.SelectedValue />
<VeltNotificationsPanelWireframe.Settings.List.Accordion.Trigger.Icon />
</VeltNotificationsPanelWireframe.Settings.List.Accordion.Trigger>
</VeltWireframe><velt-wireframe style="display:none;">
<velt-notifications-panel-settings-accordion-trigger-wireframe>
<velt-notifications-panel-settings-accordion-trigger-label-wireframe></velt-notifications-panel-settings-accordion-trigger-label-wireframe>
<velt-notifications-panel-settings-accordion-trigger-selected-value-wireframe></velt-notifications-panel-settings-accordion-trigger-selected-value-wireframe>
<velt-notifications-panel-settings-accordion-trigger-icon-wireframe></velt-notifications-panel-settings-accordion-trigger-icon-wireframe>
</velt-notifications-panel-settings-accordion-trigger-wireframe>
</velt-wireframe>Accordion Trigger Label
<VeltWireframe>
<VeltNotificationsPanelWireframe.Settings.List.Accordion.Trigger.Label />
</VeltWireframe><VeltWireframe>
<VeltNotificationsPanelWireframe.Settings.List.Accordion.Trigger.Label />
</VeltWireframe><velt-wireframe style="display:none;">
<velt-notifications-panel-settings-accordion-trigger-label-wireframe></velt-notifications-panel-settings-accordion-trigger-label-wireframe>
</velt-wireframe>Accordion Trigger SelectedValue
<VeltWireframe>
<VeltNotificationsPanelWireframe.Settings.List.Accordion.Trigger.SelectedValue />
</VeltWireframe><VeltWireframe>
<VeltNotificationsPanelWireframe.Settings.List.Accordion.Trigger.SelectedValue />
</VeltWireframe><velt-wireframe style="display:none;">
<velt-notifications-panel-settings-accordion-trigger-selected-value-wireframe></velt-notifications-panel-settings-accordion-trigger-selected-value-wireframe>
</velt-wireframe>Accordion Trigger Icon
<VeltWireframe>
<VeltNotificationsPanelWireframe.Settings.List.Accordion.Trigger.Icon />
</VeltWireframe><VeltWireframe>
<VeltNotificationsPanelWireframe.Settings.List.Accordion.Trigger.Icon />
</VeltWireframe><velt-wireframe style="display:none;">
<velt-notifications-panel-settings-accordion-trigger-icon-wireframe></velt-notifications-panel-settings-accordion-trigger-icon-wireframe>
</velt-wireframe>Accordion Content
<VeltWireframe>
<VeltNotificationsPanelWireframe.Settings.List.Accordion.Content>
<VeltNotificationsPanelWireframe.Settings.List.Accordion.Content.Item />
</VeltNotificationsPanelWireframe.Settings.List.Accordion.Content>
</VeltWireframe><VeltWireframe>
<VeltNotificationsPanelWireframe.Settings.List.Accordion.Content>
<VeltNotificationsPanelWireframe.Settings.List.Accordion.Content.Item />
</VeltNotificationsPanelWireframe.Settings.List.Accordion.Content>
</VeltWireframe><velt-wireframe style="display:none;">
<velt-notifications-panel-settings-accordion-content-wireframe>
<velt-notifications-panel-settings-accordion-content-item-wireframe></velt-notifications-panel-settings-accordion-content-item-wireframe>
</velt-notifications-panel-settings-accordion-content-wireframe>
</velt-wireframe>Accordion Content Item
<VeltWireframe>
<VeltNotificationsPanelWireframe.Settings.List.Accordion.Content.Item>
<VeltNotificationsPanelWireframe.Settings.List.Accordion.Content.Item.Icon />
<VeltNotificationsPanelWireframe.Settings.List.Accordion.Content.Item.Label />
</VeltNotificationsPanelWireframe.Settings.List.Accordion.Content.Item>
</VeltWireframe><VeltWireframe>
<VeltNotificationsPanelWireframe.Settings.List.Accordion.Content.Item>
<VeltNotificationsPanelWireframe.Settings.List.Accordion.Content.Item.Icon />
<VeltNotificationsPanelWireframe.Settings.List.Accordion.Content.Item.Label />
</VeltNotificationsPanelWireframe.Settings.List.Accordion.Content.Item>
</VeltWireframe><velt-wireframe style="display:none;">
<velt-notifications-panel-settings-accordion-content-item-wireframe>
<velt-notifications-panel-settings-accordion-content-item-icon-wireframe></velt-notifications-panel-settings-accordion-content-item-icon-wireframe>
<velt-notifications-panel-settings-accordion-content-item-label-wireframe></velt-notifications-panel-settings-accordion-content-item-label-wireframe>
</velt-notifications-panel-settings-accordion-content-item-wireframe>
</velt-wireframe>Accordion Content Item Icon
<VeltWireframe>
<VeltNotificationsPanelWireframe.Settings.List.Accordion.Content.Item.Icon />
</VeltWireframe><VeltWireframe>
<VeltNotificationsPanelWireframe.Settings.List.Accordion.Content.Item.Icon />
</VeltWireframe><velt-wireframe style="display:none;">
<velt-notifications-panel-settings-accordion-content-item-icon-wireframe></velt-notifications-panel-settings-accordion-content-item-icon-wireframe>
</velt-wireframe>Accordion Content Item Label
<VeltWireframe>
<VeltNotificationsPanelWireframe.Settings.List.Accordion.Content.Item.Label />
</VeltWireframe><VeltWireframe>
<VeltNotificationsPanelWireframe.Settings.List.Accordion.Content.Item.Label />
</VeltWireframe><velt-wireframe style="display:none;">
<velt-notifications-panel-settings-accordion-content-item-label-wireframe></velt-notifications-panel-settings-accordion-content-item-label-wireframe>
</velt-wireframe>Settings Footer
<VeltWireframe>
<VeltNotificationsPanelWireframe.Settings.Footer>
<VeltNotificationsPanelWireframe.Settings.MuteAllTitle />
<VeltNotificationsPanelWireframe.Settings.MuteAllDescription />
<VeltNotificationsPanelWireframe.Settings.MuteAllToggle />
</VeltNotificationsPanelWireframe.Settings.Footer>
</VeltWireframe><VeltWireframe>
<VeltNotificationsPanelWireframe.Settings.Footer>
<VeltNotificationsPanelWireframe.Settings.MuteAllTitle />
<VeltNotificationsPanelWireframe.Settings.MuteAllDescription />
<VeltNotificationsPanelWireframe.Settings.MuteAllToggle />
</VeltNotificationsPanelWireframe.Settings.Footer>
</VeltWireframe><velt-wireframe style="display:none;">
<velt-notifications-panel-settings-footer-wireframe>
<velt-notifications-panel-settings-mute-all-title-wireframe></velt-notifications-panel-settings-mute-all-title-wireframe>
<velt-notifications-panel-settings-mute-all-description-wireframe></velt-notifications-panel-settings-mute-all-description-wireframe>
<velt-notifications-panel-settings-mute-all-toggle-wireframe></velt-notifications-panel-settings-mute-all-toggle-wireframe>
</velt-notifications-panel-settings-footer-wireframe>
</velt-wireframe>MuteAllTitle
<VeltWireframe>
<VeltNotificationsPanelWireframe.Settings.MuteAllTitle />
</VeltWireframe><VeltWireframe>
<VeltNotificationsPanelWireframe.Settings.MuteAllTitle />
</VeltWireframe><velt-wireframe style="display:none;">
<velt-notifications-panel-settings-mute-all-title-wireframe></velt-notifications-panel-settings-mute-all-title-wireframe>
</velt-wireframe>MuteAllDescription
<VeltWireframe>
<VeltNotificationsPanelWireframe.Settings.MuteAllDescription />
</VeltWireframe><VeltWireframe>
<VeltNotificationsPanelWireframe.Settings.MuteAllDescription />
</VeltWireframe><velt-wireframe style="display:none;">
<velt-notifications-panel-settings-mute-all-description-wireframe></velt-notifications-panel-settings-mute-all-description-wireframe>
</velt-wireframe>MuteAllToggle
<VeltWireframe>
<VeltNotificationsPanelWireframe.Settings.MuteAllToggle />
</VeltWireframe><VeltWireframe>
<VeltNotificationsPanelWireframe.Settings.MuteAllToggle />
</VeltWireframe><velt-wireframe style="display:none;">
<velt-notifications-panel-settings-mute-all-toggle-wireframe></velt-notifications-panel-settings-mute-all-toggle-wireframe>
</velt-wireframe>Shared Components
Content List
<VeltWireframe>
<VeltNotificationsPanelWireframe.Content.List>
<VeltNotificationsPanelWireframe.Content.List.Item />
</VeltNotificationsPanelWireframe.Content.List>
</VeltWireframe><VeltWireframe>
<VeltNotificationsPanelWireframe.Content.List>
<VeltNotificationsPanelWireframe.Content.List.Item />
</VeltNotificationsPanelWireframe.Content.List>
</VeltWireframe><velt-wireframe style="display:none;">
<velt-notifications-panel-content-list-wireframe>
<velt-notifications-panel-content-list-item-wireframe></velt-notifications-panel-content-list-item-wireframe>
</velt-notifications-panel-content-list-wireframe>
</velt-wireframe>Content List Item
<VeltWireframe>
<VeltNotificationsPanelWireframe.Content.List.Item>
<VeltNotificationsPanelWireframe.Content.List.Item.Avatar />
<VeltNotificationsPanelWireframe.Content.List.Item.Unread />
<VeltNotificationsPanelWireframe.Content.List.Item.Headline />
<VeltNotificationsPanelWireframe.Content.List.Item.Body />
<VeltNotificationsPanelWireframe.Content.List.Item.FileName />
<VeltNotificationsPanelWireframe.Content.List.Item.Time />
</VeltNotificationsPanelWireframe.Content.List.Item>
</VeltWireframe><VeltWireframe>
<VeltNotificationsPanelWireframe.Content.List.Item>
<VeltNotificationsPanelWireframe.Content.List.Item.Avatar />
<VeltNotificationsPanelWireframe.Content.List.Item.Unread />
<VeltNotificationsPanelWireframe.Content.List.Item.Headline />
<VeltNotificationsPanelWireframe.Content.List.Item.Body />
<VeltNotificationsPanelWireframe.Content.List.Item.FileName />
<VeltNotificationsPanelWireframe.Content.List.Item.Time />
</VeltNotificationsPanelWireframe.Content.List.Item>
</VeltWireframe><velt-wireframe style="display:none;">
<velt-notifications-panel-content-list-item-wireframe>
<velt-notifications-panel-content-list-item-avatar-wireframe></velt-notifications-panel-content-list-item-avatar-wireframe>
<velt-notifications-panel-content-list-item-unread-wireframe></velt-notifications-panel-content-list-item-unread-wireframe>
<velt-notifications-panel-content-list-item-headline-wireframe></velt-notifications-panel-content-list-item-headline-wireframe>
<velt-notifications-panel-content-list-item-body-wireframe></velt-notifications-panel-content-list-item-body-wireframe>
<velt-notifications-panel-content-list-item-file-name-wireframe></velt-notifications-panel-content-list-item-file-name-wireframe>
<velt-notifications-panel-content-list-item-time-wireframe></velt-notifications-panel-content-list-item-time-wireframe>
</velt-notifications-panel-content-list-item-wireframe>
</velt-wireframe>Content List Item Avatar
<VeltWireframe>
<VeltNotificationsPanelWireframe.Content.List.Item.Avatar />
</VeltWireframe><VeltWireframe>
<VeltNotificationsPanelWireframe.Content.List.Item.Avatar />
</VeltWireframe><velt-wireframe style="display:none;">
<velt-notifications-panel-content-list-item-avatar-wireframe></velt-notifications-panel-content-list-item-avatar-wireframe>
</velt-wireframe>Content List Item Unread
<VeltWireframe>
<VeltNotificationsPanelWireframe.Content.List.Item.Unread />
</VeltWireframe><VeltWireframe>
<VeltNotificationsPanelWireframe.Content.List.Item.Unread />
</VeltWireframe><velt-wireframe style="display:none;">
<velt-notifications-panel-content-list-item-unread-wireframe></velt-notifications-panel-content-list-item-unread-wireframe>
</velt-wireframe>Content List Item Headline
<VeltWireframe>
<VeltNotificationsPanelWireframe.Content.List.Item.Headline />
</VeltWireframe><VeltWireframe>
<VeltNotificationsPanelWireframe.Content.List.Item.Headline />
</VeltWireframe><velt-wireframe style="display:none;">
<velt-notifications-panel-content-list-item-headline-wireframe></velt-notifications-panel-content-list-item-headline-wireframe>
</velt-wireframe>Content List Item Body
<VeltWireframe>
<VeltNotificationsPanelWireframe.Content.List.Item.Body />
</VeltWireframe><VeltWireframe>
<VeltNotificationsPanelWireframe.Content.List.Item.Body />
</VeltWireframe><velt-wireframe style="display:none;">
<velt-notifications-panel-content-list-item-body-wireframe></velt-notifications-panel-content-list-item-body-wireframe>
</velt-wireframe>Content List Item FileName
<VeltWireframe>
<VeltNotificationsPanelWireframe.Content.List.Item.FileName />
</VeltWireframe><VeltWireframe>
<VeltNotificationsPanelWireframe.Content.List.Item.FileName />
</VeltWireframe><velt-wireframe style="display:none;">
<velt-notifications-panel-content-list-item-file-name-wireframe></velt-notifications-panel-content-list-item-file-name-wireframe>
</velt-wireframe>Content List Item Time
<VeltWireframe>
<VeltNotificationsPanelWireframe.Content.List.Item.Time />
</VeltWireframe><VeltWireframe>
<VeltNotificationsPanelWireframe.Content.List.Item.Time />
</VeltWireframe><velt-wireframe style="display:none;">
<velt-notifications-panel-content-list-item-time-wireframe></velt-notifications-panel-content-list-item-time-wireframe>
</velt-wireframe>LoadMore
<VeltWireframe>
<VeltNotificationsPanelWireframe.Content.LoadMore />
</VeltWireframe><VeltWireframe>
<VeltNotificationsPanelWireframe.Content.LoadMore />
</VeltWireframe><velt-wireframe style="display:none;">
<velt-notifications-panel-content-load-more-wireframe></velt-notifications-panel-content-load-more-wireframe>
</velt-wireframe>AllReadContainer
<VeltWireframe>
<VeltNotificationsPanelWireframe.Content.AllReadContainer />
</VeltWireframe><VeltWireframe>
<VeltNotificationsPanelWireframe.Content.AllReadContainer />
</VeltWireframe><velt-wireframe style="display:none;">
<velt-notifications-panel-content-all-read-container-wireframe></velt-notifications-panel-content-all-read-container-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
<VeltNotificationsPanel shadowDom={false} /><VeltNotificationsPanel shadowDom={false} /><velt-notifications-panel shadow-dom="false"></velt-notifications-panel>Dark Mode
Default: false
<VeltNotificationsPanel darkMode={true} /><VeltNotificationsPanel darkMode={true} /><velt-notifications-panel dark-mode="true"></velt-notifications-panel>Was this page helpful?
On this page
- Overview
- Title
- ReadAllButton
- Skeleton
- Header
- TabAll
- TabDocuments
- TabForYou
- TabPeople
- Content
- ForYou
- All
- All List
- All List Item
- All List Item Label
- All List Item Content
- Documents
- Documents List
- Documents List Item
- Documents List Item Unread
- Documents List Item Name
- Documents List Item Count
- Documents List Item Content
- People
- People List
- People List Item
- People List Item Avatar
- People List Item Name
- People List Item Count
- People List Item Content
- Settings
- Settings Header
- Header BackButton
- Header Title
- Settings Title
- Settings Description
- Settings List
- Settings List Accordion
- Accordion Trigger
- Accordion Trigger Label
- Accordion Trigger SelectedValue
- Accordion Trigger Icon
- Accordion Content
- Accordion Content Item
- Accordion Content Item Icon
- Accordion Content Item Label
- Settings Footer
- MuteAllTitle
- MuteAllDescription
- MuteAllToggle
- Shared Components
- Content List
- Content List Item
- Content List Item Avatar
- Content List Item Unread
- Content List Item Headline
- Content List Item Body
- Content List Item FileName
- Content List Item Time
- LoadMore
- AllReadContainer
- Styling
- Disable ShadowDOM
- Dark Mode
Assistant
Responses are generated using AI and may contain mistakes.