ai-lead-score-beta

A lightweight React component library to display AI-based Lead Scores and their details in a flexible and customizable way.

This package helps you easily show lead scores, compare multiple leads, visualize score history, and even inject lead scores into existing HTML tables — without rewriting your UI.

📦 Package Overview

ai-lead-score-beta is a React-based npm package designed to show lead score data and details insights for leads.

It works out-of-the-box with minimal setup and also gives you full freedom to customize UI components according to your design system (MUI, custom CSS, etc.).

⚠️ Important Note
For now, the apiKey is static and must be:

https://www.demoapi.com

Passing any other value will not work.
This will be made dynamic in future releases.

🚀 What Can This Package Do?

• Show single lead score
• Inject lead score column into any existing table
• Display lead score details insights in dialog/sidebar
• Support fully custom UI components/styles

📥 Installation

npm install ai-lead-score-beta

yarn add ai-lead-score-beta

pnpm add ai-lead-score-beta

🧩 Components & Usage Details

Below are all available components with clear explanations and prop details.

ShowSingleLeadScore

Displays the lead score for a single student.

Props

| Prop Name | Type | Required | Description | | ----------------- | ------------------------------------------------------ | -------- | -------------------------------------- | | apiKey | string | ✅ | Must be https://www.demoapi.com | | studentId | string | ✅ | Unique student/lead ID | | CustomComponent | ComponentType<{ isLoading: boolean; score: number }> | ❌ | Custom UI for rendering score | | width | string \| number | ❌ | Width of the component | | height | string \| number | ❌ | Height of the component | | styles | CSSProperties | ❌ | Custom inline styles for the component | | primaryColor | string | ❌ | Primary theme color for the component | | theme | 'light' \| 'dark' | ❌ | Theme mode for the component |

Example

import { ShowSingleLeadScore } from "ai-lead-score-beta";

export default function SingleScoreExample() {
  return (
    <ShowSingleLeadScore
      apiKey="https://www.demoapi.com"
      studentId="STUDENT_123"
    />
  );
}

InjectLeadScoreTableColumn

Injects a Lead Score column into any existing HTML table using its ID.

Props

| Prop Name | Type | Required | Description | | ---------------------- | ------------------------------------------------------ | -------- | -------------------------------------- | | tableId | string | ✅ | Target table ID | | studentIds | string[] | ✅ | Student IDs (row-wise) | | headerName | string | ✅ | Column header text | | apiKey | string | ✅ | Static API key | | headerInjectionIndex | number | ❌ | Injection Column position | | CustomComponent | ComponentType<{ isLoading: boolean; score: number }> | ❌ | Custom cell UI | | width | string \| number | ❌ | Width of the component | | height | string \| number | ❌ | Height of the component | | styles | CSSProperties | ❌ | Custom inline styles for the component | | primaryColor | string | ❌ | Primary theme color for the component | | theme | 'light' \| 'dark' | ❌ | Theme mode for the component |

Example

import { InjectLeadScoreTableColumn } from "ai-lead-score-beta";

export default function InjectColumnExample() {
  return (
    <table id="student-table">
      <thead>
        <tr>
          <th>Name</th>
          <th>Email</th>
        </tr>
      </thead>
      <tbody>
        <tr>
          <td>John</td>
          <td>[email protected]</td>
        </tr>
        <tr>
          <td>Jane</td>
          <td>[email protected]</td>
        </tr>
      </tbody>

      <InjectLeadScoreTableColumn
        apiKey="https://www.demoapi.com"
        tableId="student-table"
        headerName="Lead Score"
        studentIds={["STUDENT_1", "STUDENT_2"]}
      />
    </table>
  );
}

LeadScoreDetailsDialog

Shows the lead score insights with history, recommendation, factors, risks, and overview in a dialog

Props

| Prop Name | Type | Required | Description | | ----------------- | ---------------------------------------- | -------- | ----------------------------------------------------- | | DialogInitiator | ComponentType<{ onClick: () => void }> | ✅ | Component that triggers opening the dialog. | | studentId | string | ✅ | Unique student/lead ID. | | apiKey | string | ✅ | Must be https://www.demoapi.com. | | dialogTitle | string | ❌ | Optional title displayed on the dialog. | | theme | themeTypes | ❌ | Theme mode for the dialog (light or dark). | | primaryColor | string | ❌ | Primary color to apply to dialog elements. | | dialogWidth | 'sm' \| 'md' \| 'lg' \| 'full' | ❌ | Width of the dialog. | | styles | React.CSSProperties | ❌ | Custom inline styles applied to the dialog container. |

Example

<LeadScoreDetailsDialog
  apiKey="https://www.demoapi.com"
  DialogInitiator={({ onClick }) => (
    <Button onClick={onClick}>Score Details</Button>
  )}
  studentId="2333443"
/>

LeadScoreDetailsSidebar

Shows the lead score insights with history, recommendation, factors, risks, and overview in a sidebar

Props

| Prop Name | Type | Required | Description | | ----------------- | ---------------------------------------- | -------- | ------------------------------------------------------ | | DialogInitiator | ComponentType<{ onClick: () => void }> | ✅ | Component that triggers opening the sidebar. | | studentId | string | ✅ | Unique student/lead ID. | | apiKey | string | ✅ | Must be https://www.demoapi.com. | | sidebarTitle | string | ❌ | Optional title displayed on the sidebar. | | theme | themeTypes | ❌ | Theme mode for the sidebar (light or dark). | | primaryColor | string | ❌ | Primary color to style sidebar elements. | | sidebarWidth | 'sm' \| 'md' \| 'lg' \| 'full' | ❌ | Width of the sidebar. | | sidebarPosition | 'left' \| 'right' | ❌ | Position of the sidebar on the screen. | | styles | React.CSSProperties | ❌ | Custom inline styles applied to the sidebar container. |

Example

<LeadScoreDetailsSidebar
  apiKey="https://www.demoapi.com"
  DialogInitiator={({ onClick }) => (
    <Button onClick={onClick}>Score Details</Button>
  )}
  studentId="2333443"
/>

🧠 Summary

• ai-lead-score-beta helps you display lead scores and insights quickly
• Works well with existing UI and tables
• Fully customizable components and UI
• Easy to integrate into any React app
• Currently uses a static API key, which will be improved later