WhatsApp Bizchat

A premium, feature-rich floating WhatsApp Business support button component for React applications with TypeScript support. Stand out from basic buttons with advanced features like chat previews, multi-language support, business hours, and more!

✨ Features

Core Features

• 🎨 Fully customizable - Colors, sizes, positions, and custom icons
• 📱 Responsive design - Mobile-optimized with adaptive layouts
• 🎯 Smart positioning - 4 corner positions with custom offsets
• 💬 Pre-filled messages - Start conversations with context
• 🎭 Smooth animations - Professional hover effects and transitions
• 📦 TypeScript support - Full type definitions included
• 🪶 Zero dependencies - Lightweight and performant
• ♿ Accessible - ARIA labels and keyboard support

🚀 Advanced Features (What Makes Us Different!)

• 🌍 Multi-language support - 10 languages built-in (EN, ES, FR, DE, PT, IT, ZH, JA, AR, RU)
• 💬 Chat popup preview - Beautiful chat widget before opening WhatsApp
• 🔔 Notification badges - Show unread message counts
• ⚡ Pulse animations - Eye-catching attention grabber
• 🕐 Business hours - Auto-detect availability with timezone support
• 🎨 Theme support - Light, dark, and auto modes
• 📊 Analytics hooks - Track opens, sends, and interactions
• 🎯 Custom branding - Company logo, name, and tagline in popup

Installation

npm install whatsapp-bizchat

or

yarn add whatsapp-bizchat

Usage

Basic Example

import React from 'react';
import { WhatsappBizchat } from 'whatsapp-bizchat';

function App() {
  return (
    <div>
      <h1>My Website</h1>
      <WhatsappBizchat phoneNumber="+1234567890" />
    </div>
  );
}

export default App;

Advanced Example with Chat Popup

import React from 'react';
import { WhatsappBizchat } from 'whatsapp-bizchat';

function App() {
  return (
    <div>
      <h1>My Website</h1>
      <WhatsappBizchat
        phoneNumber="+1234567890"
        language="es"
        showPopup={true}
        companyName="Acme Support"
        companyLogo="/logo.png"
        companyTagline="We're here to help!"
        position="bottom-right"
        size="large"
        pulseAnimation={true}
        showNotificationBadge={true}
        notificationCount={3}
        showAvailability={true}
        businessHours={{
          monday: { start: '09:00', end: '18:00' },
          tuesday: { start: '09:00', end: '18:00' },
          wednesday: { start: '09:00', end: '18:00' },
          thursday: { start: '09:00', end: '18:00' },
          friday: { start: '09:00', end: '18:00' },
          timezone: 'America/New_York'
        }}
        theme="auto"
        onOpen={() => console.log('Chat opened')}
        onSend={(message) => console.log('Message sent:', message)}
      />
    </div>
  );
}

export default App;

Multi-language Example

// Spanish
<WhatsappBizchat 
  phoneNumber="+34123456789" 
  language="es" 
/>

// French
<WhatsappBizchat 
  phoneNumber="+33123456789" 
  language="fr" 
/>

// Custom translations
<WhatsappBizchat 
  phoneNumber="+1234567890" 
  language="en"
  customTranslations={{
    tooltip: 'Chat with our team!',
    defaultMessage: 'Hello, I have a question about...'
  }}
/>

📋 Props

Basic Props

| Prop | Type | Default | Description | |------|------|---------|-------------| | phoneNumber | string | Required | WhatsApp Business phone number (include country code) | | message | string | Auto (i18n) | Pre-filled message text | | position | 'bottom-right' \| 'bottom-left' \| 'top-right' \| 'top-left' | 'bottom-right' | Button position on screen | | size | 'small' \| 'medium' \| 'large' | 'medium' | Button size | | backgroundColor | string | '#25D366' | Button background color | | iconColor | string | '#ffffff' | WhatsApp icon color | | tooltip | string | Auto (i18n) | Tooltip text on hover | | zIndex | number | 9999 | CSS z-index value | | offsetX | number | 20 | Horizontal offset from edge (px) | | offsetY | number | 20 | Vertical offset from edge (px) | | className | string | '' | Additional CSS class name | | style | React.CSSProperties | {} | Additional inline styles |

🌍 Internationalization Props

| Prop | Type | Default | Description | |------|------|---------|-------------| | language | 'en' \| 'es' \| 'fr' \| 'de' \| 'pt' \| 'it' \| 'zh' \| 'ja' \| 'ar' \| 'ru' | 'en' | Interface language | | customTranslations | Partial<Translations> | {} | Override specific translations |

💬 Chat Popup Props

| Prop | Type | Default | Description | |------|------|---------|-------------| | showPopup | boolean | false | Show chat preview popup before opening WhatsApp | | companyName | string | 'Support Team' | Company name in popup header | | companyLogo | string | undefined | Company logo URL | | companyTagline | string | undefined | Tagline shown in popup |

🎨 Visual Enhancement Props

| Prop | Type | Default | Description | |------|------|---------|-------------| | showNotificationBadge | boolean | false | Show notification badge | | notificationCount | number | 0 | Number to display in badge | | pulseAnimation | boolean | false | Enable pulsing ring animation | | customIcon | React.ReactNode | WhatsApp icon | Custom icon component | | theme | 'light' \| 'dark' \| 'auto' | 'light' | Theme for popup |

🕐 Business Hours Props

| Prop | Type | Default | Description | |------|------|---------|-------------| | businessHours | BusinessHours | undefined | Define business hours by day | | showAvailability | boolean | false | Show online/offline indicator |

📊 Callback Props

| Prop | Type | Default | Description | |------|------|---------|-------------| | onClick | () => void | undefined | Called when button is clicked | | onOpen | () => void | undefined | Called when popup opens | | onClose | () => void | undefined | Called when popup closes | | onSend | (message: string) => void | undefined | Called when message is sent |

Phone Number Format

The phoneNumber prop should include the country code without the + sign or with it:

• ✅ "+1234567890"
• ✅ "1234567890"
• ✅ "+44 7911 123456" (spaces and special characters are automatically removed)

Customization Examples

Different Positions

// Bottom right (default)
<WhatsappBizchat phoneNumber="+1234567890" position="bottom-right" />

// Bottom left
<WhatsappBizchat phoneNumber="+1234567890" position="bottom-left" />

// Top right
<WhatsappBizchat phoneNumber="+1234567890" position="top-right" />

// Top left
<WhatsappBizchat phoneNumber="+1234567890" position="top-left" />

Different Sizes

// Small
<WhatsappBizchat phoneNumber="+1234567890" size="small" />

// Medium (default)
<WhatsappBizchat phoneNumber="+1234567890" size="medium" />

// Large
<WhatsappBizchat phoneNumber="+1234567890" size="large" />

Custom Colors

<WhatsappBizchat
  phoneNumber="+1234567890"
  backgroundColor="#075E54"
  iconColor="#DCF8C6"
/>

Custom Styling

<WhatsappBizchat
  phoneNumber="+1234567890"
  className="my-custom-class"
  style={{ boxShadow: '0 8px 24px rgba(0,0,0,0.3)' }}
/>

Browser Support

• Chrome (latest)
• Firefox (latest)
• Safari (latest)
• Edge (latest)
• Mobile browsers (iOS Safari, Chrome Mobile)

License

MIT

Contributing

Contributions are welcome! Please feel free to submit a Pull Request.

Support

If you encounter any issues or have questions, please file an issue on the GitHub repository.