---
title: "WhatsAppQuickMessage — Framer component · Best of Framer"
description: "$3.00 · Framer component · by ZAKIN · Buttons. New conversations in one hit."
canonical: "https://framer.elliotli.dev/component/whatsappquickmessage"
---

[Home](/)/[Components](/components)/[Buttons](/components/category/buttons)/WhatsAppQuickMessage

# WhatsAppQuickMessage

New conversations in one hit.

[View on Framer](https://framer.com/marketplace/components/whatsappquickmessage/?via=elliot-li)

![WhatsAppQuickMessage preview image 1](https://framer.elliotli.dev/og/component/whatsappquickmessage/45f1c301a91132a5/1600x1200.jpg)

## Summary

New conversations in one hit.

## Description

![](https://y4pdgnepgswqffpt.public.blob.vercel-storage.com/components/description-image-cxtppcly-kaH2uo567GcAIWY7UMFEWdaa9TkYyA)

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

![](https://y4pdgnepgswqffpt.public.blob.vercel-storage.com/components/description-image-jqgblkez-QEhRqwM1JSFzaDFunet5J5XcLbxiS2)

**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](http://wa.me) in a new tab with the message pre-filled. Phone number formatting is handled automatically.

![](https://y4pdgnepgswqffpt.public.blob.vercel-storage.com/components/description-image-johkxvyv-saiEO7FBM0rxuVUDBuh0tXgrL2p99t)

## 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.

## Rank history [How rankings work →](/terms#rankings)

-   All · #9166

## Details

- **Author**: ZAKIN
- **Price**: $3.00
- **Published**: 2026-04-07
- **Updated**: 2026-04-07
- **Added**: 2026-03-24
- **Categories**: Buttons

## More like this

-   [Eye Glow Button](/component/eye-glow-button) — Frame Native · Free — Cursor-following eyes, soft glow
-   [Dash Stretch Button](/component/dash-stretch-button) — Pentaclay · Free — Animated Hover Button With a Dash
-   [Nova Theme Toggle](/component/nova-theme-toggle) — Shouvik Biswas · $12 — Three-Mode Theme Toggle
-   [Nabby: Copy Button](/component/nabby-copy-button) — Francesco Gallo · Free — Plug in your button, copy anything