# WhatsApp Chat Widget

> Add a free WhatsApp chat button to any website — WordPress, Shopify, Wix, Squarespace or plain HTML. Multiple agents, opening hours, prefilled message. No API, no signup.

- Canonical URL: https://www.zyff.app/widget-builder/whatsapp-chat
- Status: working
- Price: free to build and embed, no signup, no watermark; saving a widget so it can be edited later needs an account, and the paid plans raise the saved-widget and monthly-view ceilings — see https://www.zyff.app/pricing
- Processing: runs on Zyff's servers; input is held in memory for the request and never stored

Zyff's WhatsApp chat widget adds a floating button to any website that opens a WhatsApp conversation with you in one tap. It uses WhatsApp's own public click-to-chat link, so there is no WhatsApp Business API to apply for, no access token to manage and no message that ever passes through Zyff — the visitor's phone talks straight to yours. Route enquiries to different people, set the hours you are available, prefill the first message, then copy one div and one script tag that works in WordPress, Shopify, Wix, Squarespace, Webflow or a hand-written HTML page alike.

## How to add a WhatsApp chat button to your website

1. **Enter your WhatsApp number** — Type the number with its country code. Spaces, dashes and the plus sign are stripped for you, because the click-to-chat link only accepts digits — the most common reason a hand-written WhatsApp link silently fails.
2. **Write the first message** — Whatever you put here appears already typed in the visitor's WhatsApp, so they can send it without thinking of what to say. They can still edit it before sending.
3. **Choose a layout and position** — Pick the floating bubble, a labelled pill, a greeting card or an inline button, then set which corner it sits in and how far from the edges. You can also show it on phones only, or on desktops only.
4. **Copy the embed code** — Paste the container div and script tag just before your closing body tag, or download the standalone HTML file. Check the 390px mobile preview before you ship it.

## Features

- **No WhatsApp API, no approval**: The button opens wa.me, WhatsApp's own documented click-to-chat URL. Nothing to apply for, no Meta app review, no token to rotate, and no message routed through a third party.
- **Route to the right person**: Add up to six people, each with their own name, role, photo and number, and visitors pick who to message. Sales and support reach different handsets from the same button.
- **Opening hours**: Choose the days and times you answer, and show a different message outside them or hide the button entirely. Hours are read from the visitor's own clock, and the widget re-checks every minute so an open tab never gets stuck saying you are online.
- **A greeting that stays dismissed**: The greeting panel can open by itself after a delay — and once a visitor closes it, it stays closed on the pages they visit next, so it never becomes the pop-up everyone learns to ignore.
- **Phone-only or desktop-only**: Target one device class and the widget checks the real viewport in the browser, so a cached page still shows the right thing to each visitor rather than whatever was true when it was generated.
- **Nothing to slow your page**: The whole button runs in the visitor's browser from the settings in your snippet, so it makes no request to Zyff when your page loads, and the animation respects a visitor's reduce-motion setting.

## Specifications

| Property | Value |
| --- | --- |
| WhatsApp API required | No — uses the public wa.me click-to-chat link |
| Layouts | 4 templates: floating bubble, labelled pill, greeting card, inline button |
| Team members | Up to 6, each with their own number, role and photo |
| Positions | Four corners, with 0-80px offsets on each axis |
| Availability | Always on, or per-day opening hours in the visitor's timezone |
| Device targeting | All devices, mobile only, or desktop only |
| Output | One container div plus one script tag, or a downloadable HTML file |
| Price | Free to build; paid plans for saved widgets |

## Frequently asked questions

**How do I add a WhatsApp chat button to my website for free?**

Enter your WhatsApp number in Zyff's builder, pick a layout, then copy the generated embed code into your page. The whole flow is free with no signup. The snippet is plain HTML, so it drops into any CMS block that accepts custom code — a WordPress Custom HTML block, a Shopify section, a Squarespace code block, or a Wix or Webflow embed.

**Do I need the WhatsApp Business API for this?**

No, and that is the point. The button opens wa.me, WhatsApp's own public click-to-chat link, which needs no application, no approval, no access token and no Meta developer account. It works with a normal WhatsApp or WhatsApp Business number on an ordinary phone.

**Why isn't my WhatsApp link working?**

Almost always the number. Click-to-chat accepts digits only, in full international format — no plus sign, no spaces, no dashes and no leading zero from the local dialling format. Zyff strips those for you as you type, so paste the number however you have it and check the preview line underneath shows the country code you expect.

**Can different enquiries go to different people?**

Yes. Add up to six people, each with their own name, role, photo and WhatsApp number, and visitors choose who to message from the greeting panel. Anyone left without their own number falls back to the widget's main one.

**Can I hide the button outside business hours?**

Yes. Set the days and the opening and closing times, then either show a different message when you are closed or hide the button completely. Windows that cross midnight work correctly, so a 22:00 to 02:00 shift is not treated as never open.

**Which timezone are the opening hours in?**

The visitor's own. The widget runs entirely in their browser with no server behind it, so their clock is the only one available — which also means a customer in another country sees the button as open at their local time, not yours. If most of your enquiries come from one region, set the times as someone there would read them.

**Can I show the WhatsApp button only on mobile?**

Yes. Choose mobile only or desktop only, and the widget checks the real viewport width in the visitor's browser. That matters on a cached or statically generated page, where a decision baked in at build time would show the mobile-only button to everyone.

**Does my visitors' data go through Zyff?**

No. Clicking the button opens WhatsApp with your number and the prefilled text; the conversation is between their phone and yours, end-to-end encrypted by WhatsApp exactly as any other chat. Zyff never sees the message, the visitor's number, or that they clicked at all.

**Where do I paste the WhatsApp embed code?**

For a floating button, just before the closing body tag, so it is on every page you want it on. For the inline layout, put the container div wherever the button should sit in your content — a contact section or a footer. Keep the script tag with it either way.

**Is the WhatsApp chat widget really free?**

Yes. Building the button, styling it and embedding it are free with no signup, no trial and no watermark — a free embed carries a small "Chat widget by Zyff" link, which is how the tool stays free. An optional account saves a widget so you can edit it later and have every site embedding it update at once, and a paid plan adds the labelled pill and greeting card layouts, full colour control and removes the attribution link.

## Related tools

- [Google Reviews Widget](https://www.zyff.app/widget-builder/google-reviews): Show your real Google reviews on your site in 6 layouts.
- [Countdown Timer Widget](https://www.zyff.app/widget-builder/countdown-timer): Add a live countdown to a sale, launch or daily cut-off.
- [Popup Widget](https://www.zyff.app/widget-builder/popup): A popup on delay, scroll or exit intent, with frequency capping.
- [Announcement Bar Widget](https://www.zyff.app/widget-builder/announcement-bar): Pin a notice to the top or bottom of every page.
- [Photo Gallery Widget](https://www.zyff.app/widget-builder/photo-gallery): A photo gallery with a lightbox, in four layouts.
- [Chat Widget](https://www.zyff.app/widget-builder/chat-widget): One button that opens Telegram, Messenger, Instagram, Viber, LINE or a call.