Courier Web Components

! Drop-in components for notifications in any JavaScript project:

<courier-inbox>: inbox for displaying and managing messages
<courier-inbox-popup-menu>: popup menu version of the inbox
<courier-toast>: toasts for time-sensitive alerts
<courier-preferences>: preferences center for topic subscriptions and delivery

This is the latest Courier Web Components SDK, for new and existing apps.Coming from an earlier version? Upgrade using the . The React SDK is a thin wrapper around these Web Components and exposes a similar API.

Installation

Inbox, Toast, and Preferences are published as separate packages. Install only the ones you need.

npm install @trycourier/courier-ui-inbox

npm install @trycourier/courier-ui-toast

npm install @trycourier/courier-ui-preferences

Available on GitHub and npm: Inbox · Inbox · Toast · Toast · Preferences · Preferences The Courier SDKs work with any JavaScript build system and need no extra build configuration.

Using React? The provides React components and hooks built on these Web Components.

Authentication

Courier authenticates with a JWT that your backend mints with your Courier API key, never in client code. covers the token flow, scope strings, reading auth state, signing out, token refresh, and EU-hosted workspaces.

import { Courier } from "@trycourier/courier-ui-inbox";

Courier.shared.signIn({ userId, jwt });  // also accepts tenantId, apiUrls, showLogs
Courier.shared.signOut();
Courier.shared.addAuthenticationListener(({ userId }) => { /* ... */ });

Inbox and Toast share the same Courier.shared instance and socket connection. Authenticate once and both components work.

Inbox Web Components

`<courier-inbox>`

Default Courier Inbox component

Importing the Courier SDK registers Courier’s Web Components (<courier-inbox>, <courier-inbox-popup-menu>).

<body>
  <courier-inbox id="inbox"></courier-inbox>

  <script type="module">
    import { Courier } from '@trycourier/courier-ui-inbox';

    // Generate a JWT for your user on your backend server
    const jwt = 'eyJhbGciOiJIUzI1NiIsInR5cCI6IkpXVCJ9...';

    // Authenticate the user with the inbox
    Courier.shared.signIn({
      userId: "user_123",
      jwt: jwt
    });
  </script>
</body>

Sample App: See a complete working example in the Web Components example app.

If you’re using , you can scope requests to a particular tenant by passing its ID to the signIn request.

Courier.shared.signIn({
  userId: "user_123-id",
  jwt: jwt,
  tenantId: "my-tenant-id"
});

For the full reference of sign in parameters, see the .

Default Courier Inbox Popup Menu component

<body>
  <div style="padding: 24px;">
    <courier-inbox-popup-menu id="inbox"></courier-inbox-popup-menu>
  </div>

  <script type="module">
    import { Courier } from '@trycourier/courier-ui-inbox';

    // Generate a JWT for your user on your backend server
    const jwt = 'eyJhbGciOiJIUzI1NiIsInR5cCI6IkpXVCJ9...';

    // Authenticate the user with the inbox
    Courier.shared.signIn({
      userId: "user_123",
      jwt: jwt
    });
  </script>
</body>

Sample App: See a complete working example in the Web Components example app.

Tabs and feeds

The <courier-inbox> element takes feeds through setFeeds(), or a feeds attribute holding the same array as JSON. The concept, every filter field, and the datasetId uniqueness rule are on . selectFeed() and selectTab() pick one in code. See below.

Handle clicks and presses

Handle clicks and presses with onMessageClick(), onMessageActionClick(), and onMessageLongPress().

onMessageLongPress() is only applicable on devices that support touch events.

<body>
  <courier-inbox id="inbox"></courier-inbox>

  <!-- Uncomment the line below to use the popup menu instead -->
  <!-- <courier-inbox-popup-menu id="inbox"></courier-inbox-popup-menu> -->

  <script type="module">
    import { Courier } from '@trycourier/courier-ui-inbox';

    // Generate a JWT for your user on your backend server
    const jwt = 'eyJhbGciOiJIUzI1NiIsInR5cCI6IkpXVCJ9...';

    // Authenticate the user with the inbox
    Courier.shared.signIn({
      userId: "user_123",
      jwt: jwt
    });

    const inbox = document.getElementById('inbox');

    // Handle message clicks
    inbox.onMessageClick(({ message, index }) => {
      alert("Message clicked at index " + index +
            ":\n" + JSON.stringify(message, null, 2));
    });

    // Handle message action clicks (these are buttons on individual messages)
    inbox.onMessageActionClick(({ message, action, index }) => {
      alert(
        "Message action clicked at index " + index + ":\n" +
        "Action: " + JSON.stringify(action, null, 2) + "\n" +
        "Message: " + JSON.stringify(message, null, 2)
      );
    });

    // Handle message long presses (useful for mobile web)
    inbox.onMessageLongPress(({ message, index }) => {
      alert("Message long pressed at index " + index +
            ":\n" + JSON.stringify(message, null, 2));
    });
  </script>
