Cord LogoDocs
Sign inStart now

Inbox Launcher (Deprecated)

Components /

Open the inbox to see new activity relevant to you

Cord Inbox Launcher 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 Launcher.

Live Demo

When to use #

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:

How to use #

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.

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

export const Example = () => (
  <body>
    <div id="header">
      <InboxLauncher />
    </div>
  </body>
);
Vanilla JavaScript:
<body>
  <div id="header">
    <cord-inbox-launcher></cord-inbox-launcher>
  </div>
</body>
              
import { InboxLauncher } from "@cord-sdk/react";

export const Example = () => (
  <body>
    <div id="header">
      <InboxLauncher />
    </div>
  </body>
);
Copy

Properties #

label #

optional
string
This sets the text label on the "Inbox" button.
The default label is Inbox. If set to an empty string, the button will not have a label.

iconUrl #

optional
string
This URL sets the image used as the icon on the "Inbox" button.
The default setting is Inbox icon. If set to an empty string, the button will have no icon.

showInboxOnClick #

optional
boolean
When true, clicking the button will open the 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.
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.

onClick #

optional
function
Callback invoked when the "Inbox" button is clicked.

Want to customize the components further?

Head to our CSS customization guide

Ask Cordy