56:I[473921,["/creators-assets/_next/static/immutable/chunks/36c08p67t0nml.js","/creators-assets/_next/static/immutable/chunks/3ayu63s3pbx5h.js","/creators-assets/_next/static/immutable/chunks/2qqxwi6m3n33t.js","/creators-assets/_next/static/immutable/chunks/3283ev4bymz-y.js","/creators-assets/_next/static/immutable/chunks/1tyeiicl34tqo.js","/creators-assets/_next/static/immutable/chunks/24bk4ojcoor5n.js","/creators-assets/_next/static/immutable/chunks/3k0o12ps7rnq6.js","/creators-assets/_next/static/immutable/chunks/2fw--q9y_1nc-.js","/creators-assets/_next/static/immutable/chunks/00hohn9l3ocx9.js","/creators-assets/_next/static/immutable/chunks/271g_l-8c77ee.js","/creators-assets/_next/static/immutable/chunks/3uo-268z2xnq9.js","/creators-assets/_next/static/immutable/chunks/1eyot9c9uwocm.js","/creators-assets/_next/static/immutable/chunks/31xze_yiju0_q.js","/creators-assets/_next/static/immutable/chunks/06p8bv9p94pxh.js","/creators-assets/_next/static/immutable/chunks/42u1pxaq7eeka.js","/creators-assets/_next/static/immutable/chunks/2-y_r3u4wh2s3.js","/creators-assets/_next/static/immutable/chunks/2gb4kwi-0_ftg.js","/creators-assets/_next/static/immutable/chunks/0mgwzh6o644jl.js","/creators-assets/_next/static/immutable/chunks/0vxt9zvn936s0.js","/creators-assets/_next/static/immutable/chunks/102julo6bufcv.js","/creators-assets/_next/static/immutable/chunks/15z5hu5cixks0.js","/creators-assets/_next/static/immutable/chunks/3q5wansxm4vp6.js","/creators-assets/_next/static/immutable/chunks/3fujn21cf_mt1.js","/creators-assets/_next/static/immutable/chunks/0mwzcaalgk6io.js","/creators-assets/_next/static/immutable/chunks/2ch5kewqiwntv.js","/creators-assets/_next/static/immutable/chunks/3e73rezw4k1a2.js","/creators-assets/_next/static/immutable/chunks/2_dm0za3asre2.js","/creators-assets/_next/static/immutable/chunks/3wj273i6wglef.js","/creators-assets/_next/static/immutable/chunks/30ex342hi0wzr.js","/creators-assets/_next/static/immutable/chunks/0toe1wcov_38e.js","/creators-assets/_next/static/immutable/chunks/222e_wk0i41rv.js","/creators-assets/_next/static/immutable/chunks/28h79imj-g45k.js","/creators-assets/_next/static/immutable/chunks/3pe6luvwzbwnz.js","/creators-assets/_next/static/immutable/chunks/3nd1mzwm7q_f7.js","/creators-assets/_next/static/immutable/chunks/33kea80yupbzt.js","/creators-assets/_next/static/immutable/chunks/3oj8b9u7wi0dw.js","/creators-assets/_next/static/immutable/chunks/3k6sa9ujkqb5c.js","/creators-assets/_next/static/immutable/chunks/3f2ccywlofkgw.js","/creators-assets/_next/static/immutable/chunks/1-gdi7ej49wy6.js","/creators-assets/_next/static/immutable/chunks/05yll7e_snxjv.js"],"PostDetailCard"] 57:T11d9,

What it does

WhatsApp Chat Button adds a production-ready live chat widget to any Framer site. Visitors click the floating button to open a compact popup that mimics the familiar WhatsApp interface — complete with an animated three-dot typing indicator, sequenced messages from your support agent, and a message input. When the visitor types and sends a reply, they are redirected directly to WhatsApp Web (or the app) with their message pre-filled, ready to send.

How it works

Visitor clicks the button → the popup slides open with a spring animation.
The component shows a typing indicator, then delivers each configured message one by one, with controllable timing.
The visitor types their reply in the input field and presses Enter or the send button.
The browser opens WhatsApp (web or app) with the visitor's message pre-filled in the chat.
Clicking the button again (or the × in the popup header) closes the popup and resets the sequence for the next visitor.

Key features

