Open the inbox to see new activity relevant to you
To display notifications and help users keep up with conversation, we strongly recommend using Cord Notification List Launcher.
The InboxLauncher
is a button you can use to open the Inbox
. By default, clicking the launcher will open the inbox in a modal floating next to the button, but you can also configure custom behavior.
You can customize the icon and text on the button, as well as the notification badging style.
As well as the CSS custom properties listed at the bottom of this page, you can use the properties on the Inbox
component to configure the default inbox that appears. For example, to change the width of the popup you can set the --cord-inbox-width
variable in your CSS.
This component pairs well with:
If you use this component's default settings, you do not need to add a separate Inbox
component to your page. However, if you set showInboxOnClick={false}
, then you will need to add a separate Inbox
component. In that case, you can connect the components by adding event listeners for the InboxLauncher
click
event and the Inbox
closeRequested
event and running your own functions as required.
import { InboxLauncher } from "@cord-sdk/react";
export const Example = () => (
<body>
<div id="header">
<InboxLauncher />
</div>
</body>
);
Inbox
. If set to an empty string, the
button will not have a label.Inbox icon
. If set to an empty string, the button will
have no icon.cord-inbox
component in a modal and trigger the
on-click
event. When false, the button will only trigger
the on-click
event. This is useful when you have custom
logic or layout in your application to handle the Inbox
component popup.true
.false
, when the inbox has no unread threads, it will show a completely empty container. If set to true
, it will instead show a placeholder, containing a description of the types of threads a user
will see in the inbox.true
.