Documentation

Learn how to integrate OnboardPad into your applications

@onboardpad/react
Official React component for OnboardPad

Installation

npm install @onboardpad/react

Quick Start

import { OnboardPad } from '@onboardpad/react';

export default function App() {
  return (
    <div>
      <OnboardPad widgetId="your-widget-id" />
    </div>
  );
}

With Callbacks

import { OnboardPad } from '@onboardpad/react';

export default function App() {
  const handleSubmit = (data) => {
    console.log('Submitted:', data);
  };

  const handleClose = () => {
    console.log('Widget closed');
  };

  return (
    <OnboardPad
      widgetId="your-widget-id"
      onSubmit={handleSubmit}
      onClose={handleClose}
    />
  );
}

Props

PropTypeRequiredDefaultDescription
widgetIdstring-Your widget ID
apiEndpointstringNo"/api"API endpoint URL
onSubmitfunctionNo-Called when form is submitted
onClosefunctionNo-Called when widget is closed
autoShowbooleanNotrueShow widget immediately

Features

Multi-step form with progress indicator
Support for text, email, select, and textarea inputs
TypeScript support with full type definitions
Zero external dependencies
Responsive design
Customizable styling