Web Components

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
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.

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;
}