</body>

Styles and theming

Call setLightTheme() / setDarkTheme() with a CourierInboxTheme, or set the light-theme / dark-theme attributes to a JSON string of one. The object is identical on every web SDK, so every field is in . popup-alignment, popup-width, popup-height, and the top / right / bottom / left offsets position the panel. The nine alignment values and their defaults are in .

Custom elements

Customize parts of the inbox by passing factory functions that return HTML elements.

Show Custom list item

<body>
  <courier-inbox id="inbox"></courier-inbox>

  <script type="module">
    const inbox = document.getElementById('inbox');

    inbox.setListItem(({ message, index }) => {
      const pre = document.createElement('pre');
      pre.style.padding = '24px';
      pre.style.borderBottom = '1px solid #e0e0e0';
      pre.style.margin = '0';
      pre.textContent = JSON.stringify({ message, index }, null, 2);

      return pre;
    });
  </script>
</body>

Custom inbox message list item displaying the message object

Show Custom header

Call removeHeader() to remove the header entirely.The setHeader callback receives a props object with a feeds array. Each feed includes selection state, tabs with unread counts, and filter information.

<body>
  <courier-inbox id="inbox"></courier-inbox>

  <script type="module">
    import { Courier } from '@trycourier/courier-ui-inbox';

    const inbox = document.getElementById('inbox');

    inbox.setHeader((props) => {
      const headerDiv = document.createElement('div');
      headerDiv.style.background = 'red';
      headerDiv.style.fontSize = '20px';
      headerDiv.style.color = 'white';
      headerDiv.style.padding = '20px';
      headerDiv.style.width = '100%';
      headerDiv.style.fontFamily = 'monospace';

      const selectedFeed = props.feeds.find(feed => feed.isSelected);
      const selectedTab = selectedFeed?.tabs.find(tab => tab.isSelected);

      let feedPart = selectedFeed ? `${selectedFeed.title}` : 'No Feed Selected';
      let tabPart = selectedTab ? `${selectedTab.title}` : 'No Tab Selected';
      let unreadPart = typeof selectedTab?.unreadCount === 'number' ? `Unread: ${selectedTab.unreadCount}` : '';

      headerDiv.textContent = `${feedPart} / ${tabPart} ${unreadPart && '- ' + unreadPart}`;

      return headerDiv;
    });

    // Set up feeds and authenticate...
  </script>
</body>

Custom inbox header

Header factory props

{
  feeds: [
    {
      feedId: string;
      title: string;
      iconSVG?: string;
      tabs: [
        {
          datasetId: string;
          title: string;
          unreadCount: number;
          isSelected: boolean;
          filter: {
            tags?: string[];
            archived?: boolean;
            status?: 'read' | 'unread';
          };
        }
      ];
      isSelected: boolean;
    }
  ];
}

Show Custom popup menu button

<body>
  <div style="display: flex; justify-content: center; align-items: center; padding: 100px;">
    <courier-inbox-popup-menu id="inbox"></courier-inbox-popup-menu>
  </div>

  <script type="module">
    const inbox = document.getElementById('inbox');

    inbox.setMenuButton(({ unreadCount }) => {
      const button = document.createElement('button');
      button.textContent = `Open the Inbox Popup. Unread message count: ${unreadCount}`;
      return button;
    });
  </script>
</body>

Custom inbox popup menu button

Show Custom loading, empty, error, and pagination states

The inbox loads the next page automatically when the user scrolls to the bottom, so the pagination component may only flash briefly.