Realistic WhatsApp UI — green header, chat-bubble layout, double blue ticks, and timestamp on every message.
Animated typing indicator — three bouncing dots appear before each message, just like the real WhatsApp.
Sequenced messages — write multiple lines in the property panel; each appears one after the other with configurable typing and gap delays.
Redirect to WhatsApp on send — visitor's message is URL-encoded and appended to a wa.me link; no backend or API key required.
Fully customisable in Framer — 25+ property controls covering colours, typography, sizing, button style, agent details, timing, and behaviour.
Five button style variants — Filled, Outline, Ghost, Pill, Soft and Icon Only.
Animated pulse ring — draws attention to the button without being intrusive.
Agent avatar, name, role, and online status dot — personalise the popup to your brand and team.
Optional response-time notice bar — set expectations with a customisable yellow banner.
No external dependencies — pure React 18, no third-party libraries.

Use Cases

Business and portfolio sites — let visitors start a WhatsApp conversation in one tap.
E-commerce — offer live order support with a pre-filled opening message.
Service agencies — qualify leads before the conversation even starts.
Local businesses — replace contact forms with an instant chat touchpoint.
Event pages — surface a direct line for last-minute attendee questions.

Setup & Usage

Installation

Purchase and copy the component URL from the confirmation page.
Open your Framer project → Assets panel → Paste the component URL.
Drag the component onto your canvas.

Configuration

Set your Phone Number (country code + digits, no spaces or dashes).
Write your Bot Messages — one line per message. Use emoji freely.
Set the Agent Name and Agent Role to match your brand.
Adjust colors, style, and sizing to match your design system.
Publish your site — the popup and redirect work live, no extra steps.

Notes

The wa.me redirect works on all devices — mobile opens the WhatsApp app; desktop opens WhatsApp Web.
No API key, server, or third-party account is required.
The sequence resets every time the popup is closed and reopened.

Refund policy

This product is a digital Framer component. Once purchased, it can be instantly accessed, duplicated, and added to your own Framer projects. Because of the nature of digital products—and the fact that access cannot be revoked after delivery—we’re unable to offer refunds.

📩 Support

Need help setting it up? Contact at karmasoftudio@gmail.com

53:[["$","$L56",null,{"post":{"id":"019e3f02-ca12-7371-9011-b8b1786b5b87","title":null,"body":null,"bodyJson":null,"author":{"framerUserId":"6e796acc-e6f4-4023-921c-537192455c80","name":"Karma Softudio","slug":"karma-softudio","avatar":null,"followed":false,"followsYou":false},"media":[],"resources":[{"id":"QtMuvLLZ5LBrh4vqpiM2","resolved":true,"title":"WhatsAppButtonDialog","body":"$57","bodyJson":null,"introduction":"A fully interactive WhatsApp Chat Button","slug":"whatsappbuttondialog","author":{"framerUserId":"6e796acc-e6f4-4023-921c-537192455c80","name":"Karma Softudio","slug":"karma-softudio","avatar":null,"followed":false,"followsYou":false},"media":[{"type":"image","url":"https://y4pdgnepgswqffpt.public.blob.vercel-storage.com/components/QtMuvLLZ5LBrh4vqpiM2/whatsappbuttondialog-gIDQcuob1YoWFw9QEMgXJdB5HLYia2","metadata":{"tint":{"h":0,"s":0,"l":57},"width":1600,"height":1200}}],"post":null,"createdAt":"2026-05-05T14:43:13.150Z","updatedAt":"2026-06-13T02:21:31.624Z","publishedAt":"2026-05-19T06:53:27.954Z","featuredAt":null,"approvedAt":null,"type":"component","attributes":{"url":null,"previewUrl":"https://karmasoftudio.framer.website/","price":"3","paymentUrl":"https://checkout.freemius.com/product/28800/plan/47399/","workshop":false,"categories":[{"id":"cd81cc33-d6cf-4630-8e59-b5b3100166ba","name":"Buttons","slug":"buttons"}],"lastSaveId":"Sd1Nw8J6X3bCED4Bice4","tags":[]}}],"contests":[],"categories":[],"tags":[],"likes":{"count":2,"liked":false},"comments":{"count":1},"reposts":{"count":0,"reposted":false,"repostId":null},"version":1,"edited":false,"editedAt":null,"createdAt":"2026-05-19T06:53:27.954Z","updatedAt":"2026-05-19T06:53:27.954Z","reported":false,"type":"post"}}],"$L58"]

Suggested for you