<?xml version="1.0" encoding="UTF-8"?>
<page lang="en" url="https://spoki.com/en/blog/whatsapp-chat-widget-wordpress-shopify-cms">
  <meta>
    <title>How to Add a Free WhatsApp Chat Widget to Your WordPress, Shopify, or Other CMS Website</title>
    <page>blog/whatsapp-chat-widget-wordpress-shopify-cms</page>
    <language>en</language>
    <generated_at>2026-04-18T19:58:28.611Z</generated_at>
    <formats>
      <html>https://spoki.com/en/blog/whatsapp-chat-widget-wordpress-shopify-cms</html>
      <markdown>https://spoki.com/en/blog/whatsapp-chat-widget-wordpress-shopify-cms.md</markdown>
      <json>https://spoki.com/en/blog/whatsapp-chat-widget-wordpress-shopify-cms.json</json>
      <xml>https://spoki.com/en/blog/whatsapp-chat-widget-wordpress-shopify-cms.xml</xml>
    </formats>
  </meta>
  <sections>
    <section level="1" heading="How to Add a Free WhatsApp Chat Widget to Your WordPress, Shopify, or Other CMS Website">
      <text><![CDATA[**Author:** Spoki | **Published:** 2/18/2026

*Add a WhatsApp chat widget to WordPress, Shopify, or other CMS. Click-to-chat, templates, and compliance. Step-by-step with Spoki.*

---

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](https://spoki.com/en/solutions) and [features](https://spoki.com/en/features).]]></text>
    </section>
    <section level="2" heading="What You Need Before Adding the Widget">
      <text><![CDATA[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 **compliant**ly.

- **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](https://spoki.com/en/use-cases) and [customer support](https://spoki.com/en/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**.]]></text>
    </section>
    <section level="2" heading="Adding the WhatsApp Widget to WordPress">
      <text><![CDATA[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](https://spoki.com/en/faq) and [contact](https://spoki.com/en/contact), see the links.]]></text>
    </section>
    <section level="2" heading="Adding the Widget to Shopify and Other CMS">
      <text><![CDATA[**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](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.]]></text>
    </section>
    <section level="2" heading="Handling Conversations After the First Click">
      <text><![CDATA[When a **visitor** **clicks** the **widget**:

- The first **message** is sent via your **approved** **template** (e.g. **welcome**).

- A **24-hour** **session** starts; you can **reply** with **free-form** **messages** or use **automation** (e.g. **chatbot**, **FAQ**).

- **Replies** can be handled in your **platform** **inbox** or **CRM** so **agents** see **context** and **history**.

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](https://spoki.com/en/solutions) and [artificial intelligence](https://spoki.com/en/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**.]]></text>
    </section>
    <section level="2" heading="Conclusion">
      <text><![CDATA[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.]]></text>
    </section>
    <section level="3" heading="Categories">
      <text><![CDATA[- Blog-en]]></text>
    </section>
    <section level="3" heading="Tags">
      <text><![CDATA[- AI & Automation
- GDPR & Privacy
- Shopify
- WhatsApp API

---]]></text>
    </section>
    <section level="2" heading="About Spoki">
      <text><![CDATA[Use Spoki's simple, fast and intuitive platform to drive conversions, automate tasks and grow your business.]]></text>
    </section>
    <section level="3" heading="Solutions">
      <text><![CDATA[- Marketing
- Sales
- Customer Care
- Developers]]></text>
    </section>
    <section level="3" heading="Special Programs">
      <text><![CDATA[- Agencies
- Affiliation
- Reseller
- Start up]]></text>
    </section>
    <section level="3" heading="Quick Links">
      <text><![CDATA[- [Features](https://spoki.com/en/features)
- [Pricing](https://spoki.com/en/pricing)
- [About](https://spoki.com/en/about)
- [FAQ](https://spoki.com/en/faq)
- [Blog](https://spoki.com/en/blog)
- [Case Studies](https://spoki.com/en/case-studies)
- [Integrations](https://spoki.com/en/integrations)

© 2026 Spoki. All rights reserved.]]></text>
    </section>
  </sections>
</page>