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>

​
Title

<VeltWireframe>
    <VeltNotificationsPanelWireframe.Title />
</VeltWireframe>

​
ReadAllButton

<VeltWireframe>
    <VeltNotificationsPanelWireframe.ReadAllButton />
</VeltWireframe>

​
Skeleton

<VeltWireframe>
    <VeltNotificationsPanelWireframe.Skeleton />
</VeltWireframe>

<VeltWireframe>
    <VeltNotificationsPanelWireframe.Header>
        <VeltNotificationsPanelWireframe.Header.TabAll />
        <VeltNotificationsPanelWireframe.Header.TabDocuments />
        <VeltNotificationsPanelWireframe.Header.TabForYou />
        <VeltNotificationsPanelWireframe.Header.TabPeople />
    </VeltNotificationsPanelWireframe.Header>
</VeltWireframe>

​
TabAll

<VeltWireframe>
    <VeltNotificationsPanelWireframe.Header.TabAll />
</VeltWireframe>

​
TabDocuments

<VeltWireframe>
    <VeltNotificationsPanelWireframe.Header.TabDocuments />
</VeltWireframe>

​
TabForYou

<VeltWireframe>
    <VeltNotificationsPanelWireframe.Header.TabForYou />
</VeltWireframe>

​
TabPeople

<VeltWireframe>
    <VeltNotificationsPanelWireframe.Header.TabPeople />
</VeltWireframe>

​
Content

<VeltWireframe>
    <VeltNotificationsPanelWireframe.Content>
        <VeltNotificationsPanelWireframe.Content.ForYou />
        <VeltNotificationsPanelWireframe.Content.All />
        <VeltNotificationsPanelWireframe.Content.Documents />
        <VeltNotificationsPanelWireframe.Content.People />
    </VeltNotificationsPanelWireframe.Content>
</VeltWireframe>

​
ForYou

<VeltWireframe>
    <VeltNotificationsPanelWireframe.Content.ForYou>
        <VeltNotificationsPanelWireframe.Content.List />
        <VeltNotificationsPanelWireframe.Content.LoadMore />
        <VeltNotificationsPanelWireframe.Content.AllReadContainer />
    </VeltNotificationsPanelWireframe.Content.ForYou>
</VeltWireframe>

​
All

<VeltWireframe>
    <VeltNotificationsPanelWireframe.Content.All>
        <VeltNotificationsPanelWireframe.Content.All.List />
        <VeltNotificationsPanelWireframe.Content.AllReadContainer />
    </VeltNotificationsPanelWireframe.Content.All>
</VeltWireframe>

​
All List

<VeltWireframe>
    <VeltNotificationsPanelWireframe.Content.All.List>
        <VeltNotificationsPanelWireframe.Content.All.List.Item />
    </VeltNotificationsPanelWireframe.Content.All.List>
</VeltWireframe>

​
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>

​
All List Item Label

<VeltWireframe>
    <VeltNotificationsPanelWireframe.Content.All.List.Item.Label />
</VeltWireframe>

​
All List Item Content

<VeltWireframe>
    <VeltNotificationsPanelWireframe.Content.All.List.Item.Content>
        <VeltNotificationsPanelWireframe.Content.List />
        <VeltNotificationsPanelWireframe.Content.LoadMore />
    </VeltNotificationsPanelWireframe.Content.All.List.Item.Content>
</VeltWireframe>

​
Documents

<VeltWireframe>
    <VeltNotificationsPanelWireframe.Content.Documents>
        <VeltNotificationsPanelWireframe.Content.Documents.List />
        <VeltNotificationsPanelWireframe.Content.AllReadContainer />
    </VeltNotificationsPanelWireframe.Content.Documents>
</VeltWireframe>

​
Documents List

<VeltWireframe>
    <VeltNotificationsPanelWireframe.Content.Documents.List>
        <VeltNotificationsPanelWireframe.Content.Documents.List.Item />
    </VeltNotificationsPanelWireframe.Content.Documents.List>
</VeltWireframe>

​
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>

​
Documents List Item Unread

