@shivamprasad99/chatbot-sdk

A reusable React floating chatbot widget for RocketAEO. This package is fully isolated, styled with Tailwind CSS v4, and buildable for production.

Installation

This package is designed as a standalone module. Install React peer dependencies in the host project:

npm install react react-dom @shivamprasad99/chatbot-sdk

Usage

In a React Application

Import the chatbot widget and its styles in your application:

import React from 'react';
import { ChatbotWidget } from '@shivamprasad99/chatbot-sdk';
import '@shivamprasad99/chatbot-sdk/style.css';

export default function App() {
  return (
    <ChatbotWidget
      enabled={true}
      siteId="rocketaeo"
      sessionEndpoint="https://api.yourvoiceplatform.com/api/voice/session"
      title="Bofubot"
      subtitle="Hi, I'm Bofubot - your guide to RocketAEO"
      greeting="Hi there! I'm your RocketAEO assistant. How can I help you today?"
      storageKey="rocket_aeo_landing_chatbot_v1"
      metadata={{ source: 'my-app' }}
    />
  );
}

Lead Email Capture (In-Chat)

<ChatbotWidget
  enabled={true}
  siteId="rocketaeo"
  sessionEndpoint="https://api.yourvoiceplatform.com/api/voice/session"
  collectEmailAtStart={true}
/>

When enabled, the widget first shows an email input card inside the chat window, then calls:

• POST /api/voice/session/{voice_session_id}/lead

Payload shape used by the SDK:

{
  "details": {
    "work_email": "[email protected]"
  },
  "consent": {
    "contact_consent": true,
    "consent_text_version": "v1"
  }
}

After a successful save, normal text/voice chat flow continues unchanged.

Props Reference

| Prop Name | Type | Description | |---|---|---| | enabled | boolean | Enables/disables the chatbot widget. | | sessionEndpoint | string | The API endpoint to initiate the voice/text session. | | siteId | string | Site identifier for the voice platform. | | storageKey | string | The browser sessionStorage key for persisting chat history. | | title | string | Chat window title. | | subtitle | string | Chat window subtitle/description. | | greeting | string | Optional initial assistant greeting message. If omitted or blank, no greeting is inserted. | | emptyStateTitle | string | Header text when there are no messages. | | emptyStateDescription| string | Sub-text when there are no messages. | | metadata | object | Custom metadata object passed to the backend. | | autoOpen | boolean | Control widget open/closed state programmatically. | | enableCampaignAutoOpen| boolean | Enables opening the chat via URL params (bot=open, utm_source=email). | | createVoiceClient | function | Optional override for creating the voice transport client. By default, the SDK uses its bundled web voice client. | | sanitizeHtml | function | Optional custom HTML sanitizer for markdown output. | | collectEmailAtStart | boolean | If true, chat and voice controls stay locked until the user submits an email in-chat. | | leadEndpointBase | string | Optional base endpoint for lead upsert. Defaults to sessionEndpoint. The SDK posts to {base}/{voice_session_id}/lead. | | leadConsent | object | Optional consent/details overrides for lead upsert. Supports contact_consent, marketing_opt_in, consent_text_version, and linkedin_url. |

Development and Building

To build the library locally for distribution:

1. Install dependencies:

   npm install

2. Build the output formats (ESM, UMD, and CSS):

   npm run build

This generates the dist/ directory containing:

• chatbot-sdk.js - ES module build.
• chatbot-sdk.umd.cjs - CommonJS/UMD build.
• style.css - Standalone compiled Tailwind v4 CSS.