Cord LogoDocs
Sign inStart now

Inbox (Deprecated)

Components /
Ask the Community

Find all messages relevant to you, in one handy place

Cord Inbox has been deprecated and is no longer being actively developed.

To display notifications and help users keep up with conversation, we strongly recommend using Cord Notification List.

Live Demo

When to use #

The Inbox is where you can find new and recent messages that you are subscribed to. If enabled, this is also where users can find the settings page.

This component pairs well with:

How to use #

If you use the <InboxLauncher /> with default settings, you do not need to add a separate <Inbox /> component to your page. However, if you use the <InboxLauncher /> and 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 /> onClick event handler and the <Inbox /> closeRequested event handler and running your own functions as required.

React:
import { Inbox } from "@cord-sdk/react";

export const Example = () => (
  <body>
    <div id="header">
      <Inbox showCloseButton={false} style={{ height: "600px", width: "400px;" }} />
    </div>
  </body>
);
Vanilla JavaScript:
<body>
  <div id="header">
    <cord-inbox show-close-button="false" style="height: 600px; width: 400px"></cord-inbox>
  </div>
</body>
              
import { Inbox } from "@cord-sdk/react";

export const Example = () => (
  <body>
    <div id="header">
      <Inbox showCloseButton={false} style={{ height: "600px", width: "400px;" }} />
    </div>
  </body>
);
Copy

Properties #

showCloseButton #

optional
boolean
Whether to show the close button in the top right corner of the inbox.
The default setting is set to true.

showPlaceholder #

optional
boolean
If 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.
The default value is true.

onCloseRequested #

optional
function
Callback invoked when the close button in the inbox was clicked.

Want to customize the components further?

Head to our CSS customization guide

Not finding the answer you need? Ask our Developer Community

Ask Cordy