<body>
  <courier-inbox id="inbox"></courier-inbox>

  <script type="module">
    const inbox = document.getElementById('inbox');

    inbox.setLoadingState(props => {
      const loading = document.createElement('div');
      loading.style.padding = '24px';
      loading.textContent = 'Custom Loading State';
      return loading;
    });

    inbox.setEmptyState(props => {
      const empty = document.createElement('div');
      empty.style.padding = '24px';
      empty.textContent = 'Custom Empty State';
      return empty;
    });

    inbox.setErrorState(props => {
      const error = document.createElement('div');
      error.style.padding = '24px';
      error.textContent = 'Custom Error State';
      return error;
    });

    inbox.setPaginationItem(props => {
      const pagination = document.createElement('div');
      pagination.style.padding = '24px';
      pagination.style.textAlign = 'center';
      pagination.textContent = 'Loading the next page of messages';
      return pagination;
    });
  </script>
</body>

Custom pagination state

Programmatic control

<courier-inbox> exposes methods to manage feeds, tabs, actions, and data refresh at runtime.

Feed and tab selection

Method	Description
`selectFeed(feedId)`	Switch to the specified feed and load its data.
`selectTab(tabId)`	Switch to the specified tab within the current feed.
`getFeeds()`	Returns the current array of configured feeds.
`currentFeedId` (getter)	Returns the ID of the currently selected feed.
`refresh()`	Forces a reload of inbox data, bypassing the cache. Returns `Promise<void>`.

Header actions

Method	Description
`setActions(actions)`	Set header actions. Action IDs: `'readAll'`, `'archiveRead'`, `'archiveAll'`.
`setListItemActions(actions)`	Set list item actions. Action IDs: `'read_unread'`, `'archive_unarchive'`.

Method	Description
`showPopup()`	Open the popup programmatically with transition animation.
`closePopup()`	Close the popup programmatically with transition animation.

Static helper methods

Method	Description
`CourierInbox.defaultFeeds()`	Returns the default feeds (Inbox and Archive).
`CourierInbox.defaultActions()`	Returns the default header actions.
`CourierInbox.defaultListItemActions()`	Returns the default list item actions.

Show Programmatic feed/tab selection example

<body>
  <courier-inbox id="inbox"></courier-inbox>

  <script type="module">
    import { Courier } from '@trycourier/courier-ui-inbox';

    const inbox = document.getElementById('inbox');

    inbox.setFeeds([
      {
        feedId: 'notifications',
        title: 'Notifications',
        tabs: [
          { datasetId: 'all', title: 'All', filter: {} },
          { datasetId: 'unread', title: 'Unread', filter: { status: 'unread' } }
        ]
      },
      {
        feedId: 'archive',
        title: 'Archive',
        tabs: [
          { datasetId: 'archived', title: 'Archived', filter: { archived: true } }
        ]
      }
    ]);

    Courier.shared.signIn({ userId: "user_123", jwt: '...' });

    // Programmatically select a feed and tab
    inbox.selectFeed('notifications');
    inbox.selectTab('unread');

    // Get current state
    console.log('Current feed:', inbox.currentFeedId);
    console.log('All feeds:', inbox.getFeeds());
  </script>
</body>

Show Actions configuration example

<body>
  <courier-inbox id="inbox"></courier-inbox>

  <script type="module">
    import { Courier } from '@trycourier/courier-ui-inbox';

    const inbox = document.getElementById('inbox');

    // Configure header actions
    inbox.setActions([
      { id: 'readAll', iconSVG: '...', text: 'Mark All Read' },
      { id: 'archiveRead', iconSVG: '...', text: 'Archive Read' }
    ]);

    // Configure list item actions
    inbox.setListItemActions([
      { 
        id: 'read_unread',
        readIconSVG: '...',
        unreadIconSVG: '...'
      },
      {
        id: 'archive_unarchive',
        archiveIconSVG: '...',
        unarchiveIconSVG: '...'
      }
    ]);
  </script>
</body>

Attribute vs method usage

Most options can be set with HTML attributes or with methods:

HTML attributes: Best for initial, static configuration
Programmatic methods: Best for dynamic, runtime configuration

<!-- Using HTML attributes -->
<courier-inbox 
  mode="light"
  light-theme='{"inbox": {"backgroundColor": "#fff"}}'>
</courier-inbox>

<!-- Using programmatic methods -->
<courier-inbox id="inbox"></courier-inbox>
<script type="module">
  const inbox = document.getElementById('inbox');
  inbox.setMode('light');
  inbox.setLightTheme({
    inbox: { backgroundColor: '#fff' }
  });
</script>

Some features are methods only and have no attribute: selectFeed(), refresh(), getFeeds().

Toast Web Components

