Free tool· Generators & builders
Add a WhatsApp chat widget to your Webflow site
Paste one snippet into Webflow's footer code and every published page gets a WhatsApp button that matches your design.
- Runs in your browser
- Free, no signup
- Updated
Configure WhatsApp chat button
The floating button every visitor sees.
😊 Emoji welcome. You can use {{page_url}} & {{page_title}} — filled with the page the visitor is on.
Chat widget
The card that opens above the button — brand it like your own.
😊 Emoji welcome — {{page_url}} & {{page_title}} work here too.
After a visitor closes it, when may it auto-open again?
URL personalization
Personalize the messages based on your website's URL — a rule matches when its source URL appears in the visitor's address. Parameters: {{page_url}}, {{page_title}}.
Applies to the substituted {{page_title}} value — "red-shoes – your store" becomes "Red shoes – your store". URLs stay untouched.
Live preview
Gradient header with the greeting on a floating card. Click the button in the preview to close and reopen it.
{{page_title}} previews as "Red shoes – Your Store". On your site the real page title and URL are used — pick a rule above to preview its personalization.
Your embed script
<!-- Enter your WhatsApp number to generate the script -->
Paste it just before </body>. The widget loads async from infiq.in, runs no inline code and draws itself in its own sealed layer, so your theme's CSS can't break it. Works on any site: Shopify, WordPress, Wix, custom. Keep the "Powered by InfiQ" link inside — it's the small credit in the chat card's footer.
Quick answer
How do I add a WhatsApp widget to Webflow?
To add a WhatsApp widget to Webflow, build it above, copy the embed code and paste it into Site settings → Custom code → Footer code, then save and publish. For one page only, paste it into that page's settings under Custom code, in the box for code before the </body> tag. Site-wide custom code needs a paid site plan.
- Price
- Free
- Plugin or app
- None
- Setup time
- About 5 minutes
- You need
- A paid Webflow site plan
Step by step · 5 steps
Step by step: the WhatsApp widget on Webflow
Step 1: Build and copy your widget
In the generator on this page, enter your WhatsApp number with the country code, pick one of the five designs, set your colours and greeting, then click Copy script.
Step 2: Open your site settings
In the Webflow dashboard, open your site's Settings and go to the Custom code tab.
Step 3: Paste it into Footer code
Paste the embed code into Footer code, the box for code placed before the </body> tag, and click Save.
Step 4: Publish
Publish to your domain: custom code runs on the published site, not on the Designer canvas.
Step 5: Check it on mobile
Open the live site on your phone and tap the button: Start Chat should open WhatsApp with your message.
Webflow tips
Get more from the WhatsApp widget on Webflow
One page only
Open the page's settings (the gear icon), scroll to Custom code and paste into the box for code before the </body> tag.
CMS collection pages
Add a URL rule with the collection's path, such as /products/ or /blog/, and use {{page_title}} in the message.
Match your design system
Use your brand hex for the header and button. Aurora and Bold suit most Webflow sites; Midnight glass suits dark ones.
Not sure which look to pick? Compare the five widget designs.
FAQ
WhatsApp widget for Webflow: questions and answers
Why can't I add custom code to my Webflow site?
Site-wide custom code needs a paid site plan. On a starter site you can still link a button to a WhatsApp click-to-chat URL.
Will the widget affect my Webflow site's performance?
No. It loads after your page as one script of about 14 KB and floats above your layout, so it causes no layout shift.
Does the widget show in the Designer?
No. Webflow runs custom code on the published site only. Publish and check your live URL.
Will Webflow interactions or my CSS affect the widget?
No. The widget draws in its own shadow DOM, so your classes and interactions can't restyle it, and it sits above other fixed elements.
Still have questions?
Book a demoOther platforms
Add the WhatsApp widget to another site
Put a team behind the widget.
InfiQ turns every widget conversation into a managed lead — shared team inbox, chatbots, broadcasts and analytics on the official WhatsApp Business API. 7-day free trial, no card required.