WhatsApp chat button for your website

Generate the HTML and CSS of a floating WhatsApp button for your own site: choose the corner, color, text and message, and optionally hide or relabel it outside business hours in your time zone. You copy the code; nothing is installed for you.

Runs 100% in your browser: no account, no upload. Nothing you type or open in this tool is sent to any server.

Chat

With area code. A +country code also works.

Button

Leave empty for a round icon-only button.

Text is black or white, whichever contrasts more.

Business hours (optional)

Approximate preview

Drawn by this page; the code below does not run here.

Code for your website

Enter a valid number to generate the code.

How to use it

  1. 1Enter the number and message. The button opens a wa.me link with that number and the message already typed.
  2. 2Style the button. Pick bottom right or left, the color and the text. An empty text gives a round icon-only button. The text color is chosen for contrast.
  3. 3Set business hours (optional). Choose the time zone, days and hours. Outside them, a small script hides the button or swaps its text. It checks again every minute.
  4. 4Copy and paste. Paste the code before </body> on your pages, or in your site builder's custom-code (HTML) area.
  • The icon is a generic chat bubble drawn for this tool, not the WhatsApp logo.
  • The business-hours part is a small inline script. If your site's Content Security Policy blocks inline scripts, move it into a .js file or leave hours off.

Frequently asked questions

Does the button need a plugin or an account?

No. It is plain HTML and CSS (plus an optional script), with no external file, tracking or account.

Will it work on WordPress, Wix or Shopify?

Wherever you can add custom HTML to every page: a theme footer, a custom code block or a header/footer code setting.

How does the business-hours check work?

The script reads the current time in the time zone you chose, using the visitor's browser clock and the built-in Intl API, and compares it with your days and hours.

Can I change it later?

Yes. Come back, adjust the options and paste the new code in place of the old one.

Related tools

See all free tools

WhatsApp is a trademark of Meta Platforms, Inc.; these tools and SyncZap are not affiliated with, endorsed or sponsored by WhatsApp or Meta. Results are generated in your browser from what you enter; check them before you publish or print.