Toasts are short-lived notifications that prompt users to act. The Toast component reads the Courier Inbox message feed.

Toasts sync with the Inbox message feed. Use both components together for persistent and temporary notifications.

`<courier-toast>`

Importing @trycourier/courier-ui-toast registers Courier’s Web Components (<courier-toast>).

<body>
  <courier-toast></courier-toast>

  <script type="module">
    import { Courier } from "@trycourier/courier-ui-toast";

    // Generate a JWT for your user on your backend server
    const jwt = "eyJhbGciOiJIUzI1NiIsInR5cCI6IkpXVCJ9...";

    // Authenticate the user
    Courier.shared.signIn({
      userId: "user_123",
      jwt: jwt
    });
  </script>
</body>

Sample App: See a complete working example in the Web Components example app.

HTML attributes

Terminology: toast is the whole stack managed by <courier-toast>. A toast item is one toast shown for one message.

Attribute	Type	Default	Description
`auto-dismiss`	`boolean`	`false`	Whether toast items should auto-dismiss.
`auto-dismiss-timeout-ms`	`integer`	`5000`	If `auto-dismiss` is enabled, the timeout in milliseconds before dismissal.
`dismiss-button`	`"visible" \| "hidden" \| "hover" \| "auto"`	`"auto"`	Display option for the dismiss button. `"auto"` makes the button always visible if `auto-dismiss` is false, and visible on hover if `auto-dismiss` is true.
`light-theme`	`json`	`undefined`	JSON-stringified `CourierToastTheme` applied in light mode. Merged with defaults.
`dark-theme`	`json`	`undefined`	JSON-stringified `CourierToastTheme` applied in dark mode. Merged with defaults.
`mode`	`"light" \| "dark" \| "system"`	`"system"`	Theme mode for the toast component.

Toast component with auto-dismiss enabled.

With auto-dismiss set, the dismiss button (x) appears only on hover and each toast item dismisses itself. A countdown bar shows the time remaining.

Handle clicks

API Method	Description
`onToastItemClick(handler)`	Called when a toast item is clicked.
`onToastItemActionClick(handler)`	Called when an action button on a toast item is clicked.

If a message contains , each toast item gets a button per action. These buttons do nothing until you wire them up.

index.html

<body>
  <courier-toast id="my-toast"></courier-toast>

  <script type="module">
    import {
      Courier,
      CourierToastDatastore
    } from "@trycourier/courier-ui-toast";

    const toast = document.getElementById("my-toast");

    toast.onToastItemClick(({ message, toastItem }) => {
      window.open(message.actions[0].href);
    });

    toast.onToastItemActionClick(({ message, action }) => {
      window.open(action.href);
      CourierToastDatastore.shared.removeMessage(message);
    });

    Courier.shared.signIn({ userId, jwt });
  </script>
</body>

Show Click event types

type CourierToastItemClickEvent = {
  message: InboxMessage;
  toastItem: CourierToastItem | HTMLElement;
};

type CourierToastItemActionClickEvent = {
  message: InboxMessage;
  action: InboxAction;
};

Styles and theming

Call setLightTheme() / setDarkTheme() with a CourierToastTheme, or set light-theme / dark-theme to a JSON string of one. Every field, including the per-style action variants, is in . The theme has no toast wrapper. setLightTheme({ item: { ... } }) is the shape. An object nested under a toast key parses without error and applies nothing.

Custom elements

Method	Description
`setToastItemContent(factory)`	Customize the content area only, keeping default stack styling.
`setToastItem(factory)`	Fully replace each toast item for complete control.

Show Custom toast content example

index.html

<html>
<head>
  <link href="./styles.css" rel="stylesheet">
</head>
<body>
  <courier-toast id="my-toast" dismiss-button="hidden"></courier-toast>

  <script type="module">
    import { CourierToastDatastore } from "@trycourier/courier-ui-toast";

    const toast = document.getElementById("my-toast");

    toast.setToastItemContent(({ message }) => {
      const content = document.createElement("div");
      content.className = "toast-content";

      const icon = document.createElement("img");
      icon.className = "toast-icon";
      icon.src = "./toast-icon.svg";
      icon.width = 24;
      icon.height = 24;

      const textContainer = document.createElement("div");
      textContainer.className = "toast-text";

      const title = document.createElement("strong");
      title.className = "toast-title";
      title.textContent = message.title;

      const body = document.createElement("p");
      body.className = "toast-body";
      body.textContent = message.body;

      textContainer.appendChild(title);
      textContainer.appendChild(body);

      const dismissButton = document.createElement("button");
      dismissButton.className = "toast-dismiss";
      dismissButton.textContent = "\u00d7";
      dismissButton.addEventListener("click", () => {
        CourierToastDatastore.shared.removeMessage(message);
      });

      content.appendChild(icon);
      content.appendChild(textContainer);
      content.appendChild(dismissButton);

      return content;
    });

    Courier.shared.signIn({ userId, jwt });
  </script>
