This package contains the Webcomponents components to build a notification UI for your site powered by MagicBell.

Quick Start

npm install @magicbell/webcomponents

Authentication

You'll need a User JWT to use the SDK. You can generate these on your own server. Read our Authentication Docs to learn how to do this.

ContextProvider

Provides the MagicBell context to all components in the SDK.

Wrap your app in this component to enable access to the MagicBell API client, local-first user/session state, and shared configuration. Required for components like Inbox, FloatingInbox, and SlackButton to function.

<script type="module">
  import "https://unpkg.com/@magicbell/webcomponents";
</script>

<mb-context-provider token="${USER_JWT}">
  <nav>
    <div>logo</div>
    <mb-floating-inbox></mb-floating-inbox>
  </nav>
  <main>your content here</main>
</mb-context-provider>

Properties

| Name | Type | Default | Description | |------|------|---------|-------------| | token * | string | | The MagicBell User JWT | | toasts | boolean | true | Enable or disable toast notifications. | | children | Element | | Elements to render inside the provider. |

FloatingInbox

A floating version of the notification inbox, toggled by a button.

Renders the inbox inside a floating panel positioned relative to a trigger. Ideal for embedding in navigation bars or headers. Supports full customization of placement, dimensions, trigger, and inbox content.

<script type="module">
  import "https://unpkg.com/@magicbell/webcomponents";
</script>

<mb-context-provider token="${USER_JWT}">
  <mb-floating-inbox
    placement="bottom-start"
    height="500"
    width="400"
    offset="10"
  ></mb-floating-inbox>
</mb-context-provider>

Properties

| Name | Type | Default | Description | |------|------|---------|-------------| | default-open | boolean | false | Whether the inbox should be open by default. | | height | number | 400 | The height of the floating inbox panel in pixels. | | offset | OffsetOptions | 8 | Offset of the inbox from the trigger button, in pixels. Can be a single number or an object with main/cross axis. | | open | boolean | | Controlled open state. When provided, component becomes controlled and will not close on outside click or Escape by itself. | | placement | Placement | bottom-start | Where to place the inbox relative to the trigger button. E.g. 'bottom-end', 'top-start', etc. | | width | number | 400 | The width of the floating inbox panel in pixels. |

Events

| Name | Detail | Description | |------|--------|-------------| | mb-notification-click | { notification: Notification } | Emitted when a notification item is clicked. Call event.preventDefault() to stop default navigation. |

document.addEventListener("mb-notification-click", (event) => {
  const { notification } = event.detail;
  event.preventDefault();
});

Inbox

A notification inbox component that displays a list of notifications for the current user.

Supports pagination, read/unread states, and customizable rendering of notification items. Can be embedded directly in a page or used in combination with floating UIs using FloatingInbox.

<script type="module">
  import "https://unpkg.com/@magicbell/webcomponents";
</script>

<mb-context-provider token="${USER_JWT}">
  <mb-inbox></mb-inbox>
</mb-context-provider>

Properties

| Name | Type | Default | Description | |------|------|---------|-------------| | height | number | 400 | Set the height of the inbox. | | item-height | number | 50 | Estimated item height. It gets measured after mount, but it helps to estimate this to limit layout shift. |

Events

| Name | Detail | Description | |------|--------|-------------| | mb-notification-click | { notification: Notification } | Emitted when a notification item is clicked. Call event.preventDefault() to stop default navigation. |

document.addEventListener("mb-notification-click", (event) => {
  const { notification } = event.detail;
  event.preventDefault();
});

InlineNotification

An inline notification component that can be used to show an unread notification.

Properties

| Name | Type | Default | Description | |------|------|---------|-------------| | animate | "down" | "up" | | The animation direction when a new notification arises. E.g. 'up' or 'down' | | topic | string | | The topic whose unread notification is indicated. | | variant | "bar" | "dot" | | The component to render for an unread notification - 'bar' renders title, sentAt, and content of the notification 'dot' renders a dot indicating an unread notification |

SlackButton

A button to subscribe or unsubscribe a user to your Slack channel.

