Free tool· Generators & builders
Add a WhatsApp chat widget to WordPress
Design your widget below, then paste one snippet into your site's footer. There's no chat plugin to install or update, and it works with any theme, block theme or page builder.
- 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 WordPress?
To add a WhatsApp widget to WordPress, build it in the generator above, copy the embed code and paste it into your site's footer, just before </body>. The easiest way is a header-and-footer code plugin such as WPCode; a child theme's footer.php works too. The widget then appears on every page.
- Price
- Free
- Plugin or app
- None
- Setup time
- About 5 minutes
- You need
- Self-hosted WordPress, or a WordPress.com plan that allows plugins
Step by step · 5 steps
Step by step: the WhatsApp widget on WordPress
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: Install a footer-code plugin
In your dashboard, go to Plugins → Add New, search for WPCode (Insert Headers and Footers), install it and activate it. It only adds code to your pages; it isn't a chat plugin.
Step 3: Paste the code into the footer
Open Code Snippets → Header & Footer, paste the embed code into the Footer box and click Save Changes.
Step 4: Clear your caches
If you use a caching plugin such as WP Rocket, LiteSpeed Cache or W3 Total Cache, or a CDN, clear it. Then open your site in a private window.
Step 5: Test it on your phone
Open any page on your phone, tap the button and check that Start Chat opens WhatsApp with your message ready to send.
WordPress tips
Get more from the WhatsApp widget on WordPress
Prefer no plugin at all?
Paste the code just before </body> in your child theme's footer.php (Appearance → Theme File Editor). Block themes such as Twenty Twenty-Four have no footer.php, so use a code plugin there.
Elementor, Divi and other builders
The widget floats above the page, so it works with Elementor, Divi, Beaver Builder and the block editor alike, and your builder's styles can't reach it.
Speed plugins that delay JavaScript
With WP Rocket's or LiteSpeed's “delay JavaScript” option on, the widget waits for the first scroll or tap. Exclude whatsapp-widget.js if you want it visible straight away.
Name the post or product
Add a URL rule for /blog/ or /product/ and put {{page_title}} in the message, so every chat says which page it came from.
Not sure which look to pick? Compare the five widget designs, or automate orders and replies with the WordPress WhatsApp integration.
FAQ
WhatsApp widget for WordPress: questions and answers
Do I need a WordPress plugin for a WhatsApp chat widget?
No. The widget is a snippet, not a plugin. A header-and-footer code plugin is simply the easiest place to paste it, and adding it to a child theme's footer.php works without any plugin.
Will the WhatsApp widget slow down my WordPress site?
No. It is one script of about 14 KB that loads after your page, with no jQuery or other libraries, so it doesn't weigh on your Core Web Vitals the way many chat plugins do.
Does it work on WordPress.com?
Yes, on plans that let you install plugins or add custom code. Plans without that block third-party scripts, so there you'd use a click-to-chat link in a button block instead.
Does it work with WooCommerce?
Yes. WooCommerce runs on WordPress, so you install it the same way. The WooCommerce guide shows how to put the product's name in the message.
Why can't I see the widget after pasting the code?
Clear your caching plugin and CDN, check that the footer box saved, and make sure a “delay JavaScript” setting isn't holding the script back until the first interaction.
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.