@bryancheru/chat-widget

v1.0.1

Published

23 days ago

AI-powered chat widget for customer engagement and lead capture

0High
0Medium
0Low

bryancheru

react chat widget ai chatbot customer-support lead-capture

@imaralogic/chat-widget

AI-powered chat widget for customer engagement and lead capture. Built with React, designed for seamless integration with Next.js, React, and other frameworks.

Installation

npm install @imaralogic/chat-widget react react-dom

Quick Start

Next.js (App Router)

// app/components/ChatWidget.tsx
'use client';

import { ChatWidget } from '@imaralogic/chat-widget';
import '@imaralogic/chat-widget/styles.css';
import { useUser } from '@auth0/nextjs-auth0/client'; // Optional

export function ImaraChat() {
  const { user, isLoading } = useUser(); // Optional: for user context
  
  if (isLoading) return null;
  
  return (
    <ChatWidget
      config={{
        apiKey: process.env.NEXT_PUBLIC_IMARA_API_KEY!,
        botName: 'Support Assistant',
        theme: 'dark',
        primaryColor: '#06b6d4',
        
        // Optional: Pass user context
        userContext: user ? {
          userId: user.sub,
          email: user.email,
          name: user.name,
        } : undefined,
        
        // Quick action buttons
        quickActions: [
          { label: 'Get Started', text: 'How do I get started?' },
          { label: 'Pricing', text: 'Tell me about pricing' },
        ],
      }}
    />
  );
}

// app/layout.tsx
import { ImaraChat } from './components/ChatWidget';

export default function RootLayout({ children }) {
  return (
    <html>
      <body>
        {children}
        <ImaraChat />
      </body>
    </html>
  );
}

React (Vite/CRA)

// App.tsx
import { ChatWidget } from '@imaralogic/chat-widget';
import '@imaralogic/chat-widget/styles.css';

function App() {
  return (
    <div>
      <ChatWidget
        config={{
          apiKey: import.meta.env.VITE_IMARA_API_KEY,
          botName: 'Support Bot',
          theme: 'light',
        }}
      />
    </div>
  );
}

Configuration

Complete Config Example

<ChatWidget
  config={{
    // Required
    apiKey: 'your-api-key',
    
    // Branding
    botName: 'Your Bot Name',
    theme: 'dark', // 'light' | 'dark'
    primaryColor: '#06b6d4',
    accentColor: '#2563eb',
    headerSubtitle: 'Online • Replies instantly',
    
    // Initial message
    initialMessage: 'Welcome! How can I help you today?',
    
    // Quick actions (buttons above input)
    quickActions: [
      { label: 'Get Started', text: 'How do I get started?' },
      { label: 'Pricing', text: 'What are your prices?' },
      { label: 'Demo', text: 'Schedule a demo' },
    ],
    
    // User context (for personalization)
    userContext: {
      userId: 'user-123',
      email: '[email protected]',
      name: 'John Doe',
      isSubscribed: true,
      plan: 'pro',
      metadata: {
        company: 'Acme Inc',
        role: 'admin',
      },
    },
    
    // Features
    enableYouTubeEmbed: true,
    
    // Proactive popup
    proactivePopup: {
      enabled: true,
      delay: 5000, // 5 seconds
      message: '👋 Need help? Chat with us!',
    },
    
    // Booking integration (Cal.com)
    booking: {
      enabled: true,
      calLink: 'your-username/30min',
      buttonText: 'Schedule a Call',
      triggerKeywords: ['demo', 'call', 'meeting'],
    },
    
    // Page rules
    pageRules: {
      showOnPages: ['/pricing', '/contact'],
      hideOnPages: ['/admin', '/login'],
    },
    
    // Event callback
    onEvent: (event) => {
      console.log('Widget event:', event);
      
      if (event.type === 'lead:created') {
        // Track in analytics
        analytics.track('Lead Captured', event.data);
      }
      
      if (event.type === 'intent:subscribe') {
        // Redirect to pricing
        window.location.href = '/pricing';
      }
    },
  }}
/>

Events

Listen to widget events:

