@sebaran/widget

React widget for Sebaran — embed WhatsApp instance connection and message history into your app.

Install

npm install @sebaran/widget
# or
pnpm add @sebaran/widget
# or
yarn add @sebaran/widget

Quick Start

import { WhatsAppWidget } from "@sebaran/widget";
import "@sebaran/widget/styles.css";

function App() {
  return (
    <div style={{ maxWidth: 640, margin: "0 auto" }}>
      <WhatsAppWidget
        instanceId="your-instance-id"
        apiKey="your-api-key"
      />
    </div>
  );
}

That's it. The widget handles:

• Displaying a QR code when the WhatsApp session is not connected
• Auto-connecting when the instance status is pending
• Showing message history once connected

Props

| Prop | Type | Default | Description | |------|------|---------|-------------| | instanceId | string | required | Your Sebaran instance ID | | apiKey | string | required | API key for authentication |

What's Included

• QR Code View — scan with WhatsApp to connect your instance
• Instance Info — shows connected phone number, name, and status
• Message History — paginated table with source, type, recipient, status, and timestamps
• Message Detail — click any message to see it rendered as a WhatsApp-style chat bubble
• Error Details — click a failed status to view the error reason

Styles

Import the CSS file once in your app entry point:

import "@sebaran/widget/styles.css";

The widget uses Tailwind CSS classes. If your project already uses Tailwind, the widget styles will blend in automatically. If not, the bundled CSS includes all necessary styles.

Types

interface Instance {
  id: string;
  label: string;
  phone_number: string | null;
  wa_name: string | null;
  status: "pending" | "connected" | "disconnected" | "logged_out";
}

License

MIT