Component Doc
Quick start tutorial
How To Install The WhatsApp Floating Button Component
The WhatsApp Floating Button component adds a floating WhatsApp icon to your site that opens WhatsApp with a pre-filled message. This guide covers installation, configuration, and customization options to help you set up customer communication on your Framer site.
Quick Start
Insert the WhatsApp Floating Button component onto your Framer canvas
Position the component at the bottom of your page and set the height to 1px so it doesn't take up space on the page
Configure your phone number and default message in the properties panel
Customize the position, size, and styling to match your brand
Test the button in preview mode to ensure it opens WhatsApp correctly
Prerequisites
This component works on both individual pages and page templates. For best results, we recommend installing it on a page template so it appears consistently across multiple pages.
Properties
Property | Description |
|---|---|
Phone Number | The WhatsApp phone number (numbers only, no formatting needed) |
Message | Pre-filled message that opens when users click the button |
Position | Corner position: Top Left, Top Right, Bottom Left, or Bottom Right |
Inset X | Horizontal distance from the edge (0-200px) |
Inset Y | Vertical distance from the edge (0-200px) |
Z-Index | Layer order to control what appears above the button (0-9999) |
Size | Button size in pixels (40-100px) |
Background | Button background color (default: WhatsApp green #25D366) |
Icon Color | Color of the WhatsApp icon inside the button |
Shadow | Enable or disable button shadow effect |
Pulse Effect | Enable or disable animated pulse effect |
Pulse Color | Color of the pulse animation (visible when Pulse Effect is on) |
Pulse Speed | Speed of the pulse animation in seconds (0.5-5s) |
Pulse Range | Scale range of the pulse effect (1.5-4x) |
Show Label | Enable or disable the chat label bubble next to the button |
Show Avatar | Show profile image in the label (visible when Show Label is on) |
Avatar Image | Profile image to display in the label |
Label Text | Custom text displayed in the chat bubble |
Text Color | Color of the label text |
Label Background | Background color of the chat bubble |
Label Font | Font styling for the label text (size, weight, spacing) |
Label Padding | Internal spacing of the chat bubble |
Label Radius | Border radius of the chat bubble corners |
Label Gap | Distance between the button and label bubble (0-50px) |
Troubleshooting
Issue: Button doesn't appear on the page
Make sure the component is positioned correctly and the z-index is high enough to appear above other content.
Issue: WhatsApp doesn't open when clicked
Verify your phone number is entered correctly (numbers only, include country code without + sign). Test the button in preview mode, not just in the editor.
Issue: Button takes up too much space
Set the component height to 1px and position it at the bottom of the page. The button uses fixed positioning and won't affect page layout.