Component Doc
Quick start tutorial
How To Install The WhatsApp Button Component
The WhatsApp Button component adds a WhatsApp button to your page that opens WhatsApp with a pre-filled message. This guide covers installation and configuration to help you set up customer communication on your Framer site.
Quick Start
Insert the WhatsApp Button component onto your Framer canvas
Configure your phone number and default message in the properties panel
Customize the button size, colors, and styling to match your brand
Optionally enable the label and customize its appearance
Test the button in preview mode to ensure it opens WhatsApp correctly
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 |
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 |
Label Position | Position of the label relative to button: Left, Right, Top, or Bottom |
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: 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: Label doesn't appear
Make sure Show Label is enabled in the properties panel. The label position and styling options will appear once Show Label is turned on.