npm package: @misterzik/whatsapp-bizchat
Description: A premium floating WhatsApp Business chat widget component for React applications with multi-language support
Author: MisterZik
Latest version: 1.0.1

# 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

```bash
npm install whatsapp-bizchat
```

or

```bash
yarn add whatsapp-bizchat
```

## Usage

### Basic Example

```tsx
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

```tsx
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

```tsx
// 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

```tsx
// 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

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

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

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

### Custom Colors

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

### Custom Styling

```tsx
<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.