WhatsAppQuickMessage

Turn any Framer page into a direct WhatsApp touchpoint. WhatsApp Quick Chat sits as a floating button — minimal by default, powerful on interaction.

Expand on hover — A smooth spring animation opens an inline input bubble. No popups, no modals, no page jumps.

Two input modes — Use a placeholder for freeform messages, or set a custom pre-filled text so visitors send exactly what you want them to.

Animated icon swap — The WhatsApp logo rotates and crossfades into a send arrow when the bubble is open, making the interaction self-explanatory.

Smart collapse — The bubble stays open while the user is typing. It only collapses when the field is empty or unchanged, so messages are never lost by accident.

Keyboard ready — Enter sends, Escape dismisses and resets. Works as expected.

Clean deep link — Opens wa.me in a new tab with the message pre-filled. Phone number formatting is handled automatically.

How to use

1. Drop the component on your Framer canvas.

2. Set your phone number with country code (e.g. 5511999999999).

3. Pick an input style: Placeholder or Custom Message.

4. Style the button and bubble from the property panel — colors, icons, shadows, borders.

5. Pin it as a fixed element and publish.