Messenger installation

The Messenger — live chat, help center, changelog feed, and news — is the only Featurebase surface that auto-boots from your universal SDK install. As soon as you finish Installation overview and Support is enabled in your dashboard, the floating launcher appears in your app.

Step 1 — Install the Featurebase SDK

Every widget — including the Messenger — inherits its appId and the signed-in user from a single universal Featurebase install at your app root. Do that first, then come back here to configure the Messenger and drive it from your UI.

👉 Follow Installation overview (it takes about 2 minutes). Your appId lives in Settings → Developers → Installation.

👤 Logged-in product? Use a server-signed featurebaseJwt on the universal boot so conversations, read state, and contact attributes flow to the right person. See Identifying users & syncing data.

Step 2 — Configure & drive the Messenger

Unlike the other widgets, the Messenger has no separate mount call — the floating launcher appears automatically as soon as Step 1 is done and the Support module is enabled. Everything below is optional: tweak its appearance, open it from your own button, react to unread changes, or opt it out on a specific surface.

Turn the Messenger on or off

The Messenger is gated by the Support module. Toggle it in Settings → General → Manage modules to enable or disable the surface end-to-end. Visual customization (colors, default state, business hours, etc.) lives under Settings → Support → Customization.

Need to opt out of the Messenger on a specific page (e.g. a marketing landing page) without touching the dashboard? Pass messenger={false}:

Example
React
Vanilla
Copy
<FeaturebaseProvider appId="YOUR_APP_ID" messenger={false}>
  <MarketingPage />
</FeaturebaseProvider>

User identity

Identity is inherited from the universal install. Once a signed featurebaseJwt is on the boot call, the Messenger automatically associates conversations with the right contact — no extra wiring per surface.

👉 Full guide: Identifying users & syncing data.

Customize the Messenger (props)

The Messenger reads its appearance and launcher behavior from the same boot call you already have. Common props you may want to set:

• theme — 'light' or 'dark'

• language — BCP-47 short code (e.g. 'en', 'de', 'fr')

• hideDefaultLauncher — hide the built-in floating launcher and open the Messenger from your own button via show()

• alignment — 'left' or 'right'

• horizontalPadding / verticalPadding — px offsets from the side / bottom

Example
React
Vanilla
Copy
// Update the same <FeaturebaseProvider> from your universal install.
'use client';
import { FeaturebaseProvider } from 'featurebase-js/react';

export default function RootLayout({ children, user }) {
  return (
    <FeaturebaseProvider
      appId="YOUR_APP_ID"
      featurebaseJwt={user?.featurebaseJwt}
      theme="dark"               // 'light' | 'dark'
      language="en"              // BCP-47 short code (en, de, fr, ...)
      hideDefaultLauncher        // hide built-in launcher; open with show()
      alignment="left"           // 'left' | 'right'
      horizontalPadding={24}     // px from the side
      verticalPadding={80}       // px from the bottom
    >
      {children}
    </FeaturebaseProvider>
  );
}

Drive the Messenger from your UI (methods)

Once the Messenger is mounted, you can open / close it, jump to a specific space, pre-fill a new message, or react to unread changes — from any component in your app.

Example
React
Vanilla
Copy
'use client';
import { useFeaturebase } from 'featurebase-js/react';

export function ChatLauncher() {
  const {
    show,                  // open the messenger
    hide,                  // close it
    showSpace,             // 'home' | 'messages' | 'help' | 'changelog'
    showMessages,          // shortcut for showSpace('messages')
    showArticle,           // open a specific help article by id or slug
    showChangelog,         // open changelog index, or pass an id for a specific entry
    showConversation,      // open a specific conversation by id
    showNewMessage,        // open the new-message composer (optionally pre-filled)
    setTheme,              // change theme at runtime ('light' | 'dark')
    setLanguage,           // change language at runtime
    update,                // re-identify the current visitor without re-booting
    shutdown,              // tear down the messenger (use on logout)
    unreadCount,           // reactive — re-renders on change
  } = useFeaturebase();

  return (
    <button onClick={show}>
      Chat {unreadCount > 0 && <span>({unreadCount})</span>}
    </button>
  );
}

Both stacks expose the same set of named functions — there is no Featurebase('action', …) string channel. The React hook just memoises them onto a context-aware object.

FAQ