<ChatWidget
  config={{
    apiKey: 'your-key',
    onEvent: (event) => {
      switch (event.type) {
        case 'chat:opened':
          console.log('Chat opened');
          break;
        
        case 'chat:closed':
          console.log('Chat closed, messages:', event.messageCount);
          break;
        
        case 'lead:created':
          console.log('Lead captured:', event.data);
          // { email, phone, name }
          break;
        
        case 'message:sent':
          console.log('User sent:', event.message);
          break;
        
        case 'message:received':
          console.log('Bot replied:', event.message);
          break;
        
        case 'intent:subscribe':
          // User expressed interest in subscribing
          window.location.href = '/pricing';
          break;
        
        case 'intent:booking':
          // User wants to book a call
          console.log('Cal.com link:', event.calLink);
          break;
        
        case 'error':
          console.error('Widget error:', event.message);
          break;
      }
    },
  }}
/>

Styling

The widget includes default styles via styles.css. For custom styling:

// Import default styles
import '@imaralogic/chat-widget/styles.css';

// Override with custom CSS
import './custom-widget-styles.css';

/* custom-widget-styles.css */
#imara-chatbot-root {
  /* Widget container customization */
}

TypeScript

Full TypeScript support included:

import type { ChatBotConfig, ImaraEvent } from '@imaralogic/chat-widget';

const config: ChatBotConfig = {
  apiKey: 'your-key',
  theme: 'dark',
};

function handleEvent(event: ImaraEvent) {
  // Fully typed event handling
}

TradePilot AI Example

'use client';

import { useUser } from '@auth0/nextjs-auth0/client';
import { ChatWidget } from '@imaralogic/chat-widget';
import '@imaralogic/chat-widget/styles.css';

export function TradeCopilot() {
  const { user, isLoading } = useUser();
  
  return (
    <ChatWidget
      config={{
        apiKey: process.env.NEXT_PUBLIC_IMARA_API_KEY!,
        
        // Branding
        botName: 'TradePilot AI Chatbot',
        theme: 'dark',
        primaryColor: '#06b6d4',
        accentColor: '#2563eb',
        headerSubtitle: 'Online • Replies instantly',
        
        // Trading bot specific greeting
        initialMessage: `Welcome to TradePilot AI! I'm TradeCopilot...`,
        
        // Quick actions for traders
        quickActions: [
          { label: "I'm new to this", text: "I'm a beginner - which bot should I start with?" },
          { label: 'Show examples', text: 'Show me performance examples' },
          { label: 'Lifetime vs Monthly', text: 'Why choose lifetime over monthly?' },
          { label: 'Risk protection', text: 'How do I protect against losses?' },
        ],
        
        // User context from Auth0
        userContext: user ? {
          userId: user.sub,
          email: user.email,
          name: user.name,
          isSubscribed: !!(user['https://tradepilotai.com/subscription']),
          plan: user['https://tradepilotai.com/subscription']?.plan,
        } : undefined,
        
        // Features
        enableYouTubeEmbed: true,
        proactivePopup: {
          enabled: true,
          delay: 5000,
          message: '💬 Chat with TradeCopilot',
        },
        
        // Track events
        onEvent: (event) => {
          if (event.type === 'intent:subscribe') {
            window.location.href = '/trading-bots#pricing';
          }
          
          if (event.type === 'lead:created') {
            window.gtag?.('event', 'lead_captured', {
              event_category: 'chat',
              event_label: 'imara_chatbot',
            });
          }
        },
      }}
    />
  );
}

Getting Your API Key

Sign up at imaralogic.co.ke
Navigate to Settings → API Keys
Create a new API key for your domain
Add to your environment variables:

# .env.local (Next.js)
NEXT_PUBLIC_IMARA_API_KEY=your_api_key_here

# .env (Vite)
VITE_IMARA_API_KEY=your_api_key_here

Browser Support

Chrome (last 2 versions)
Firefox (last 2 versions)
Safari (last 2 versions)
Edge (last 2 versions)

License

MIT

Support

Documentation: imaralogic.co.ke/docs
Email: [email protected]
GitHub Issues: github.com/imaralogic/chat-widget