</body>

Show Fully custom toast item example

auto-dismiss and auto-dismiss-timeout-ms remain valid when using custom items. If auto-dismiss is true, custom items are automatically removed after the timeout.

index.html

<html>
<head>
  <link href="./styles.css" rel="stylesheet">
</head>
<body>
  <courier-toast id="my-toast"></courier-toast>

  <script type="module">
    const toast = document.getElementById("my-toast");

    toast.setToastItem((props) => {
      const { message, dismiss } = props;

      const container = document.createElement("div");
      container.className = "toast-content";

      const messageDiv = document.createElement("div");
      messageDiv.className = "toast-message";

      const title = document.createElement("strong");
      title.className = "toast-title";
      title.textContent = message.title;

      const body = document.createElement("p");
      body.className = "toast-body";
      body.textContent = message.body;

      messageDiv.appendChild(title);
      messageDiv.appendChild(body);

      const actionsDiv = document.createElement("div");
      actionsDiv.className = "toast-actions";

      if (message.actions) {
        message.actions.forEach(action => {
          const button = document.createElement("button");
          button.className = "toast-action-button";
          button.textContent = action.content;
          button.onclick = () => {
            if (action.href) {
              window.open(action.href);
            }
          };
          actionsDiv.appendChild(button);
        });
      }

      container.appendChild(messageDiv);
      container.appendChild(actionsDiv);

      return container;
    });

    Courier.shared.signIn({ userId, jwt });
  </script>
</body>
</html>

Programmatic control

Method	Description
`enableAutoDismiss()`	Enable auto-dismiss for toast items.
`disableAutoDismiss()`	Disable auto-dismiss. Items remain visible until manually dismissed.
`setAutoDismissTimeoutMs(ms)`	Set the auto-dismiss timeout in milliseconds.
`setDismissButton(option)`	Set dismiss button visibility: `'visible'`, `'hidden'`, `'hover'`, or `'auto'`.
`setMode(mode)`	Set theme mode: `'light'`, `'dark'`, or `'system'`.
`setLightTheme(theme)`	Set the light theme programmatically.
`setDarkTheme(theme)`	Set the dark theme programmatically.

Toast datastore

CourierToastDatastore holds the Inbox messages that <courier-toast> displays and dismisses. It is a singleton, accessed through CourierToastDatastore.shared.

Method	Description
`addMessage(message)`	Add a message to display as a toast. Messages must include `messageId`.
`removeMessage(message)`	Remove a message, dismissing any displayed toast for it.

import { CourierToastDatastore } from "@trycourier/courier-ui-toast";

// Add a test message (useful for prototyping)
CourierToastDatastore.shared.addMessage({
  title: "Lorem ipsum dolor sit",
  body: "Lorem ipsum dolor sit amet",
  messageId: "abcd-1234-abcd-1234",
  actions: [{ "content": "Click me!" }]
});

// Remove a message (dismiss its toast)
CourierToastDatastore.shared.removeMessage(message);

Preferences Web Components

The Preferences component lets users manage their topic subscriptions inside your app. They also control how each topic is delivered, including per-channel routing and digest schedules.

Preferences ship in their own package, @trycourier/courier-ui-preferences (see Installation). It does not require the inbox or toast packages.

npm install @trycourier/courier-ui-preferences

`<courier-preferences>`

Importing @trycourier/courier-ui-preferences registers the <courier-preferences> Web Component.

<body>
  <courier-preferences id="preferences"></courier-preferences>

  <script type="module">
    import { Courier } from "@trycourier/courier-ui-preferences";

    // Generate a JWT for your user on your backend server
    const jwt = "eyJhbGciOiJIUzI1NiIsInR5cCI6IkpXVCJ9...";

    // Authenticate the user
    Courier.shared.signIn({
      userId: "user_123",
      jwt: jwt
    });
  </script>
</body>

