Free tool· Generators & builders
Add a WhatsApp chat widget to a React or Next.js app
No npm package to install or keep updated. Load the hosted script once in your root layout and the widget renders in its own shadow DOM, untouched by your CSS.
- 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 React / Next.js?
To add the WhatsApp widget to Next.js, render <div id="infiq-wa-widget"> with the “Powered by InfiQ” link in your root layout, load https://www.infiq.in/whatsapp-widget.js with next/script, and in its onLoad call window.infiqWhatsAppWidget(config) with the settings from your embed code. In other React apps, append the script in a useEffect and do the same.
- Price
- Free
- Plugin or app
- None
- Setup time
- About 5 minutes
- You need
- Any React app; Next.js App or Pages Router
Step by step · 5 steps
Step by step: the WhatsApp widget on React / Next.js
Step 1: Configure and copy
Build the widget above and copy the embed code. You'll reuse the settings object inside its JSON block.
Step 2: Add the container
In app/layout.tsx (or your root component), render <div id="infiq-wa-widget"> with the <a href="https://www.infiq.in/tools/whatsapp-widget-generator">Powered by InfiQ</a> link inside it.
Step 3: Load the script
Add <Script src="https://www.infiq.in/whatsapp-widget.js" strategy="lazyOnload" /> from next/script, in a small "use client" component since onLoad needs one. In Vite or Create React App, append a script tag in a useEffect instead.
Step 4: Start the widget
In onLoad (or the script's load event), call window.infiqWhatsAppWidget({ phoneNumber: "…", theme: "aurora", … }) with your settings object.
Step 5: Allow it in your CSP
If you send a Content-Security-Policy, add https://www.infiq.in to script-src. The widget needs no inline-script or inline-style exceptions.
React / Next.js tips
Get more from the WhatsApp widget on React / Next.js
Client-side navigation
The widget mounts once and stays across route changes. {{page_url}} and {{page_title}} are read when it mounts, so they describe the page the visitor landed on.
Open it from your own buttons
Add data-infiq-wa-open to any element, or call window.infiqWhatsAppWidget.open() from an onClick.
Listen for chats
Add a window listener for the infiq:whatsapp-widget event in a useEffect; event.detail.action is open, close or chat.
TypeScript
Declare it once in a global .d.ts: infiqWhatsAppWidget?: ((config: object) => void) & { open(): void; close(): void; toggle(): void } on Window.
Not sure which look to pick? Compare the five widget designs.
FAQ
WhatsApp widget for React / Next.js: questions and answers
Is there an npm package for the WhatsApp widget?
No, and you don't need one: the hosted script stays current with fixes and new designs, and your bundle doesn't grow.
Does it work with the Next.js App Router and server components?
Yes. The container can render in a server component; only the small component that loads the script with onLoad needs "use client".
Will Tailwind or my global CSS affect the widget?
No. The widget draws in a shadow root with its own styles, so your resets and utility classes can't reach it, and its styles can't leak into your app.
Does it work with a strict CSP and Trusted Types?
Yes. It runs no inline script, inserts text with textContent only and styles itself through constructed stylesheets. Allow https://www.infiq.in in script-src.
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.