Free tool· Generators & builders
Add a WhatsApp chat widget to any HTML website
Static site, PHP templates, Hugo, Jekyll, Ghost, Joomla or Drupal: if you can edit the HTML every page shares, you can add the widget in a minute.
- 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 HTML?
To add a WhatsApp widget to an HTML website, build it above, copy the embed code and paste it just before the closing </body> tag in the template every page shares, such as a footer include or base layout. Upload or deploy, and the widget appears on every page.
- Price
- Free
- Plugin or app
- None
- Setup time
- About 5 minutes
- You need
- Access to your site's HTML templates
Step by step · 4 steps
Step by step: the WhatsApp widget on HTML
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: Find the shared template
Open the file every page uses: footer.php, footer.html, a base layout or your CMS's “footer scripts” setting.
Step 3: Paste before </body>
Paste the embed code on the line just above the closing </body> tag.
Step 4: Deploy and check
Upload or deploy, then reload a page: the widget appears bottom-right, or bottom-left if you chose it.
HTML tips
Get more from the WhatsApp widget on HTML
Static site generators
Hugo: layouts/_default/baseof.html or a footer partial. Jekyll: _layouts/default.html or _includes/footer.html. Eleventy and Astro: your base layout.
CMS footer settings
Ghost: Settings → Code injection → Site footer. On Joomla and Drupal, add it to your template's footer; rich-text editors in modules and blocks often strip scripts.
Content-Security-Policy
Allow https://www.infiq.in in script-src, plus img-src for your brand image if you set one. Nothing else is needed.
Not sure which look to pick? Compare the five widget designs.
FAQ
WhatsApp widget for HTML: questions and answers
Do I need to know JavaScript?
No. You paste one ready-made snippet. All your settings are inside it as plain data, so changing a message later means editing one line.
Can I put the code in <head>?
Put it before </body>. The container is page content, and a <div> in <head> makes browsers end the head early, which can push your other head tags into the body.
Does it work on Ghost, Joomla, Drupal, Hugo and Jekyll?
Yes, on any site whose HTML you control. The tips on this page show where the footer lives on each.
Can I host the script myself?
Load it from www.infiq.in so you get fixes and new designs automatically. The file is small and cached by browsers.
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.