Quick Start

import { Userbubble } from "@userbubble/web";

Userbubble.init({
  apiKey: "ub_live_xxxxxxxxxxxxx",
  position: "bottom-right",
  theme: "auto",
});

await Userbubble.identify({
  id: "user_123",
  email: "jane@example.com",
  name: "Jane Doe",
});

Userbubble.open(); // Opens the feedback panel
Userbubble.open("/roadmap"); // Opens the roadmap tab

Userbubble.logout();

import {
  UserbubbleProvider,
  UserbubbleWidget,
} from "@userbubble/web/react";

function App() {
  return (
    <UserbubbleProvider config={{ apiKey: "ub_live_xxxxxxxxxxxxx" }}>
      <MyApp />
      <UserbubbleWidget />
    </UserbubbleProvider>
  );
}

import { useUserbubble } from "@userbubble/web/react";

function MyApp() {
  const { identify, open, isIdentified } = useUserbubble();

  const handleLogin = async () => {
    await identify({
      id: "user_123",
      email: "jane@example.com",
      name: "Jane Doe",
    });
  };

  return (
    <div>
      <button onClick={handleLogin}>Login</button>
      {isIdentified && (
        <button onClick={() => open()}>Open Feedback</button>
      )}
    </div>
  );
}

const { logout } = useUserbubble();

const handleLogout = () => {
  logout();
};