whatsapp-click-to-chat

A reusable WhatsApp button component for React, designed to make it easy for users to start a WhatsApp chat with a single click. This package automatically detects whether the user is on mobile or desktop and opens the correct WhatsApp app or web interface. The button is fully customizable with Tailwind CSS, supports multiple sizes and variants, and allows you to pre-fill messages, set custom colors, and control icon and label visibility. Ideal for websites, landing pages, support portals, and e-commerce stores that want to offer instant WhatsApp communication.

Features

• 📱 Detects mobile/desktop devices automatically
• 🎨 Fully customizable with Tailwind CSS
• 💫 Smooth animations and transitions
• 🖼️ Multiple size options
• 🎯 Accessible and SEO-friendly
• 🌐 Works with WhatsApp Web and Desktop app

🧩 WhatsAppButton Variations

🔧 Summary of Props

| Prop | Type | Default | Behavior | | ------------ | ----------- | -------------------- | ---------------------------------------------- | | phoneNumber| string | '+1234567890' | WhatsApp number, digits only | | message | string | '' | Pre-filled message in chat | | variant | 'default' | 'rounded' | 'default' | Button style | | color | string | 'bg-[#25D366]' | Tailwind or HEX background color | | textColor | string | 'text-white' | Tailwind or HEX text color | | showIcon | boolean | true | Show WhatsApp icon | | iconColor | 'black' | 'white' | 'black' | WhatsApp icon color | | label | string | 'Chat on WhatsApp' | Text shown next to icon (default variant only) | | showLabel | boolean | true | Show/hide label (default variant only) | | size | 'small' | 'medium' | 'large' | 'medium' | Button size | | className | string | '' | Custom CSS classes for button |

1️⃣ Variants

| Variant | Description | Example | | --------- | --------------------------------------------------- | ------------------------------------------- | | default | Standard rectangular button. Can show icon + label. | ✅ Show label and icon: "Chat on WhatsApp" | | rounded | Circular button. Only icon is shown. | ✅ Icon only (good for floating buttons) |

Tailwind classes adjust automatically depending on variant.

2️⃣ Icon Options (showIcon, iconColor)

| Prop | Description | | ------------ | --------------------------------------------- | | showIcon | Show WhatsApp logo on button | | iconColor | Icon color: 'black' or 'white' |

For rounded variant, the icon is usually shown by default.

3️⃣ Colors (color prop, textColor prop)

| Type | Description | | ---------------- | -------------------------- | | Tailwind class | e.g., "bg-green-500" | | HEX | e.g., "bg-[#25D366]" | | Custom CSS class | Any valid CSS class string |

This allows your button to fit any design system.

4️⃣ Label (label prop, showLabel prop)

| Usage | Description | | -------------------- | ----------------------------------- | | Default variant only | Shows text next to icon | | Rounded variant | Text is ignored, only icon is shown | | Custom text | Set your own button label | | showLabel | Show/hide label for default variant |

Example:

<WhatsAppButton label="Contact Us" showLabel={true} />

5️⃣ Message Pre-fill (message prop)

| Usage | Description | | ------------ | -------------------------------------------------------- | | Any string | The message that appears automatically in WhatsApp chat. | | Empty string | Opens WhatsApp with only the number | | URL encoding | Automatically encodes spaces and special chars |

Example:

<WhatsAppButton message="Hi! Please pay your pending invoice." />

6️⃣ Phone Number (phoneNumber prop)

| Usage | Description | | -------------------- | ---------------------------------------------- | | International format | Include country code, e.g., +1234567890 | | Only numbers | Non-digit characters are automatically removed |

7️⃣ Automatic Mobile/Desktop Detection

The button automatically chooses the right URL:

| Device | URL used | | ----------- | ----------------------------------------- | | Mobile | https://api.whatsapp.com/send?phone=... | | Desktop/Web | https://web.whatsapp.com/send?phone=... |

Works automatically with no extra configuration.

8️⃣ Behavior on Click

| Option | Description | | ------------------------- | ------------------------------------------------------------ | | Opens WhatsApp app | Mobile device opens the installed WhatsApp app | | Opens WhatsApp Web | Desktop opens WhatsApp Web in a new browser tab | | Message auto-filled | If message prop provided, it is prefilled in chat input | | Optional icon-only button | Rounded variant is perfect for floating buttons without text |

9️⃣ Combination Examples

Here are comprehensive combinations demonstrating all possible configurations:

// 1. Default Button (All Defaults)
<WhatsAppButton phoneNumber="+1234567890" message="Hello! I'm interested in your services." />

// 2. Small Size Button
<WhatsAppButton
  phoneNumber="+1234567890"
  message="Quick question about your service."
  variant="default"
  size="small"
  showIcon={false}
  label="Chat"
  color="bg-gray-800"
  textColor="text-gray-200"
/>

// 3. Medium Size Button
<WhatsAppButton
  phoneNumber="+1234567890"
  message="Hi, you have a pending payment!"
  variant="default"
  color="bg-green-500"
  textColor="text-gray-100"
  size="medium"
  showIcon={true}
/>

// 4. Large Size Button
<WhatsAppButton
  phoneNumber="+1234567890"
  message="I'd like to speak with a sales representative."
  variant="default"
  size="large"
  color="bg-[#075E54]"
  textColor="text-[#ECE5DD]"
  label="Contact Sales Team"
/>

// 5. Default Small with Icon
<WhatsAppButton
  phoneNumber="+1234567890"
  message="Quick chat"
  variant="default"
  size="small"
  color="bg-[#075E54]"
  textColor="text-white"
  showIcon={true}
  iconColor="white"
  label="Chat"
/>

