@digitalbar/lead-assistant

A powerful, customizable chat widget for lead capture and customer engagement. Built with React, TypeScript, and Tailwind CSS.

✨ Features

• 🎨 Industry Presets - Pre-configured for CLN, retail, healthcare, real estate, SaaS, and financial
• 📱 Mobile Responsive - Optimized for all screen sizes
• 🎯 Lead Capture - Customizable form fields with validation
• 💬 Chat Interface - Built-in chat UI with typing indicators
• 📞 Voice Ready - Callbacks for voice integration (Retell, Twilio, etc.)
• 🔌 Webhook Integration - Send leads directly to your backend
• 🎨 Fully Customizable - Override colors, text, fields, and behavior
• ⚡ Lightweight - < 20KB gzipped
• 🔒 TypeScript - Full type safety and IntelliSense support

📦 Installation

npm install @digitalbar/lead-assistant
# or
yarn add @digitalbar/lead-assistant
# or
bun add @digitalbar/lead-assistant

🚀 Quick Start

React/Next.js

import { ChatWidget } from '@digitalbar/lead-assistant'

function App() {
  return (
    // CLN (Cowboy Lifestyle Network) preset
    <ChatWidget preset="cln" />
  )
}

Available Presets

// CLN Partnership Assistant
<ChatWidget preset="cln" />

// Retail & E-commerce
<ChatWidget preset="retail" />

// Healthcare & Medical
<ChatWidget preset="healthcare" />

// Real Estate
<ChatWidget preset="realestate" />

// SaaS & Tech
<ChatWidget preset="saas" />

// Financial Services
<ChatWidget preset="financial" />

Custom Configuration

<ChatWidget 
  config={{
    brand: {
      name: "My Company",
      tagline: "We're here to help"
    },
    colors: {
      primary: "#5046e5",
      text: {
        primary: "#1a1a1a",
        secondary: "#6b7280",
        inverse: "#ffffff"
      }
    },
    widget: {
      title: "Support Team",
      buttonText: "Get Help",
      position: "bottom-right"
    },
    api: {
      chatEndpoint: '/api/chat'
    }
  }}
/>

Preset with Overrides

<ChatWidget 
  preset="retail"
  config={{
    colors: {
      primary: "#FF0000"  // Override just the primary color
    },
    widget: {
      buttonText: "Shop with Expert"  // Override button text
    }
  }}
/>

📋 Industry Presets

Digital Bar (AI Solutions)

Perfect for AI/tech companies offering solutions and services.

• Colors: Black primary with yellow/orange accents
• Fields: Name, Email, Phone, Company, Interest dropdown
• Features: Voice calls, scheduling, knowledge base

Retail

Optimized for e-commerce and retail businesses.

• Colors: Orange primary with teal accents
• Fields: Name, Email, Phone, Shopping interest dropdown
• Features: Voice calls for product inquiries

Healthcare

Designed for medical practices and healthcare providers.

• Colors: Blue primary with green secondary
• Fields: Required name/phone, appointment types
• Features: Voice calls, appointment scheduling

Real Estate

Built for property agents and real estate firms.

• Colors: Dark blue with green accents
• Fields: Required email/phone, property interests
• Features: Voice calls, viewing scheduling, file uploads

SaaS

Tailored for software companies and tech support.

• Colors: Purple primary with cyan accents
• Fields: Company field, support topics
• Features: Knowledge base, file uploads, scheduling

Financial Services

Configured for banks and financial advisors.

• Colors: Navy blue with gold accents
• Fields: Required contact info, service types
• Features: Voice calls, consultation scheduling

🎨 Full Configuration Options

interface Config {
  // Brand Identity
  brand: {
    name: string
    tagline?: string
  }
  
  // Colors
  colors: {
    primary: string
    primaryHover?: string
    secondary?: string
    accent?: string
    text: {
      primary: string
      secondary: string
      inverse: string
    }
    background: {
      primary: string
      secondary: string
      chat: string
      input: string
    }
    border: string
    shadow: string
  }
  
  // Widget Settings
  widget: {
    title: string
    subtitle?: string
    position: "bottom-right" | "bottom-left"
    buttonText: string
    formTitle: string
    formSubtitle?: string
    welcomeMessage: string
    placeholder: string
  }
  
