--- title: "Chat on WhatsApp — Framer component · Best of Framer" description: "$9.00 · Framer component · by Kai Studio · Interactive. The chat on WhatsApp is a component with two variants: Closed Variant: Displays a WhatsApp icon with an optional notification indicator." canonical: "https://framer.elliotli.dev/component/chat-on-whatsapp" --- [Home](/)/[Components](/components)/[Interactive](/components/category/interactive)/Chat on WhatsApp # Chat on WhatsApp Real-time support with Whatsapp [View on Framer](https://framer.com/marketplace/components/chat-on-whatsapp/?via=elliot-li) ![Chat on WhatsApp preview image 1](https://framer.elliotli.dev/og/component/chat-on-whatsapp/287a7285e5cc6702/1600x1200.jpg) ## Summary The chat on WhatsApp is a component with two variants: Closed Variant: Displays a WhatsApp icon with an optional notification indicator. ## Description **This component is Part of the  Essential Components plugin.** Browse and insert 30+ components directly in Framer. [Start for free](https://www.framer.com/marketplace/plugins/essential-components/preview/) [![](https://y4pdgnepgswqffpt.public.blob.vercel-storage.com/components/description-image-fv4th8g9-R9h9a7ZnCwvMuTsK2aVgUSZDU7zkSJ)](https://www.framer.com/marketplace/plugins/essential-components/) A fully customizable WhatsApp component for Framer that enables instant customer communication. Perfect for businesses looking to streamline customer support and boost engagement through WhatsApp messaging. ## How to Use in Framer - **Copy and paste the component into your Framer project.** It’s best to add it to the **Template** page (the page that contains the Navigation and Footer) so it appears on all pages. - Set the position to **fixed** and adjust it so the component sits on the left or right side of the page. ![](https://y4pdgnepgswqffpt.public.blob.vercel-storage.com/components/description-image-atpqgje4-fpmv5dfgG7Tx7ANglg1oOWcFoXQcJn) - You can customize all the widget properties, including the header text, header icon, header color, and the overall background to match your brand. ![](https://y4pdgnepgswqffpt.public.blob.vercel-storage.com/components/description-image-f1jw55xp-ZfvppFxv0IcsFUZ4ZjuIo2BX07GJHu) - The chat on WhatsApp is a component with two variants: - **Closed Variant:**Displays a WhatsApp icon with an optional notification indicator. - **Open Variant:**Reveals the full component with quick message like _“Hello 👋, You can place your order right here in the chat._ You can fully customize this text. - When the user clicks the **Send Message** button, they are redirected to WhatsApp Web (on desktop) or the WhatsApp app (on mobile). - **Phone Number:** Enter your WhatsApp number with country code (no + or spaces), e.g., 1234567890 (US) or 447123456789 (UK). - **Pre-filled Message**: Set the default message customers will send, e.g., "Hello! I would like to know more about your services." - **Button Text:** Customize the button label (default “Send message”), e.g., “Contact Us,” “Get Support,” or “Chat Now.” - Customize your button by choosing its background color (default WhatsApp green #25D366), text color, font, corner rounding and icon color - **Set Hours**: Use 24-hour format (0–23 open, 0–24 close). Example: 9–17. For closed days, set open=0 and close=0. ![](https://y4pdgnepgswqffpt.public.blob.vercel-storage.com/components/description-image-f1jw55xp-mU3GGiMvbG85FudXzvX3cbkvDYR5ZP) - **Offline Appearance:** Set button color (default gray #DBD5D5) and text (default “Send Offline Message”) for offline hours. ![](https://y4pdgnepgswqffpt.public.blob.vercel-storage.com/components/description-image-f1jw55xp-kRwkFSRCS4L636gb6i9d9qimU3zGnc) - Once you are done customizing, set the variant to Closed and publish your site. ![](https://y4pdgnepgswqffpt.public.blob.vercel-storage.com/components/description-image-8zb6ynro-All21j7YlZ7C3efLYwIDn5cQPmqHwO) **Use Cases** - E-Commerce stores can add the button to product pages for instant purchase assistance. They can also place it in the cart or checkout for order support and set business hours to manage customer expectations. - Service businesses can feature the button on landing pages, use it as a support widget in help centers, or trigger appointment bookings. - Restaurants and cafés can use it for order placement, reservation inquiries, menu questions, and delivery orders. They can also configure hours to match operating times. - Real estate businesses can add the button for property inquiries, viewing appointment requests, or quick questions from potential buyers. - Professional services can use the button for client consultation booking, project inquiries, and support requests. ### Pro Tips - **Phone Number Format:** Always include your country code without the + symbol. Correct: 447123456789 (UK). Wrong: +447123456789 or 07123456789. - **Message Strategy:** Keep pre-filled messages clear and action-oriented, e.g., "Hi! I'm interested in \[specific service/product\]." This helps track inquiry sources. - **Business Hours:** If you operate 24/7, leave business hours set - **Color Contrast:** Make sure text color contrasts well with the button background for readability. - **Multiple Buttons:** Create separate buttons for different purposes—sales (green), support (blue), emergencies (red). - **Mobile Optimization:** The button automatically works on mobile devices, opening WhatsApp directly. - **Testing:** Always test with your actual WhatsApp number to ensure formatting and functionality work correctly Preview: [https://whatsappchatwidget.framer.website/](https://whatsappchatwidget.framer.website/) ## Rank history [How rankings work →](/terms#rankings) - All · #288 ## Details - **Author**: Kai Studio - **Price**: $9.00 - **Published**: 2025-12-17 - **Updated**: 2026-10-25 - **Added**: 2025-12-05 - **Categories**: Interactive ## More like this - [Drawing component](/component/drawing-component) — Ariel Barrios · Free — Just a free drawing component - [Code Comparison](/component/code-comparison) — Syauqizaidan Khairan Khalaf · $5 — Before and after code side by side - [Voice Testimonials](/component/voice-testimonials) — valorsic studio · $15 — Voiceover & typewriter reviews - [Product Tour Pro](/component/product-tour-pro) — Oddframe · $10 — Showcase Products Step by Step