Chat Widget Window

A branded chat popup that opens before redirecting to WhatsApp. Shows your brand name, welcome message, and a start-chat CTA.

Customize Your Button

Fill in the details below and see your button come to life in real-time

Brand & Header

48Γ—48 recommended. Leave empty to hide.

#075E54

Chat Window

Shown as a green bubble in the chat window

#25D366
#FFFFFF

Contact

Your company WhatsApp number for customers to contact. Include country code (e.g., +65 for Singapore).

Trigger Button

Leave empty for icon-only button

#25D366
#FFFFFF
20px
20px

Live Preview

M

My Business

Typically replies within minutes

My Business

Hi there! πŸ‘‹ How can we help you today?

Export Code

πŸ“‹ How to use: Paste this code just before the closing <code></body></code> tag in your HTML file.

How to Add the Button to Your Website

Simple instructions for all major platforms

WordPress

Go to Appearance β†’ Theme Editor β†’ footer.php or use a plugin like "Insert Headers and Footers". Paste the HTML code just before the closing {closingBody} tag.

Shopify

Go to Online Store β†’ Themes β†’ Edit Code. Find theme.liquid and paste the code before {closingBody}.

Plain HTML

Simply paste the generated HTML code anywhere in your HTML file, preferably just before the closing {closingBody} tag.

Wix

Use the Embed HTML element. Drag it onto your page and paste the button code. Position it in the corner for a floating effect.

Squarespace

Go to Settings β†’ Advanced β†’ Code Injection. Paste the code in the Footer section and save.

React / Next.js

Create a component with the button code. For Next.js, add it to your _app.tsx or layout component.

Frequently Asked Questions

Got questions? We've got answers.

Is this tool really free?
Yes, completely free! There's no signup, no payment, and no hidden costs. The tool runs entirely in your browser, and the generated code is yours to use however you like. We don't track your usage or store any data.
Will the button work on mobile devices?
Absolutely! The generated button is fully responsive and works on all devices. On mobile, clicking the button will directly open the WhatsApp app. On desktop, it opens WhatsApp Web or the desktop app if installed.
What format should the phone number be in?
Use the international format with country code, without any spaces, dashes, or plus signs in the link. For example: +65 9123 4567 (Singapore) or +1 555 123 4567 (USA). Our tool automatically strips non-numeric characters when generating the link.
Can I customize the button beyond the options here?
Yes! The generated HTML code uses inline styles, which you can easily modify. Change colors, sizes, fonts, shadows, or any CSS property. If you're using Tailwind CSS, you can convert the inline styles to utility classes for easier maintenance.
Does this comply with WhatsApp's terms of service?
Yes. This tool uses the official wa.me link format provided by WhatsApp for Click to Chat. It's the recommended way to let users start a conversation with you without saving your number first. No unofficial APIs or workarounds are used.
What's the difference between Static HTML and Hosted Script?
Static HTML gives you complete, self-contained code that you paste directly into your website. It never changes unless you manually update it. Hosted Script loads our widget.js file from our servers. Benefits: automatic updates, smaller code footprint, easy configuration via data attributes.