How to Add a Free WhatsApp Chat Widget to Your WordPress, Shopify, or Other CMS Website
Content
A WhatsApp chat widget on your website lets visitors start a conversation with one click, without saving your number or leaving the page. Adding a WhatsApp widget to WordPress, Shopify, or other CMS sites is straightforward if you use a platform that provides click-to-chat and template-based first messages so you stay compliant with the WhatsApp Business API.
This guide explains how to add a free WhatsApp chat widget to WordPress, Shopify, and other CMS websites: what you need (API access, templates), how to install the widget (plugin, script, or link), and how to handle the first message and conversations. For solutions that include widget and WhatsApp API, see Spoki solutions and features.
What You Need Before Adding the Widget
To show a WhatsApp chat widget that starts real conversations (not just a click-to-chat link that opens the app with a pre-filled text), you typically need:
- WhatsApp Business API access: Either directly or via a BSP (Business Solution Provider). The API is required for template-based first messages and conversation handling at scale.
- Approved template: The first message to a contact must be an approved template. You’ll use one template (e.g. welcome, “Hi, how can we help?”) for widget clicks so the conversation starts compliantly.
- Widget or plugin: A widget (floating button, click-to-chat link, or plugin) that opens WhatsApp with the correct template or pre-filled text and, if needed, connects replies to your inbox or CRM.
Platforms like Spoki provide API access, template management, and widget/integration options for WordPress and other websites. For use cases and customer support, see the links.
Free vs paid: A “free” widget usually means no extra cost for the widget itself; you may still need WhatsApp Business API access (often through a BSP or platform that charges for API usage or conversations). Some platforms offer a free tier or trial so you can test the widget and templates before scaling. Check whether the widget only adds a click-to-chat link (opens WhatsApp with pre-filled text) or also connects replies to an inbox or CRM; the latter is better for conversation handling and automation.
Adding the WhatsApp Widget to WordPress
On WordPress, you can add a WhatsApp chat widget in two main ways:
Plugin or integration: Many WhatsApp API platforms offer a WordPress plugin or integration that adds a floating button or widget. You connect your API account, choose an approved template (or pre-filled text that fits your template), and the plugin shows the button on your site. Clicks open WhatsApp and send the first message via template when required. Check that the plugin supports template-based first messages if you use the API.
Manual embed: If you don’t use a plugin, you can add a click-to-chat link or a small script that shows a button. The link usually looks like `https://wa.me/PHONENUMBER?text=PREFILLED_TEXT`. The pre-filled text should match what your template expects (e.g. a welcome template with one button that starts the conversation). Replies then go to your WhatsApp inbox or the platform you use.
After installation, test the widget: click from a mobile or desktop browser and confirm the first message is sent correctly and replies reach your inbox. For FAQ and contact, see the links.
Adding the Widget to Shopify and Other CMS
Shopify and other CMS (e.g. Wix, Squarespace, custom sites) follow the same logic:
- Shopify: Use an app from the Shopify App Store that connects to the WhatsApp Business API and adds a chat button, or add a custom liquid snippet / script in your theme that embeds a click-to-chat link or widget. Ensure the first message uses an approved template if you’re on the API.
- Other CMS: Most CMS allow a custom HTML block or script in the footer or header. Paste the widget script or link provided by your platform (e.g. Spoki). The widget will show on every page where the code is loaded.
In all cases, use one approved template for widget clicks so conversations start within WhatsApp policy. For pricing and registration, see the links; you can book a demo to see widget and API together.
Handling Conversations After the First Click
When a visitor clicks the widget:
Keeping conversations in one WhatsApp thread and using templates only when required (first message, after session end) keeps you compliant and improves response times. For solutions and artificial intelligence, see the links.
Placement and design: Place the widget button where visitors can see it without blocking content (e.g. bottom-right corner). Use a clear label (e.g. “Chat with us”) and ensure it works on mobile and desktop. Some widgets allow custom colors or icons to match your brand; keep the button visible but not distracting so conversion from website to WhatsApp stays high. If your site has multiple languages, use language-specific template text or pre-filled message so visitors get a welcome message in their language when they click the widget. Analytics on widget clicks and conversation starts help you see which pages or campaigns drive the most WhatsApp conversations so you can optimize placement and CTA.
Conclusion
Adding a free WhatsApp chat widget to WordPress, Shopify, or other CMS websites requires WhatsApp Business API access (or BSP), an approved template for the first message, and a widget or plugin that shows the button and opens WhatsApp correctly. Visitors get a direct conversation channel and you keep compliance and conversation history in one place. Support and sales teams can reply from the same inbox or CRM, so conversations stay organized and compliant. Install via plugin or script, test clicks and first message, and handle replies in your inbox or CRM. Explore Spoki features and solutions, register, or book a demo to add a WhatsApp widget to your website with API and compliance in mind.