<VeltWireframe>
    <VeltNotificationsPanelWireframe.Content.Documents.List.Item.Unread />
</VeltWireframe>

​
Documents List Item Name

<VeltWireframe>
    <VeltNotificationsPanelWireframe.Content.Documents.List.Item.Name />
</VeltWireframe>

​
Documents List Item Count

<VeltWireframe>
    <VeltNotificationsPanelWireframe.Content.Documents.List.Item.Count />
</VeltWireframe>

​
Documents List Item Content

<VeltWireframe>
    <VeltNotificationsPanelWireframe.Content.Documents.List.Item.Content>
        <VeltNotificationsPanelWireframe.Content.List />
        <VeltNotificationsPanelWireframe.Content.LoadMore />
    </VeltNotificationsPanelWireframe.Content.Documents.List.Item.Content>
</VeltWireframe>

​
People

<VeltWireframe>
    <VeltNotificationsPanelWireframe.Content.People>
        <VeltNotificationsPanelWireframe.Content.People.List />
        <VeltNotificationsPanelWireframe.Content.AllReadContainer />
    </VeltNotificationsPanelWireframe.Content.People>
</VeltWireframe>

​
People List

<VeltWireframe>
    <VeltNotificationsPanelWireframe.Content.People.List>
        <VeltNotificationsPanelWireframe.Content.People.List.Item />
    </VeltNotificationsPanelWireframe.Content.People.List>
</VeltWireframe>

​
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>

​
People List Item Avatar

<VeltWireframe>
    <VeltNotificationsPanelWireframe.Content.People.List.Item.Avatar />
</VeltWireframe>

​
People List Item Name

<VeltWireframe>
    <VeltNotificationsPanelWireframe.Content.People.List.Item.Name />
</VeltWireframe>

​
People List Item Count

<VeltWireframe>
    <VeltNotificationsPanelWireframe.Content.People.List.Item.Count />
</VeltWireframe>

​
People List Item Content

<VeltWireframe>
    <VeltNotificationsPanelWireframe.Content.People.List.Item.Content>
        <VeltNotificationsPanelWireframe.Content.List />
        <VeltNotificationsPanelWireframe.Content.LoadMore />
    </VeltNotificationsPanelWireframe.Content.People.List.Item.Content>
</VeltWireframe>

​
Settings

<VeltWireframe>
    <VeltNotificationsPanelWireframe.Settings>
        <VeltNotificationsPanelWireframe.Settings.Header />
        <VeltNotificationsPanelWireframe.Settings.Title />
        <VeltNotificationsPanelWireframe.Settings.Description />
        <VeltNotificationsPanelWireframe.Settings.List />
        <VeltNotificationsPanelWireframe.Settings.Footer />
    </VeltNotificationsPanelWireframe.Settings>
</VeltWireframe>

​
Settings Header

<VeltWireframe>
    <VeltNotificationsPanelWireframe.Settings.Header>
        <VeltNotificationsPanelWireframe.Settings.BackButton />
        <VeltNotificationsPanelWireframe.Settings.Header.Title />
    </VeltNotificationsPanelWireframe.Settings.Header>
</VeltWireframe>

​
Header BackButton

<VeltWireframe>
    <VeltNotificationsPanelWireframe.Settings.BackButton />
</VeltWireframe>

​
Header Title

<VeltWireframe>
    <VeltNotificationsPanelWireframe.Settings.Header.Title />
</VeltWireframe>

​
Settings Title

<VeltWireframe>
    <VeltNotificationsPanelWireframe.Settings.Title />
</VeltWireframe>

​
Settings Description

<VeltWireframe>
    <VeltNotificationsPanelWireframe.Settings.Description />
</VeltWireframe>

​
Settings List

<VeltWireframe>
    <VeltNotificationsPanelWireframe.Settings.List>
        <VeltNotificationsPanelWireframe.Settings.List.Accordion />
    </VeltNotificationsPanelWireframe.Settings.List>
</VeltWireframe>

​
Settings List Accordion