Registers or removes the user’s Slack token using the provided Slack App ID. Supports custom labels, styling, and redirect flow.

<script type="module">
  import "https://unpkg.com/@magicbell/webcomponents";
</script>

<mb-context-provider token="${USER_JWT}">
  <mb-slack-button
    redirect-url="https://example.com"
    app-id="A06DAT80SHF"
  ></mb-slack-button>
</mb-context-provider>

Properties

| Name | Type | Default | Description | |------|------|---------|-------------| | app-id * | string | | The Slack App ID used to initiate the installation flow. | | class-name | string | | Additional class names to apply to the button. | | redirect-url | string | location.href | Optional URL to redirect the user to after completing the Slack OAuth flow. Defaults to the current origin. | | unstyled | boolean | | When true, omit the default base class to fully control styling. |

SlackbotButton

A button to subscribe or unsubscribe a user to the MagicBell Slackbot channel.

Properties

| Name | Type | Default | Description | |------|------|---------|-------------| | class-name | string | | Additional class names to apply to the button. | | include-incoming-webhook | boolean | | When true, request 'incoming-webhook' scope during Slackbot installation. Installing user will be prompted to choose a channel on install. | | redirect-url | string | location.href | Optional URL to redirect the user to after completing the Slackbot OAuth flow. Defaults to the current origin. | | unstyled | boolean | | When true, omit the default base class to fully control styling. |

ToastContainer

Properties

| Name | Type | Default | Description | |------|------|---------|-------------| | class-name | string | | | | duration | number | | | | visible-toasts | number | | |

UserPreferences

A preferences management component that lets users toggle notification channels per category.

Properties

| Name | Type | Default | Description | |------|------|---------|-------------| | class-name | string | | Additional class names to apply to the root container element. |

WebPushButton

A button to subscribe or unsubscribe a user to Web Push Notifications.

Uses the Push API to register or remove the user’s subscription. The user stays on the page; no redirect is involved. Requires a configured service worker. Supports custom labels, styling, and ref forwarding.

To enable web push, your service worker must import MagicBell’s script:

importScripts('https://assets.magicbell.io/web-push-notifications/sw.js');

<script type="module">
  import "https://unpkg.com/@magicbell/webcomponents";
</script>

<mb-context-provider token="${USER_JWT}">
  <mb-webpush-button></mb-webpush-button>
</mb-context-provider>

Properties

| Name | Type | Default | Description | |------|------|---------|-------------| | class-name | string | | Additional class names to apply to the button. | | request-install-label | string | | Label to show when the app needs to be installed as a PWA (iOS requirement). Optional alternative to renderLabel. | | service-worker-path | string | /sw.js | Path to your custom service worker file. Defaults to /sw.js. The service worker must include MagicBell’s web push script via importScripts(...). | | unstyled | boolean | | When true, omit the default base class to fully control styling. | | unsupported-label | string | | Label to show when web push is not supported by the browser. Optional alternative to renderLabel. |

Theming

The components come with stylesheets that can be directly imported. For example, for the FloatingInbox:

import "@magicbell/webcomponents/styles/floating-inbox.css";

Custom Theme

All of our components come with predefined class names. You can target these classes in your own stylesheet to override or extend the default styles.

For example, you could create a custom dark mode:

body {
  --magicbell-font-family: "Inter", "Helvetica Neue", Arial, sans-serif;

  --magicbell-text-default: #f5f5f5;
  --magicbell-text-link: #3b82f6;

  --magicbell-bg-default: #111827;
  --magicbell-bg-active: #212f47;
  --magicbell-bg-hover: #1f2937;

  --magicbell-surface-bg: #1f2937;
  --magicbell-surface-bg-hover: #2d3748;

  --magicbell-border-muted: #374151;

  --magicbell-spacing-md: 0.75rem;
  --magicbell-spacing-lg: 1rem;
}

body .magicbell--button {
  font-size: 14px;
  font-weight: 600;
}

body .magicbell--inbox-footer a {
  color: #fff;
}