Free tool
WhatsApp Widget Generator
Build a floating WhatsApp chat button and popup for your website.
Widget Settings
Live CustomizerLive Preview (Interactive)
Some visitors would rather ask on WhatsApp than fill in a form. Set your number, greeting, colours and position, check the preview, and paste one snippet into your site.
How this tool helps
Let visitors ask on WhatsApp
A visitor with one question about sizing or delivery often leaves instead of filling in a form. A WhatsApp button lets them ask in the app they already use, and you can reply from your phone.
The conversation also stays in their WhatsApp, so they can come back to it after they've left your site.
Compatible Platforms for Integration
- Shopify: Paste the snippet inside the
theme.liquidlayout to guide ecommerce buyers. - WordPress: Add it inside the footer via a header-footer plugin or the widget dashboard.
- Webflow & Squarespace: Paste the HTML inside the site-wide custom code inject fields.
- Custom Sites: Simply place the block right above your closing
</body>tag.
Best Settings for Chat Widgets
- Button text: Say what they can ask, like "Questions about sizing? Chat with us", rather than just "WhatsApp".
- Greet Proactively: Outline a specific greeting like "Ask us about sizing, delivery, or custom designs!".
- Placement: Bottom right is standard, but check if it overlaps other mobile helper elements like "back to top" triggers.
WhatsApp button or AI chat on your site?
This button hands visitors to WhatsApp, where you reply yourself. If you'd rather answer them on your site and on WhatsApp with the same AI agent, see the website chat widget and the WhatsApp AI chatbot.
FAQ
Frequently asked questions
Straight answers about using this tool and its output.
How do I add a WhatsApp chat widget to my website?
Configure your phone number, message, theme color, and text in the widget generator. Once satisfied with the live preview, copy the generated HTML code block and paste it right before the closing </body> tag of your website's HTML template.
Will this widget slow down my website load speed?
The snippet is plain HTML, CSS and JavaScript with no external libraries or scripts to download, so it adds very little to your page.
Does this widget work on Shopify, WordPress, and Webflow?
Yes. The code block is compatible with all platforms. Simply add it using a Custom HTML block in WordPress, paste it into the theme.liquid file in Shopify, or place it in the custom code section of Webflow.
Can I add multiple agents to this widget?
No, this widget opens a chat with one WhatsApp number. If several people answer and you want AI replies, connect the number to a WhatsApp AI chatbot such as ZynfoAI, where your team shares one inbox.
Why use a popup instead of a plain WhatsApp link?
The popup shows a greeting and a message box first, so the visitor knows who they are writing to before WhatsApp opens. When they press Send, the chat continues in WhatsApp.
Related tools
View all toolsLet ZynfoAI take the first reply.
Answers on your website and WhatsApp from your own content, with your team one click away. Free for 7 days, then $99/month.