<VeltWireframe>
    <VeltNotificationsPanelWireframe.Settings.List.Accordion>
        <VeltNotificationsPanelWireframe.Settings.List.Accordion.Trigger />
        <VeltNotificationsPanelWireframe.Settings.List.Accordion.Content />
    </VeltNotificationsPanelWireframe.Settings.List.Accordion>
</VeltWireframe>

​
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>

​
Accordion Trigger Label

<VeltWireframe>
    <VeltNotificationsPanelWireframe.Settings.List.Accordion.Trigger.Label />
</VeltWireframe>

​
Accordion Trigger SelectedValue

<VeltWireframe>
    <VeltNotificationsPanelWireframe.Settings.List.Accordion.Trigger.SelectedValue />
</VeltWireframe>

​
Accordion Trigger Icon

<VeltWireframe>
    <VeltNotificationsPanelWireframe.Settings.List.Accordion.Trigger.Icon />
</VeltWireframe>

​
Accordion Content

<VeltWireframe>
    <VeltNotificationsPanelWireframe.Settings.List.Accordion.Content>
        <VeltNotificationsPanelWireframe.Settings.List.Accordion.Content.Item />
    </VeltNotificationsPanelWireframe.Settings.List.Accordion.Content>
</VeltWireframe>

​
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>

​
Accordion Content Item Icon

<VeltWireframe>
    <VeltNotificationsPanelWireframe.Settings.List.Accordion.Content.Item.Icon />
</VeltWireframe>

​
Accordion Content Item Label

<VeltWireframe>
    <VeltNotificationsPanelWireframe.Settings.List.Accordion.Content.Item.Label />
</VeltWireframe>

<VeltWireframe>
    <VeltNotificationsPanelWireframe.Settings.Footer>
        <VeltNotificationsPanelWireframe.Settings.MuteAllTitle />
        <VeltNotificationsPanelWireframe.Settings.MuteAllDescription />
        <VeltNotificationsPanelWireframe.Settings.MuteAllToggle />
    </VeltNotificationsPanelWireframe.Settings.Footer>
</VeltWireframe>

​
MuteAllTitle

<VeltWireframe>
    <VeltNotificationsPanelWireframe.Settings.MuteAllTitle />
</VeltWireframe>

​
MuteAllDescription

<VeltWireframe>
    <VeltNotificationsPanelWireframe.Settings.MuteAllDescription />
</VeltWireframe>

​
MuteAllToggle

<VeltWireframe>
    <VeltNotificationsPanelWireframe.Settings.MuteAllToggle />
</VeltWireframe>

​
Shared Components

​
Content List

<VeltWireframe>
    <VeltNotificationsPanelWireframe.Content.List>
        <VeltNotificationsPanelWireframe.Content.List.Item />
    </VeltNotificationsPanelWireframe.Content.List>
</VeltWireframe>

​
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>

​
Content List Item Avatar

<VeltWireframe>
    <VeltNotificationsPanelWireframe.Content.List.Item.Avatar />
</VeltWireframe>

​
Content List Item Unread

<VeltWireframe>
    <VeltNotificationsPanelWireframe.Content.List.Item.Unread />
</VeltWireframe>

​
Content List Item Headline

<VeltWireframe>
    <VeltNotificationsPanelWireframe.Content.List.Item.Headline />
</VeltWireframe>

​
Content List Item Body

<VeltWireframe>
    <VeltNotificationsPanelWireframe.Content.List.Item.Body />
</VeltWireframe>

​
Content List Item FileName

<VeltWireframe>
    <VeltNotificationsPanelWireframe.Content.List.Item.FileName />
</VeltWireframe>

​
Content List Item Time

<VeltWireframe>
    <VeltNotificationsPanelWireframe.Content.List.Item.Time />
</VeltWireframe>

​
LoadMore

<VeltWireframe>
    <VeltNotificationsPanelWireframe.Content.LoadMore />
</VeltWireframe>

​
AllReadContainer

<VeltWireframe>
    <VeltNotificationsPanelWireframe.Content.AllReadContainer />
</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 
<VeltNotificationsPanel shadowDom={false} />

​
Dark Mode

Default: false 
<VeltNotificationsPanel darkMode={true} />