Add a WhatsApp button to Webflow
Webflow gives you an HTML Embed element for anything inside the canvas and a Custom Code panel for site-wide scripts. Use the Embed for a button in a specific section, and Project Settings → Custom Code → Footer Code for the floating widget.
One small script tag. Renders a floating bubble with a mini chat panel.
Without the country code and without a leading zero.
The free hosted widget shows a small “by Galantis” badge.
Preview
Hi there! 👋 How can we help?
Chat on WhatsAppYour snippet
Enter your WhatsApp number to get your link.
Paste this anywhere your platform accepts custom HTML.
Custom code only runs on published sites, so nothing you paste will appear in the Designer or in the preview toggle. Publish first, then test.
Install it on Webflow, step by step
- Build your snippet above. Choose the button for an inline element, or the widget for a floating bubble on every page.
- For a button in a section. In the Designer, drag an Embed element from the Add panel into the section where the button belongs. Paste your button HTML into the code editor and click Save & Close. 📸 Screenshot placeholder — 1600×900, step number 2 burned into the top-left.
Must show: Webflow Designer with an HTML Embed element open and the button code pasted - For the floating widget sitewide. Go to Project Settings → Custom Code, paste the widget script into Footer Code, and save the changes. 📸 Screenshot placeholder — 1600×900, step number 3 burned into the top-left.
Must show: Webflow Project Settings Custom Code panel with the script in Footer Code - Publish, then test. Click Publish and open the published domain. Custom code does not run on webflow.io preview in the Designer, so test the real published URL on a phone.
What usually goes wrong
- Site-wide custom code requires a paid site plan. On a free project the Footer Code field is available but not published.
- Saving Project Settings is not enough — you must publish for the change to go live.
- The Embed element renders in the flow of the page, so wrap it in a div with your own layout classes if you need precise placement.
Frequently asked questions
Why does my Webflow button not appear after saving?
Custom code only runs on the published site. Click Publish, then reload the live domain rather than the Designer preview.
Do I need a paid Webflow plan?
For the site-wide widget in Footer Code, yes — a site plan is required to publish custom code to a domain. The Embed element inside the canvas works on any project.