// 6. Default Medium with Icon
<WhatsAppButton
  phoneNumber="+1234567890"
  message="Let's talk"
  variant="default"
  size="medium"
  color="bg-[#075E54]"
  textColor="text-white"
  showIcon={true}
  iconColor="white"
  label="Message"
/>

// 7. Default Large with Icon
<WhatsAppButton
  phoneNumber="+1234567890"
  message="Contact us"
  variant="default"
  size="large"
  color="bg-[#075E54]"
  textColor="text-white"
  showIcon={true}
  iconColor="white"
  label="Contact"
/>

// 8. With Icon and Label
<WhatsAppButton
  phoneNumber="+1234567890"
  label="Order Now"
  color="bg-[#075E54]"
  showIcon={true}
  message="I'd like to place an order."
/>

// 9. Only Icon
<WhatsAppButton
  phoneNumber="+1234567890"
  label=""
  showLabel={false}
  showIcon={true}
  message="Hi, I need assistance."
/>

// 10. No Icon with Label
<WhatsAppButton
  phoneNumber="+1234567890"
  variant="default"
  showIcon={false}
  label="Message Us"
  color="bg-[#128C7E]"
  message="Hello! How can we help you today?"
/>

// 11. Light Theme
<WhatsAppButton
  phoneNumber="+1234567890"
  message="I need technical support."
  color="bg-gray-100"
  textColor="text-gray-800"
  label="Support Chat"
  showIcon={true}
/>

// 12. Dark Theme
<WhatsAppButton
  phoneNumber="+1234567890"
  message="Hello from a dark background!"
  variant="default"
  color="bg-gray-800"
  textColor="text-white"
  label="Dark Button"
  showIcon={true}
  iconColor="white"
/>

// 13. Gradient Style
<WhatsAppButton
  phoneNumber="+1234567890"
  message="Hello, I'd like to start a conversation."
  color="bg-gradient-to-r from-green-400 to-blue-500"
  textColor="text-white"
  label="Start Chat"
/>

// 14. Rounded Style
<WhatsAppButton
  phoneNumber="+1234567890"
  message="Need help with my order."
  variant="rounded"
  color="bg-[#128C7E]"
  textColor="text-[#FFFFFF]"
  size="large"
/>

// 15. Rounded Style white icon
<WhatsAppButton
  phoneNumber="+1234567890"
  message="Need help with my order."
  variant="rounded"
  color="bg-[#128C7E]"
  textColor="text-[#FFFFFF]"
  size="large"
  iconColor='white'
/>

// 16. Rounded Small with Icon
<WhatsAppButton
  phoneNumber="+1234567890"
  message="Quick chat"
  variant="rounded"
  size="small"
  color="bg-[#128C7E]"
  showIcon={true}
  iconColor="white"
/>

// 17. Rounded Medium with Icon
<WhatsAppButton
  phoneNumber="+1234567890"
  message="Quick chat"
  variant="rounded"
  size="medium"
  color="bg-[#128C7E]"
  showIcon={true}
  iconColor="white"
  showLabel={false}
/>

// 18. Rounded Large with Icon
<WhatsAppButton
  phoneNumber="+1234567890"
  message="Contact us"
  variant="rounded"
  size="large"
  showLabel={false}
  color="bg-[#128C7E]"
  showIcon={true}
  iconColor="white"
/>

// 19. High Contrast
<WhatsAppButton
  phoneNumber="+1234567890"
  message="I need accessibility support."
  color="bg-black"
  textColor="text-white"
  label="Message Us"
  showIcon={true}
  iconColor="white"
/>

// 20. Custom ClassName
<WhatsAppButton
  phoneNumber="+1234567890"
  message="Custom style"
  className="border-2 border-black"
/>

// 21. Hide Label (Icon Only)
<WhatsAppButton
  phoneNumber="+1234567890"
  message="Quick inquiry."
  showLabel={false}
/>

// 22. Custom Icon Color (White)
<WhatsAppButton
  phoneNumber="+1234567890"
  message="Testing white icon"
  color="bg-[#25D366]"
  textColor="text-white"
  label="WhatsApp Green"
  iconColor="white"
/>

// 23. Rounded Variant with Custom ClassName
<WhatsAppButton
  phoneNumber="+1234567890"
  message="Custom rounded style"
  variant="rounded"
  className="ring-2 ring-green-400"
/>

// 24. Rounded Variant Hide Label
<WhatsAppButton
  phoneNumber="+1234567890"
  message="Quick chat"
  variant="rounded"
  showLabel={false}
/>

// 25. Rounded Variant Custom Icon Color
<WhatsAppButton
  phoneNumber="+1234567890"
  message="VIP support request."
  variant="rounded"
  size="large"
  color="bg-yellow-500"
  textColor="text-gray-900"
  iconColor="white"
/>

// 26. Default Variant Custom Label & Hide Icon
<WhatsAppButton
  phoneNumber="+1234567890"
  message="Booking request for consultation."
  size="large"
  label="Book Consultation"
  showIcon={false}
/>

// 27. Default Variant Custom Colors & Small Size
<WhatsAppButton
  phoneNumber="+1234567890"
  message="Priority support needed."
  size="small"
  color="bg-red-600"
  textColor="text-white"
  iconColor='white'
/>

💡 Pro Tip: Always include a relevant message that provides context for the recipient when the chat opens in WhatsApp.

WhatsApp Click to Chat Button

A customizable React WhatsApp click-to-chat button component with Tailwind CSS.

Installation

npm install whatsapp-click-to-chat

Usage

import { WhatsAppButton } from 'whatsapp-click-to-chat';

function App() {
  return (
    <WhatsAppButton 
      phoneNumber="+1234567890"
      message="Hello! I'm interested in your services."
    />
  );
}

License

MIT

Contributing

Pull requests are welcome!