@initdai/lead-capture

A configurable lead capture form plugin for initd.ai generated apps.

Installation

npm install @initdai/lead-capture

Exports

Components

• LeadCaptureForm: A form widget for capturing lead data.

  • Props: projectId: string, fields: FieldDefinition[], theme?: 'light' | 'dark', submitLabel?: string, onSuccess?: () => void, onError?: (error: Error) => void

• LeadsTable: A table widget for displaying all captured leads.

  • Props: projectId: string, fields: FieldDefinition[], theme?: 'light' | 'dark'
  • Fetches leads on mount and provides a refresh button.
  • Columns are driven by the same fields array used in LeadCaptureForm.

Hooks

• useLeadCapture: Core submission logic for custom form implementations.

  • Options: { projectId: string }
  • Returns: { submit, loading, error, success }

• useLeads: Fetches the list of captured leads for a project.

  • Options: { projectId: string }
  • Returns: { leads: Lead[], loading, error, refetch }

Types

• FieldDefinition: { name: string, label: string, type: 'text' | 'email' | 'tel' | 'number' | 'checkbox', required?: boolean, placeholder?: string }
• Lead: { id: string, createdAt: string, fields: Record<string, string | number | boolean> }

Usage

Capture form

import { LeadCaptureForm } from '@initdai/lead-capture';

<LeadCaptureForm
  projectId="my-project-id"
  fields={[
    { name: 'email', label: 'Email', type: 'email', required: true },
    { name: 'name', label: 'Name', type: 'text', required: true },
  ]}
  onSuccess={() => alert('Thanks!')}
/>

Leads table

import { LeadsTable } from '@initdai/lead-capture';

<LeadsTable
  projectId="my-project-id"
  fields={[
    { name: 'email', label: 'Email', type: 'email' },
    { name: 'name', label: 'Name', type: 'text' },
  ]}
/>

Custom UI with hooks

import { useLeadCapture, useLeads } from '@initdai/lead-capture';

// Submit a lead
function MyForm({ projectId }: { projectId: string }) {
  const { submit, loading, error, success } = useLeadCapture({ projectId });

  const handleSubmit = async () => {
    await submit({ email: '[email protected]', name: 'Jane' });
  };

  if (success) return <p>Thank you!</p>;

  return (
    <button onClick={handleSubmit} disabled={loading}>
      {loading ? 'Submitting…' : 'Submit'}
    </button>
  );
}

// List leads
function MyLeadsList({ projectId }: { projectId: string }) {
  const { leads, loading, error, refetch } = useLeads({ projectId });

  if (loading) return <p>Loading…</p>;
  if (error) return <p>Error: {error.message}</p>;

  return (
    <ul>
      {leads.map((lead) => (
        <li key={lead.id}>{JSON.stringify(lead.fields)}</li>
      ))}
    </ul>
  );
}

API

Submit a lead

POST /projects/{projectId}/plugin
Cookie: guestToken (sent automatically via credentials: 'include')
Body: {
  pluginId: "lead-capture",
  action: "submit",
  payload: { fields: Record<string, string | number | boolean> }
}

List leads

GET /projects/{projectId}/plugin?pluginId=lead-capture&action=list
Cookie: guestToken (sent automatically via credentials: 'include')
Response: Lead[]