A few weeks back, while working on a project at https://dg.raghuvartech.com/, I ran into an interesting challenge. The team wanted to add a chat option to our application so that users could easily reach out to us via WhatsApp.

Sounds simple, right? Just add a floating button that opens WhatsApp.

Well, not quite.

When I searched for npm packages, I found a couple of options. They worked, but only in a limited way — they would just open the WhatsApp API link (wa.me/…).

On mobile, that was fine — it opened the WhatsApp app.
But on desktop/laptop, it felt clunky. Instead of opening WhatsApp Web, it still pointed to the API link.

And that didn’t feel like a good user experience.

I thought:

If I’m using WhatsApp on my laptop, why shouldn’t the chat open in WhatsApp Web automatically?

So I decided to build my own solution.
A floating WhatsApp chat widget for React that’s a little smarter:

•  If you’re on mobile or tablet, it opens the WhatsApp app.
  
•  If you’re on desktop/laptop, it opens WhatsApp Web.
  

Simple, but way more user-friendly.

That’s how react-whatsapp-floating was born.

It’s a small npm package that anyone can drop into their React app.

• Easy to install
  
• Fully customizable
  
• And it just works across devices ✨
  

npm install react-whatsapp-floating

import WhatsAppWidget from “react-whatsapp-floating”;

function App() {

  return (

    <WhatsAppWidget 

      phoneNumber=”+1234567890″ 

      message=”Hello from Dheera Global!” 

    />

  );

}

I built this to solve a real problem for Dheera Global, but then I realised:

If I needed this, chances are other developers do too.

So instead of keeping it private, I published it on npm — my first ever package 🎉

It feels great to give something back to the community, and I’m looking forward to improving it further with feedback from other developers.

 You can check it out here:
https://www.npmjs.com/package/react-whatsapp-floating

Would love to hear your thoughts and suggestions