ReachBellDocs

SDK installation

ReachBell ships a single browser SDK with three distribution channels: a CDN-served <script> for plain HTML pages, the @reachbell/sdk npm package, and the WordPress plugin (which bundles the SDK internally).

Pick the path that matches your stack.

Vanilla JavaScript

<script src="https://app.reachbell.com/reachbell.js" defer></script>
<script>
  window.addEventListener('DOMContentLoaded', () => {
    ReachBell.init({
      apiKey:     'rb_live_yourkey',
      autoPrompt: true,
    });
  });
</script>

You also need reachbell-sw.js served from the root of your domain. Download it from the dashboard's integration page and place it next to your index.html. Service worker scope is bound to its served path, so it MUST be at the root or it can't control the whole site.

npm — @reachbell/sdk

npm install @reachbell/sdk

import { ReachBell } from '@reachbell/sdk';

ReachBell.init({
  apiKey:     'rb_live_yourkey',
  autoPrompt: true,
});

// After login:
const result = await ReachBell.identify('user_42');
if (!result.ok) console.warn('identify failed:', result.reason);

The bundle is ~15KB ESM, has zero runtime dependencies, and ships a dist/index.d.ts for TypeScript consumers.

React — @reachbell/react

npm install @reachbell/react @reachbell/sdk

import { ReachBellProvider, useReachBell } from '@reachbell/react';

export default function App({ children }) {
  return (
    <ReachBellProvider apiKey="rb_live_yourkey" autoPrompt>
      {children}
    </ReachBellProvider>
  );
}

function SubscribeButton() {
  const { prompt, isReady, permission } = useReachBell();
  if (!isReady) return <button disabled>Loading…</button>;
  if (permission === 'granted') return <span>You're subscribed</span>;
  return <button onClick={() => prompt()}>Enable notifications</button>;
}

The provider is StrictMode-safe and the underlying SDK ignores double-init by default. See the React guide for hooks reference.

Next.js

In the App Router, drop the provider in your root layout and mark the file "use client":

// app/providers.tsx
"use client";
import { ReachBellProvider } from '@reachbell/react';

export function Providers({ children }) {
  return (
    <ReachBellProvider apiKey={process.env.NEXT_PUBLIC_REACHBELL_KEY!} autoPrompt>
      {children}
    </ReachBellProvider>
  );
}

// app/layout.tsx
import { Providers } from './providers';
export default function RootLayout({ children }) {
  return (
    <html lang="en">
      <body>
        <Providers>{children}</Providers>
      </body>
    </html>
  );
}

For service worker scope, place reachbell-sw.js in public/ — Next serves the public/ directory from the site root, which is exactly where the SW needs to live.

WordPress

Install the ReachBell plugin from the WordPress.org plugin directory. From Settings → ReachBell, paste your API key. The plugin handles:

  • Enqueuing the SDK (assets/reachbell.js bundled inside the plugin) on every front-end page.
  • Serving reachbell-sw.js from https://yoursite.com/reachbell-sw.js via a rewrite rule, with the required Service-Worker-Allowed: / header.
  • Optional auto-push on post publish (asynchronous — never blocks the editor).

See the WordPress guide for the full setup.

Verifying the install

After init runs, the SDK does the following:

  1. GET /projects/context with your API key → fetches the prompt config and VAPID public key.
  2. navigator.serviceWorker.register('/reachbell-sw.js') → installs the SW.
  3. If autoPrompt: true, arms a user-gesture listener that shows the soft prompt on the first interaction.

Check the browser DevTools' Application → Service Workers tab. A registered worker for reachbell-sw.js confirms steps 1 and 2 succeeded.

What's next?

Previous

Concepts

Next

JavaScript