Skip to content

Free WhatsApp chat button for websites

WhatsApp widget generator for your website

Design a floating WhatsApp chat button, see it live on a sample page, and copy one small HTML snippet. It works on WordPress, Shopify, Wix, Squarespace, Webflow or hand-coded sites, with no plugin, no external script and no visitor tracking.

Include the country code. Spaces, dashes and a leading + are fine.

The visitor sees this text in WhatsApp and can edit it before sending. Nothing is sent automatically.

Embed code: paste before </body>

Enter a WhatsApp number to generate the embed code.

Free, no sign-up. Generated in your browser; nothing you type is sent to MyChatWrap.

What is a WhatsApp website widget?

A WhatsApp widget is a button fixed to the corner of your website that opens a WhatsApp chat with your business when clicked. This generator produces plain HTML and CSS: a styled wa.me link with an optional greeting bubble. Because nothing is loaded from another server, it adds almost no page weight, can't slow your site down and doesn't need a cookie banner.

A lightweight chat button you fully control

Live preview

The exact code you copy is rendered on a sample page as you edit.

No script, no tracking

Pure HTML and CSS, about 1 KB, with no third-party requests or cookies.

Custom text and color

Use a label like "Chat with us" or an icon-only round button in your brand color.

Greeting bubble

An optional message above the button invites visitors to start a chat.

Mobile-friendly

Optionally collapses to an icon on phones so it never covers your content.

Accessible by default

Keyboard focus styles and a screen-reader label are built in.

How to add WhatsApp to your website

  1. 1. Enter your number

    Add your WhatsApp or WhatsApp Business number with country code.

  2. 2. Style the button

    Set the text, greeting, color, position and pre-filled message.

  3. 3. Paste the code

    Copy the snippet and paste it just before </body> on your site.

Where to paste the code

Paste the snippet once in a place that loads on every page:

  • WordPress: a header/footer code plugin, or your theme's footer.php before </body>
  • Shopify: Online Store → Themes → Edit code → theme.liquid, before </body>
  • Wix: Settings → Custom code → Body – end, on all pages
  • Squarespace: Settings → Advanced → Code injection → Footer
  • Webflow: Project settings → Custom code → Footer code
  • Any HTML site: just before the closing </body> tag

Why a plain HTML widget?

Most chat-widget plugins load JavaScript from another company's server on every page view. That adds weight, can set tracking cookies and stops working if the service changes its plans. This snippet is a styled link: if your page loads, the button works.

The trade-off is that there's no built-in click analytics. Use a distinct pre-filled message, such as "Hi, I'm on your website", so you can tell which chats came from the widget.

Making the button convert

Say what happens next ("Chat with us", "Ask a question") rather than just showing an icon, keep the greeting short and human, and pre-fill a message so visitors don't face an empty text box. On mobile, an icon-only button avoids covering product photos or checkout buttons.

What this tool does

  • Generates a floating WhatsApp button as plain HTML/CSS
  • Shows a live preview of the exact snippet
  • Supports text, color, greeting, position and mobile options
  • Validates your number before you publish

What it can't do

  • Provide live chat, chatbots or a shared team inbox
  • Count clicks or visitors; there's deliberately no tracking
  • Install itself; you paste the snippet into your site

Generated privately in your browser

Everything on this page is generated in your browser. The number, message and settings you type are not sent to MyChatWrap or stored anywhere. The only thing that leaves your device is whatever you choose to copy, download or publish yourself.

WhatsApp widget questions

Related WhatsApp tools

WhatsApp Link Generator

Create a wa.me click-to-chat link with a pre-filled message, ready to copy.

WhatsApp QR Code Generator

Make a scan-to-chat WhatsApp QR code with custom colors, as PNG or print-ready SVG.

WhatsApp Message Templates

Fill in ready-made WhatsApp business messages for orders, reminders, offers and more.

WhatsApp to PDF

Need every message instead? Create a complete chronological transcript PDF.

Already chatting with customers on WhatsApp?

Export a customer or team chat and see reply times, busiest hours, who starts conversations and more, analyzed privately in your browser.

Analyze a WhatsApp chat