React Floating WhatsApp Component 💬

The most customizable and feature-rich React WhatsApp floating button component - Add professional WhatsApp integration to your website with TypeScript support, dark mode, notifications, and seamless user experience.

🌟 Why Choose React Floating WhatsApp?

Perfect for e-commerce, customer support, lead generation, and business websites that need instant customer communication. Used by thousands of developers worldwide!

🚀 Quick Installation & Setup

NPM Installation

npm install @dxkit-org/react-floating-whatsapp

Yarn Installation

yarn add @dxkit-org/react-floating-whatsapp

PNPM Installation

pnpm add @dxkit-org/react-floating-whatsapp

💻 Basic Usage Example

Get started in seconds with this simple implementation:

import React from 'react'
import { FloatingWhatsApp } from '@dxkit-org/react-floating-whatsapp'

export default function App() {
  return (
    <FloatingWhatsApp
      phoneNumber='1234567890'
      accountName='Your Business'
      avatar='/path/to/avatar.jpg'
      statusMessage='Typically replies within 1 hour'
      chatMessage='Hello! 👋 How can we help you today?'
      darkMode={false}
      allowClickAway={true}
      allowEsc={true}
      notification={true}
      notificationSound={true}
    />
  )
}

🎨 Advanced Usage with Custom Styling

import React from 'react'
import { FloatingWhatsApp } from '@dxkit-org/react-floating-whatsapp'

export default function App() {
  const handleSubmit = (event, message) => {
    console.log('Message sent:', message)
    // Add your custom logic here
  }

  return (
    <FloatingWhatsApp
      phoneNumber='1234567890'
      accountName='Customer Support'
      onSubmit={handleSubmit}
      className='custom-whatsapp-widget'
      buttonStyle={{ backgroundColor: '#25D366' }}
      chatboxStyle={{ borderRadius: '20px' }}
      darkMode={true}
      notification={true}
      notificationDelay={30}
    />
  )
}

📋 Complete API Reference & Props

Customize every aspect of your WhatsApp widget with these comprehensive props:

🎯 Live Demo & Playground

Try it live on CodeSandbox and see all features in action!

✨ Key Features & Benefits

• 🚀 Zero Configuration - Works out of the box with minimal setup
• 💼 Full TypeScript Support - Complete type safety and IntelliSense
• 🎨 Highly Customizable - Custom styling with CSS classes and inline styles
• 🌙 Dark/Light Mode - Built-in theme switching capability
• 🔔 Smart Notifications - Configurable notification system with sound support
• 📱 Mobile Responsive - Perfect on all devices and screen sizes
• ⌨️ Accessibility Ready - Full keyboard navigation and ESC key support
• 🖱️ Click Outside to Close - Intuitive user interaction patterns
• 🎯 Event Callbacks - Hook into click, submit, close, and notification events
• 📞 Direct WhatsApp Integration - Seamless connection to WhatsApp Web/App
• ⚡ Lightweight - Minimal bundle size impact on your application
• 🔧 Framework Agnostic - Works with Next.js, Gatsby, CRA, and more

🏢 Perfect For

• E-commerce Websites - Instant customer support and sales assistance
• Business Websites - Lead generation and customer inquiries
• Service Providers - Quick booking and consultation requests
• SaaS Applications - User support and onboarding assistance
• Portfolio Sites - Direct client communication
• Landing Pages - Convert visitors into leads

🌐 Browser Support

• ✅ Chrome (Latest)
• ✅ Firefox (Latest)
• ✅ Safari (Latest)
• ✅ Edge (Latest)
• ✅ Mobile browsers (iOS Safari, Chrome Mobile)

📦 What's Included

• React component with TypeScript definitions
• Default avatars and sound files
• CSS modules for styling
• Comprehensive documentation
• Live examples and demos

🤝 Contributing & Support

We welcome contributions! Please see our Contributing Guide for details.

• 🐛 Bug Reports: GitHub Issues
• 💡 Feature Requests: GitHub Discussions
• 📧 Email Support: adarsh@primexop.com

📊 NPM Stats

• Weekly Downloads: Growing rapidly
• Bundle Size: Lightweight and optimized
• Dependencies: Minimal peer dependencies (React 18+)
• TypeScript: Full type coverage

🔗 Related Packages

Looking for more React components? Check out our other packages:

• @dxkit-org/react-components - Complete UI component library
• More coming soon!

⭐ Show Your Support

If this package helped you, please consider:

• ⭐ Starring the GitHub repository
• 🐦 Sharing on Twitter with #ReactFloatingWhatsApp
• 📝 Writing a review or blog post
• 🤝 Contributing to the project

🙏 Credits & Acknowledgments

This project is forked from awran5/react-floating-whatsapp with significant enhancements including:

• TypeScript improvements
• Additional customization options
• Enhanced notification system
• Better accessibility
• Improved documentation
• Bug fixes and stability improvements

Special thanks to all contributors and the React community!

📄 License

MIT © dxkit-org