  // Form Fields (all optional!)
  fields: {
    name?: {
      enabled: boolean
      required?: boolean
      label: string
      placeholder: string
    }
    email?: {
      enabled: boolean
      required?: boolean
      label: string
      placeholder: string
    }
    phone?: {
      enabled: boolean
      required?: boolean
      label: string
      placeholder: string
    }
    company?: {
      enabled: boolean
      required?: boolean
      label: string
      placeholder: string
    }
    interest?: {
      enabled: boolean
      required?: boolean
      label: string
      options?: string[]  // For dropdown
      placeholder: string
    }
  }
  
  // Features
  features: {
    voiceCall?: boolean
    scheduling?: boolean
    fileUpload?: boolean
    knowledgeBase?: boolean
  }
  
  // API Configuration
  api: {
    chatEndpoint: string
    voiceEndpoint?: string
    webhookUrl?: string
    retellAgentId?: string
  }
}

🔌 API Integration

Your chat endpoint should handle POST requests:

// POST /api/chat
{
  messages: Array<{ role: 'user' | 'assistant', content: string }>,
  name?: string,
  email?: string,
  phone?: string,
  interest?: string,
  company?: string,
  metadata?: Record<string, any>,
  preset?: string  // The preset name being used
}

// Response
{
  reply: string,
  action?: 'schedule',
  calUrl?: string
}

🎙️ Voice Integration

<ChatWidget 
  preset="digitalbar"
  onStartCall={(data) => {
    console.log('Call initiated:', data)
    // data contains: name, email, phone, interest, company
    // Integrate with your voice provider (Retell, Twilio, etc.)
  }}
/>

📊 Advanced Examples

Custom Field Configuration

<ChatWidget 
  config={{
    fields: {
      name: {
        enabled: true,
        required: true,
        label: "Full Name*",
        placeholder: "Enter your full name"
      },
      email: {
        enabled: true,
        required: false,  // Optional
        label: "Email (for order updates)",
        placeholder: "[email protected]"
      },
      interest: {
        enabled: true,
        required: true,
        label: "How can we help?*",
        options: [
          "Schedule Demo",
          "Pricing Info",
          "Technical Support",
          "Other"
        ],
        placeholder: "Choose one..."
      }
    }
  }}
/>

With Metadata Tracking

<ChatWidget 
  preset="retail"
  metadata={{
    source: 'homepage',
    campaign: 'black-friday',
    userId: user?.id,
    sessionId: sessionId
  }}
  showPoweredBy={false}  // Hide "Powered by DigitalBar"
/>

Complete Implementation

import { ChatWidget } from '@digitalbar/lead-assistant'
import { useUser } from '@/hooks/useUser'

function App() {
  const user = useUser()
  
  const handleVoiceCall = async (data) => {
    // Start voice session
    const response = await fetch('/api/voice/start', {
      method: 'POST',
      body: JSON.stringify(data)
    })
    const { sessionId } = await response.json()
    
    // Open voice modal or redirect
    openVoiceInterface(sessionId)
  }
  
  return (
    <>
      {/* Your app */}
      
      <ChatWidget 
        preset="digitalbar"
        config={{
          colors: {
            primary: "#6366f1"  // Custom brand color
          },
          api: {
            chatEndpoint: process.env.NEXT_PUBLIC_CHAT_API,
            retellAgentId: process.env.NEXT_PUBLIC_RETELL_ID
          }
        }}
        onStartCall={handleVoiceCall}
        metadata={{
          userId: user?.id,
          plan: user?.plan,
          source: 'app'
        }}
        showPoweredBy={!user?.isPro}  // Hide for pro users
      />
    </>
  )
}

📱 Mobile Optimization

The widget is fully responsive with:

• Touch-friendly buttons and inputs
• Optimized form layout for small screens
• Smooth animations that respect reduced motion
• Keyboard support with proper focus management

🛠️ TypeScript Support

Full TypeScript support with exported types:

import type { 
  ChatWidgetProps,
  Config,
  PresetName 
} from '@digitalbar/lead-assistant'

📄 License

MIT © DigitalBar

🤝 Support

For issues, questions, or feature requests, visit github.com/digitalbar/lead-assistant