<FeaturebaseProvider appId="YOUR_APP_ID" messenger={false}>
  <MarketingPage />
</FeaturebaseProvider>

Featurebase({
  appId: 'YOUR_APP_ID',
  messenger: false,
});

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

import Featurebase from 'featurebase-js';

Featurebase({
  appId: 'YOUR_APP_ID',
  featurebaseJwt: user?.featurebaseJwt,
  theme: 'dark',                 // 'light' | 'dark'
  language: 'en',                // BCP-47 short code
  hideDefaultLauncher: true,     // hide built-in launcher; open with show()
  alignment: 'left',             // 'left' | 'right'
  horizontalPadding: 24,         // px from the side
  verticalPadding: 80,           // px from the bottom
});

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

import {
  show, hide, showSpace, showMessages, showArticle, showChangelog,
  showConversation, showNewMessage, setTheme, setLanguage,
  update, shutdown,
  whenReady, onShow, onHide, onUnreadCountChange,
} from 'featurebase-js';

show();                                 // open the messenger
hide();                                 // close it
showSpace('help');                      // 'home' | 'messages' | 'help' | 'changelog'
showArticle('billing-faq');             // by id or slug
showChangelog();                        // index, or pass an id for a specific entry
showConversation('conv_8q2x');
showNewMessage('I want to upgrade');    // pre-filled composer
setTheme('dark');
setLanguage('fr');

// Wrap subscriptions in whenReady() — boot is async.
whenReady(() => {
  onShow(() => console.log('messenger opened'));
  onHide(() => console.log('messenger closed'));
  onUnreadCountChange((count) => {
    document.title = count > 0 ? `(${count}) Acme` : 'Acme';
  });
});