Preferences use the same authentication mechanism as the inbox, but the JWT must include the read:preferences and write:preferences scopes.

Preferences HTML attributes

Attribute	Type	Default	Description
`light-theme`	`json`	`undefined`	JSON-stringified `CourierPreferencesTheme` applied in light mode. Merged with defaults.
`dark-theme`	`json`	`undefined`	JSON-stringified `CourierPreferencesTheme` applied in dark mode. Merged with defaults.
`mode`	`"light" \| "dark" \| "system"`	`"system"`	Theme mode for the component.
`tenant-id`	`string`	`undefined`	Scope preferences to a specific tenant (multi-tenant apps).
`brand-id`	`string`	`undefined`	Render preferences using a specific brand’s styling.

Preferences styling and theming

Call setLightTheme() / setDarkTheme() with a CourierPreferencesTheme, or set light-theme / dark-theme to a JSON string of one. Setting primaryColor alone carries the accent through the toggles, radios, and chips. Every field is in .

Custom channel labels

Topics can be delivered over multiple channels. Use setChannelLabels() to rename those channels in the UI.

index.html

<body>
  <courier-preferences id="prefs"></courier-preferences>

  <script type="module">
    import { Courier } from "@trycourier/courier-ui-preferences";

    const prefs = document.getElementById("prefs");

    prefs.setChannelLabels({
      email: "E-mail",
      push: "Mobile Push",
      sms: "Text Message"
    });

    Courier.shared.signIn({ userId, jwt });
  </script>
</body>

The default labels are:

Channel key	Default label
`direct_message`	Chat
`email`	Email
`push`	Push
`sms`	SMS
`webhook`	Webhook
`inbox`	Inbox

EU and regional endpoints

Only needed if your workspace uses the . @trycourier/courier-ui-inbox re-exports EU_COURIER_API_URLS, DEFAULT_COURIER_API_URLS, and getCourierApiUrlsForRegion from @trycourier/courier-js. Pass the result as apiUrls on sign-in. For the hostnames, the helper semantics, and the same-region JWT requirement, see .

React SDK

React components and hooks built on the Web Components.

Inbox Theme Reference

The full CourierInboxTheme type definition for the inbox.

Get started

Quickstarts

Inbox

Toasts

Preferences

Web Components

Courier Web Components

Installation

Authentication

Inbox Web Components

`<courier-inbox>`

Tabs and feeds

Handle clicks and presses

Styles and theming

Custom elements

Header factory props

Programmatic control

Feed and tab selection

Header actions

Static helper methods

Attribute vs method usage

Toast Web Components

`<courier-toast>`

HTML attributes

Handle clicks

Styles and theming

Custom elements

Programmatic control

Toast datastore

Preferences Web Components

`<courier-preferences>`

Preferences HTML attributes

Preferences styling and theming

Custom channel labels

EU and regional endpoints

React SDK

Inbox Theme Reference

​Installation

​Authentication

​Inbox Web Components

​<courier-inbox>

​<courier-inbox-popup-menu>

​Tabs and feeds

​Handle clicks and presses

​Styles and theming

​Popup alignment, position, and dimensions

​Custom elements

​Header factory props

​Programmatic control

​Feed and tab selection

​Header actions

​Popup menu control (on <courier-inbox-popup-menu>)

​Static helper methods

​Attribute vs method usage

​Toast Web Components

​<courier-toast>

​HTML attributes

​Handle clicks

​Styles and theming

​Custom elements

​Programmatic control

​Toast datastore

​Preferences Web Components

​<courier-preferences>

​Preferences HTML attributes

​Preferences styling and theming

​Custom channel labels

​EU and regional endpoints

​Related documentation

React SDK

Inbox Theme Reference

Installation

Authentication

Inbox Web Components

`<courier-inbox>`

`<courier-inbox-popup-menu>`

Tabs and feeds

Handle clicks and presses

Styles and theming

Popup alignment, position, and dimensions

Custom elements

Header factory props

Programmatic control

Feed and tab selection

Header actions

Popup menu control (on `<courier-inbox-popup-menu>`)

Static helper methods

Attribute vs method usage

Toast Web Components

`<courier-toast>`

HTML attributes

Handle clicks

Styles and theming

Custom elements

Programmatic control

Toast datastore

Preferences Web Components

`<courier-preferences>`

Preferences HTML attributes

Preferences styling and theming

Custom channel labels

EU and regional endpoints

Related documentation