Engage visitors instantly with the Chat on WhatsApp component Provide real-time support, answer inquiries, and boost customer interaction with a mobile-friendly, customizable chat.
Make it with Workshop
Build your own component with AI
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.
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.
You can customize all the widget properties, including the header text, header icon, header color, and the overall background to match your brand.
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.
Offline Appearance: Set button color (default gray #DBD5D5) and text (default “Send Offline Message”) for offline hours.
Once you are done customizing, set the variant to Closed and publish your site.
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.
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
