Open the inbox to see new activity relevant to you
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 inboxBadgeStyle="badge" />
</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.badge_with_count
: This will show a bubble on the top
right of the button. Inside the bubble, the number of unread
messages will be displayed.badge
: This will show a blue bubble on the top right
of the button if there is at least one unread message.none
: There will be no indication of unread messages
in the button.badge_with_count
. We strongly
discourage using this option, as it greatly reduces
the discoverability of the conversation users have started.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
.true
.show-inbox-on-click
prop/attribute is set to 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
.These can be used to customize the component. You can learn more about customization here.
--cord-inbox-launcher-font-size:
var(--cord-font-size-body, 14px);
--cord-inbox-launcher-text-color:
var(--cord-secondary-button-content-color, var(--cord-color-content-emphasis, #121314));
--cord-inbox-launcher-text-color--hover:
var(--cord-secondary-button-content-color--hover, var(--cord-color-content-emphasis, #121314));
--cord-inbox-launcher-text-color--active:
var(--cord-secondary-button-content-color--active, var(--cord-color-base, #FFFFFF));
--cord-inbox-launcher-text-color--disabled:
var(--cord-secondary-button-content-color--disabled, var(--cord-color-content-secondary, #97979F));
--cord-inbox-launcher-background-color:
var(--cord-secondary-button-background-color, var(--cord-color-base-strong, #F6F6F6));
--cord-inbox-launcher-background-color--hover:
var(--cord-secondary-button-background-color--hover, var(--cord-color-base-x-strong, #DADCE0));
--cord-inbox-launcher-background-color--active:
var(--cord-secondary-button-background-color--active, var(--cord-color-brand-primary, #121314));
--cord-inbox-launcher-background-color--disabled:
var(--cord-secondary-button-background-color--disabled, var(--cord-color-base-strong, #F6F6F6));
--cord-inbox-launcher-padding:
6px 8px;
--cord-inbox-launcher-height:
var(--cord-button-height-auto, auto);
--cord-inbox-launcher-gap:
var(--cord-space-3xs, 4px);
--cord-inbox-launcher-border:
var(--cord-button-border-none, none);
--cord-inbox-launcher-icon-size:
var(--cord-space-l, 20px);
--cord-inbox-launcher-badge-background-color:
var(--cord-color-notification, #0079FF);
--cord-inbox-launcher-badge-text-color:
var(--cord-color-base, #FFFFFF);
--cord-inbox-launcher-inbox-z-index:
2147483645;
--cord-inbox-launcher-inbox-offset:
0px;
--cord-inbox-launcher-inbox-box-shadow:
var(--cord-shadow-large, 0 var(--cord-space-4xs, 2px) var(--cord-space-m, 16px) 0 rgba(0,0,0,0.16));
--cord-inbox-background-color:
var(--cord-color-base, #FFFFFF);
--cord-inbox-header-background-color:
var(--cord-color-base, #FFFFFF);
--cord-inbox-content-horizontal-padding:
var(--cord-space-2xs, 8px);
--cord-inbox-border:
1px solid var(--cord-color-base-x-strong, #DADCE0);
--cord-inbox-border-radius:
var(--cord-border-radius-medium, var(--cord-space-3xs, 4px));
--cord-inbox-height:
auto;
--cord-inbox-width:
auto;