AiOneChat
Free · no signupGenerators

WhatsApp Chat Button for your website

A floating button that opens a WhatsApp chat. Copy the HTML, paste it into your site — no script, no plugin, nothing to load.

  • Copy-paste HTML
  • Position and colour
  • No script to load
Chat buttonPrivate
0/10
Colour
Corner
Size
Preview
your-website.com

Enter a 10-digit number — the snippet below gets the real link as soon as you do.

Paste this before </body>
<!-- WhatsApp chat button -->
<a class="wa-float" href="#" target="_blank" rel="noopener"
   aria-label="Chat with us on WhatsApp">
  <svg viewBox="0 0 24 24" aria-hidden="true"><path d="M17.5 14.4c-.3-.2-1.7-.9-2-1-.3-.1-.5-.2-.7.1-.2.3-.7 1-.9 1.2-.2.2-.3.2-.6.1-.3-.2-1.2-.5-2.3-1.4-.9-.8-1.4-1.7-1.6-2-.2-.3 0-.5.1-.6l.5-.5c.1-.2.2-.3.3-.5 0-.2 0-.4-.1-.5 0-.2-.7-1.6-.9-2.2-.2-.6-.5-.5-.7-.5h-.6c-.2 0-.5.1-.8.4-.3.3-1 1-1 2.5s1.1 2.9 1.2 3.1c.2.2 2.1 3.2 5.1 4.4 1.9.8 2.6.9 3.5.7.6-.1 1.7-.7 1.9-1.4.2-.7.2-1.2.2-1.4-.1-.1-.3-.2-.6-.4zM12 2a10 10 0 0 0-8.6 15L2 22l5.2-1.4A10 10 0 1 0 12 2zm0 18.2c-1.6 0-3.2-.4-4.5-1.3l-.3-.2-3.1.8.8-3-.2-.3a8.2 8.2 0 1 1 7.3 4z"/></svg>
  <span>Chat with us</span>
</a>
<style>
.wa-float{position:fixed;right:20px;bottom:20px;z-index:9999;display:inline-flex;align-items:center;gap:10px;height:52px;padding:0 20px;border-radius:26px;background:#25D366;color:#fff;font:600 15px/1 system-ui,-apple-system,"Segoe UI",sans-serif;text-decoration:none;box-shadow:0 6px 22px rgba(0,0,0,.18);transition:transform .18s ease,box-shadow .18s ease}
.wa-float:hover{transform:translateY(-2px);box-shadow:0 10px 26px rgba(0,0,0,.22)}
.wa-float svg{width:25px;height:25px;fill:currentColor;flex:none}
@media (max-width:480px){.wa-float span{display:none}.wa-float{padding:0;width:52px;justify-content:center;border-radius:50%}}
</style>

No JavaScript, no external request, no cookie. Edit the colour or the text straight in the snippet whenever you like.

How to add a WhatsApp button to your website

  1. 1

    Enter your number, the opening message and the button text.

  2. 2

    Choose the colour, size and corner - the preview updates as you go.

  3. 3

    Copy the HTML and paste it into your site just before the closing </body> tag.

Where to paste it

WordPress: Appearance → Theme File Editor → footer.php, just before </body>; or paste it into a Custom HTML widget in the footer, which survives theme updates. Shopify: Online Store → Themes → Edit code → theme.liquid, before </body>. Wix or Squarespace: add an Embed / Code block, or the site-wide custom-code footer field.

Leave it off the checkout page. A chat button there pulls people out of a purchase they had already decided to make, and the question they ask is usually one the page could have answered.

One thing to settle before you ship it: who sees the message. A button on every page sends chats to one phone, and when that phone belongs to somebody on leave the enquiry just sits there. If more than one person should see it, you want a shared inbox rather than a handset.

Questions people ask

Where do I paste this code?

Anywhere inside the page body - just before the closing </body> tag is the usual spot. On WordPress use a Custom HTML block or a footer-scripts field; on Shopify, theme.liquid before </body>; on Wix or Squarespace, an Embed / Code block. It is plain HTML and CSS, so it works the same on a hand-written site.

Does it load any script or tracker?

No. The snippet is a link and a style block, nothing else - no library, no third-party request, no cookie. That is why it cannot slow your page down or break when someone else's service goes offline.

Will it work on mobile?

Yes. On a phone the link opens the WhatsApp app directly; on a desktop it opens WhatsApp Web, or the desktop app if it is installed. The button is sized for a thumb and stays clear of the screen edge.

Can I change the colour or the text later?

Yes - everything is visible in the snippet. The colour appears twice as a hex value, and the label is plain text inside the link. Edit it in your page and save; nothing is fetched from us.

Can I hide it on some pages?

Paste it only on the pages you want it on, or wrap it in whatever conditional your platform uses. Many sites leave it off the checkout page so it does not pull people out of a purchase.

Is there a limit on messages?

The button itself has no limit - it just opens a chat. The limits that matter start when you reply at volume or message people first, which is where a WhatsApp Business API number comes in.

Beyond the free tool

The button starts the chat. Answering it is the hard part.

Every click lands in one WhatsApp account, on one phone. A shared inbox so the whole team sees it, auto-replies outside working hours, and a record of who said what — that is what AiOneChat adds on top of this button.

  • Official WhatsApp Business API
  • Shared team inbox
  • Templates & broadcasts
See plansBook a demo