WhatsApp Widget

A beautiful and customizable WhatsApp chat widget for React applications.

Features

• 🎨 Fully customizable appearance
• 📱 Responsive design
• ⚡ Smooth animations
• 🔄 Exit intent detection
• 🎯 Event tracking
• 💬 Customizable chat messages
• 🌈 TypeScript support

Installation

npm install avena-whatsapp-widget
# or
yarn add avena-whatsapp-widget

Usage

Import the Component and CSS

import { WhatsAppWidget } from 'avena-whatsapp-widget';
import 'avena-whatsapp-widget/dist/whatsapp-widget.css';

function App() {
  return (
    <WhatsAppWidget 
      phoneNumber="1234567890"
      companyName="Your Company"
      responseTime="We usually respond in a few minutes"
      messages={["Hello! 👋", "How can we help you?"]}
    />
  );
}

Props

| Prop | Type | Default | Description | |------|------|---------|-------------| | phoneNumber | string | | Required. WhatsApp number in international format (e.g., "1234567890") | | companyName | string | "Natalia de Avena Health" | Company or person name displayed in the header | | responseTime | string | "Tipicamente respondemos en minutos" | Response time message displayed under the name | | avatar | string | undefined | URL to the avatar image | | messages | string[] | ["¡Hola!"] | Array of messages to display in the chat | | defaultMessage | string | "¿Estás pensando en contratar Avena y tienes dudas?" | Default message to send when clicking the WhatsApp button | | enableExitIntent | boolean | true | Whether to enable exit intent detection | | exitIntentSensitivity | number | 20 | Sensitivity for exit intent detection in pixels from top | | onOpen | function | undefined | Callback when chat window opens | | onClose | function | undefined | Callback when chat window closes | | onRedirect | function | undefined | Callback when WhatsApp redirect button is clicked | | className | string | "" | Custom class name for the widget container | | showNotification | boolean | true | Whether to show the notification dot | | style | object | {} | Custom styles for the widget |

Customization

The widget is designed to be customizable. You can override any of the styles defined in the CSS:

/* Example overrides */
.avena-whatsapp-button {
  background-color: #128C7E; /* Darker WhatsApp green */
}

.avena-whatsapp-chat-header {
  background-color: #075E54; /* Dark WhatsApp green */
}

Example

We've included a comprehensive example in the example directory that demonstrates the WhatsApp Widget integrated into a simple landing page. This example shows how to:

• Import and initialize the component
• Configure various props
• Customize the appearance
• Handle callbacks

To run the example:

cd example
npm install
npm start

Then open your browser to http://localhost:1234

Development

1. Clone the repository
2. Install dependencies: npm install
3. Start development: npm run dev
4. Build: npm run build

Contributing

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

License

MIT