About
Floating action button that opens a WhatsApp chat with a pre-filled message. Perfect for booking inquiries and customer support.
Built with React and Tailwind. Copy the prompt and paste it into Claude Code, Cursor or Lovable: your agent adds WhatsAppButton to your project and fits it to your theme.
Code
How WhatsAppButton is used: the demo's code. The component's own source comes with a free account.
Usage.tsx
import WhatsAppButton from "@/components/ui/whatsappbutton";
export default function WhatsAppButtonDemo() {
return (
<div className="min-h-[400px] relative bg-gray-100 p-8">
<div className="max-w-md mx-auto text-center pt-20">
<h2 className="text-xl font-semibold mb-2">WhatsApp Click-to-Chat</h2>
<p className="text-gray-500 text-sm">
The green FAB appears at bottom-right. Click to start a chat.
</p>
</div>
<WhatsAppButton />
</div>
);
}
Dependencies
More in Buttons
View all
Button Save
46
Button
20
Eclipse Button
5
Button
6
Button
14
Button Group
37
Button
32
Split Button
32
