{"meta":{"page":"blog/whatsapp-chat-widget-wordpress-shopify-cms","language":"en","url":"https://spoki.com/en/blog/whatsapp-chat-widget-wordpress-shopify-cms","generated_at":"2026-04-19T00:07:12.257Z","formats":{"html":"https://spoki.com/en/blog/whatsapp-chat-widget-wordpress-shopify-cms","markdown":"https://spoki.com/en/blog/whatsapp-chat-widget-wordpress-shopify-cms.md","json":"https://spoki.com/en/blog/whatsapp-chat-widget-wordpress-shopify-cms.json","xml":"https://spoki.com/en/blog/whatsapp-chat-widget-wordpress-shopify-cms.xml"}},"content":{"title":"How to Add a Free WhatsApp Chat Widget to Your WordPress, Shopify, or Other CMS Website","sections":[{"heading":"How to Add a Free WhatsApp Chat Widget to Your WordPress, Shopify, or Other CMS Website","level":1,"text":"**Author:** Spoki | **Published:** 2/18/2026\n\n*Add a WhatsApp chat widget to WordPress, Shopify, or other CMS. Click-to-chat, templates, and compliance. Step-by-step with Spoki.*\n\n---\n\nA **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**.\n\nThis 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](https://spoki.com/en/solutions) and [features](https://spoki.com/en/features)."},{"heading":"What You Need Before Adding the Widget","level":2,"text":"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:\n\n- **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.\n\n- **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 **compliant**ly.\n\n- **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**.\n\n**Platforms** like Spoki provide **API** access, **template** management, and **widget**/integration options for **WordPress** and other **websites**. For [use cases](https://spoki.com/en/use-cases) and [customer support](https://spoki.com/en/customer-support), see the links.\n\n**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**."},{"heading":"Adding the WhatsApp Widget to WordPress","level":2,"text":"On **WordPress**, you can add a **WhatsApp** **chat** **widget** in two main ways:\n\n**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**.\n\n**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.\n\nAfter 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](https://spoki.com/en/faq) and [contact](https://spoki.com/en/contact), see the links."},{"heading":"Adding the Widget to Shopify and Other CMS","level":2,"text":"**Shopify** and other **CMS** (e.g. **Wix**, **Squarespace**, custom **sites**) follow the same logic:\n\n- **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**.\n\n- **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.\n\nIn all cases, use one **approved** **template** for **widget** **clicks** so **conversations** start within **WhatsApp** policy. For [pricing](https://spoki.com/en/pricing) and [registration](https://spoki.com/en/landing-registration), see the links; you can [book a demo](https://spoki.com/en/book) to see **widget** and **API** together."},{"heading":"Handling Conversations After the First Click","level":2,"text":"When a **visitor** **clicks** the **widget**:\n\n- The first **message** is sent via your **approved** **template** (e.g. **welcome**).\n\n- A **24-hour** **session** starts; you can **reply** with **free-form** **messages** or use **automation** (e.g. **chatbot**, **FAQ**).\n\n- **Replies** can be handled in your **platform** **inbox** or **CRM** so **agents** see **context** and **history**.\n\nKeeping **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](https://spoki.com/en/solutions) and [artificial intelligence](https://spoki.com/en/artificial-intelligence), see the links.\n\n**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**."},{"heading":"Conclusion","level":2,"text":"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](https://spoki.com/en/features) and [solutions](https://spoki.com/en/solutions), [register](https://spoki.com/en/landing-registration), or [book a demo](https://spoki.com/en/book) to add a **WhatsApp** **widget** to your **website** with **API** and **compliance** in mind."},{"heading":"Categories","level":3,"text":"- Blog-en"},{"heading":"Tags","level":3,"text":"- AI & Automation\n- GDPR & Privacy\n- Shopify\n- WhatsApp API\n\n---"},{"heading":"About Spoki","level":2,"text":"Use Spoki's simple, fast and intuitive platform to drive conversions, automate tasks and grow your business."},{"heading":"Solutions","level":3,"text":"- Marketing\n- Sales\n- Customer Care\n- Developers"},{"heading":"Special Programs","level":3,"text":"- Agencies\n- Affiliation\n- Reseller\n- Start up"},{"heading":"Quick Links","level":3,"text":"- [Features](https://spoki.com/en/features)\n- [Pricing](https://spoki.com/en/pricing)\n- [About](https://spoki.com/en/about)\n- [FAQ](https://spoki.com/en/faq)\n- [Blog](https://spoki.com/en/blog)\n- [Case Studies](https://spoki.com/en/case-studies)\n- [Integrations](https://spoki.com/en/integrations)\n\n© 2026 Spoki. All rights reserved."}]}}