Skip to content
OmniChannels.ai
Menu

Free tool

WhatsApp chat button for your website

Add a floating WhatsApp button to any website in minutes. Set your number, pre-filled message, colour, position, greeting and delay, watch it live in a desktop or mobile preview, then copy a small self-contained snippet with install steps for WordPress, Shopify, Wix and plain HTML.

Free · no sign-up · runs in your browser

Number and message

Type it the way you would dial it locally, or start with + or 00. Spaces, dashes and brackets are fine.

Appears in the customer's text box; they can edit it before sending. Arabic, emoji and line breaks are encoded for you.

Button settings

Position

A white icon on this colour has 2.0:1 contrast, below the 3:1 guideline for icons. It still has an accessible name, but a darker green reads better.

Shown next to the button; visitors can close it for the rest of their visit. Leave empty for no bubble.

Read by screen readers and shown as a tooltip on hover.

Show on

0 shows it immediately. A short delay avoids competing with your page's main call to action.

Live preview

Your embed code

Enter a valid WhatsApp number to finish your code.

<!-- WhatsApp chat button (generated with omnichannels.ai/tools/whatsapp-chat-button/) -->
<div id="ocwa" class="ocwa ocwa-r" hidden>
  <div id="ocwa-tip" class="ocwa-tip" dir="auto"><span>Hi there 👋 How can we help?</span><button type="button" class="ocwa-x" aria-label="Close">&times;</button></div>
  <a class="ocwa-btn" href="https://wa.me/?text=Hi%21%20I%20have%20a%20question%20about%20your%20website." target="_blank" rel="noopener" aria-label="Chat with us on WhatsApp" title="Chat with us on WhatsApp"><svg viewBox="0 0 24 24" width="30" height="30" aria-hidden="true" focusable="false"><path fill="#ffffff" d="M17.472 14.382c-.297-.149-1.758-.867-2.03-.967-.273-.099-.471-.148-.67.15-.197.297-.767.966-.94 1.164-.173.199-.347.223-.644.075-.297-.15-1.255-.463-2.39-1.475-.883-.788-1.48-1.761-1.653-2.059-.173-.297-.018-.458.13-.606.134-.133.298-.347.446-.52.149-.174.198-.298.298-.497.099-.198.05-.371-.025-.52-.075-.149-.669-1.612-.916-2.207-.242-.579-.487-.5-.669-.51-.173-.008-.371-.01-.57-.01-.198 0-.52.074-.792.372-.272.297-1.04 1.016-1.04 2.479 0 1.462 1.065 2.875 1.213 3.074.149.198 2.096 3.2 5.077 4.487.709.306 1.262.489 1.694.625.712.227 1.36.195 1.871.118.571-.085 1.758-.719 2.006-1.413.248-.694.248-1.289.173-1.413-.074-.124-.272-.198-.57-.347m-5.421 7.403h-.004a9.87 9.87 0 01-5.031-1.378l-.361-.214-3.741.982.998-3.648-.235-.374a9.86 9.86 0 01-1.51-5.26c.001-5.45 4.436-9.884 9.888-9.884 2.64 0 5.122 1.03 6.988 2.898a9.825 9.825 0 012.893 6.994c-.003 5.45-4.437 9.884-9.885 9.884m8.413-18.297A11.815 11.815 0 0012.05 0C5.495 0 .16 5.335.157 11.892c0 2.096.547 4.142 1.588 5.945L.057 24l6.305-1.654a11.882 11.882 0 005.683 1.448h.005c6.554 0 11.89-5.335 11.893-11.893a11.821 11.821 0 00-3.48-8.413Z"/></svg></a>
</div>
<style>
.ocwa{position:fixed;bottom:20px;z-index:2147483000;display:flex;flex-direction:column;align-items:flex-end;gap:10px;font:15px/1.4 system-ui,-apple-system,"Segoe UI",Roboto,Tahoma,Arial,sans-serif}
.ocwa[hidden]{display:none}
.ocwa-r{right:20px}.ocwa-l{left:20px;align-items:flex-start}
.ocwa-btn{width:58px;height:58px;border-radius:50%;background:#25d366;display:flex;align-items:center;justify-content:center;box-shadow:0 6px 18px rgba(0,0,0,.24);transition:transform .2s ease}
.ocwa-btn:hover{transform:scale(1.07)}
.ocwa-btn:focus-visible{outline:3px solid #1a73e8;outline-offset:3px}
.ocwa-tip{position:relative;box-sizing:border-box;max-width:min(260px,calc(100vw - 40px));margin:0;padding-block:10px;padding-inline:14px 36px;background:#fff;color:#111b21;border-radius:12px;box-shadow:0 6px 20px rgba(0,0,0,.18);text-align:start;overflow-wrap:anywhere}
.ocwa-x{position:absolute;top:5px;inset-inline-end:5px;width:26px;height:26px;padding:0;border:0;border-radius:50%;background:transparent;color:#54656f;font-size:20px;line-height:26px;cursor:pointer}
.ocwa-x:hover{background:#f0f2f5}.ocwa-x:focus-visible{outline:2px solid #1a73e8}
.ocwa-in{animation:ocwa-in .35s ease-out both}
@keyframes ocwa-in{from{opacity:0;transform:translateY(12px)}to{opacity:1;transform:none}}
@media (prefers-reduced-motion:reduce){.ocwa-in{animation:none}.ocwa-btn{transition:none}.ocwa-btn:hover{transform:none}}
@media (max-width:767px){.ocwa{bottom:16px}.ocwa-r{right:16px}.ocwa-l{left:16px}.ocwa-nomob{display:none!important}}
@media (min-width:768px){.ocwa-nodesk{display:none!important}}
@media print{.ocwa{display:none!important}}
</style>
<script>
(function(){var w=document.getElementById("ocwa");if(!w)return;var t=document.getElementById("ocwa-tip"),k="ocwa-tip-closed";if(t){var c=false;try{c=sessionStorage.getItem(k)==="1"}catch(e){}if(c){t.parentNode.removeChild(t)}else{t.querySelector("button").addEventListener("click",function(){t.parentNode.removeChild(t);try{sessionStorage.setItem(k,"1")}catch(e){}})}}setTimeout(function(){w.hidden=false;w.className+=" ocwa-in"},3000);})();
</script>

Self-contained: about 3.8 KB, no external scripts, fonts or images, no cookies.

How to install it

  1. 1Copy the code above.
  2. 2Install a header and footer code plugin such as WPCode, or open Appearance → Editor if you use a block theme.
  3. 3Paste the code into the footer (body end) section, or into a Custom HTML block in the footer template part.
  4. 4Save, clear any caching plugin, and test on your phone.

Chats piling up on one phone? Answer these chats from a shared team inbox

Nothing you type here is sent to our servers.

Short answer

A WhatsApp chat button is a small floating button on a website that opens a WhatsApp chat with the business when clicked. It is a link to https://wa.me/ plus the business number and an optional pre-filled message, styled as an icon in a corner of the page. Visitors start the conversation on their own phone or WhatsApp Web, without forms or saving the number.

Trusted infrastructureOfficial Meta Business Solution ProviderGoogle RBM partnerGSMA memberISO/IEC 27001:2022ISO/IEC 27018ISO 9001:2015ISO 22301SOC 2 Type IIGDPR compliant

How to add a WhatsApp button to your website

  1. 1

    Enter your number and message

    Pick the country, type your WhatsApp number and write the message visitors will send, for example a question about an order.

  2. 2

    Style the button

    Choose the corner, colour, greeting bubble, devices and a delay. The live preview shows the button on a sample page on desktop and mobile.

  3. 3

    Copy the code

    Copy the snippet. It is a few kilobytes of HTML, CSS and JavaScript with no external requests, cookies or tracking.

  4. 4

    Paste it before </body>

    Follow the steps for WordPress, Shopify, Wix or plain HTML, publish, and test the button on a phone and a computer.

What the generated code does

The snippet adds one fixed-position link in the bottom corner of your pages. The link is a standard click-to-chat URL in the format WhatsApp documents on its help page (faq.whatsapp.com/5913398998672934): https://wa.me/ plus your full international number and, if you want, ?text= with a URL-encoded message. It opens the WhatsApp app on phones and WhatsApp Web or the desktop app on computers.

Everything is inline: the WhatsApp glyph is an SVG path, the styles are scoped under one class prefix, and the script is a few lines that handle the delay and the dismissible greeting. There are no external scripts, fonts, images or cookies, so the button does not slow your page or add a third-party tracker.

Accessible and RTL-ready by design

Floating buttons are often icon-only, which leaves screen-reader users guessing. The generated link has an aria-label you control ("Chat with us on WhatsApp" by default), a visible focus outline for keyboard users, and a decorative icon hidden from assistive technology. The greeting has a real close button with its own label.

Visitors who set their device to reduce motion see the button without the slide-in animation or hover zoom. The greeting uses automatic text direction and logical CSS properties, so Arabic and other right-to-left text lays out correctly, and you can place the button bottom-left for RTL sites.

  • Keyboard reachable link with a clear accessible name.
  • Respects prefers-reduced-motion.
  • Hidden when printing, and optional per device type.
  • Greeting dismissal remembered for the visit, with no cookies.

Choosing colour, position and timing

Bottom-right is the convention on left-to-right sites and bottom-left often suits Arabic sites, but check that the button does not cover a cookie banner, a chatbot launcher or the mobile checkout bar. WhatsApp green (#25D366) is instantly recognisable; with a white icon it has a contrast of about 2:1, so if accessibility matters most, a darker green such as #128C7E gives about 4:1.

A delay of a few seconds lets visitors read the page before the button appears, and showing it only on mobile is a sensible choice when your team answers from phones. Keep the greeting to one short, specific line, such as "Questions about delivery? Chat with us."

The official Chat on WhatsApp button and brand rules

WhatsApp also publishes a branded "Chat on WhatsApp" button in green and white and three sizes, and asks businesses to use it unchanged. According to WhatsApp's help center it is currently available in English only. The floating icon button from this tool is a different, compact pattern; whichever you use, do not alter the WhatsApp logo itself or imply that WhatsApp endorses your business.

When one phone is no longer enough

A website button can multiply incoming chats quickly. On the WhatsApp Business app, conversations live on a limited number of linked devices. On the WhatsApp Business Platform (API), the same wa.me link can feed a shared team inbox, where chats are assigned to agents, answered by chatbots or AI agents first, and followed up with approved templates after the 24-hour customer service window closes.

Plan who answers, during which hours, and how fast. Post your reply hours in the greeting if you do not cover chats around the clock.

WhatsApp website button questions

How do I add a WhatsApp button to my website?

Generate the code above with your number and message, copy it, and paste it just before the closing </body> tag of your site, or into the footer code area of your website builder. It then appears on every page.

Is this WhatsApp chat widget free?

Yes. The generator and the code are free, need no account and have no usage limits. The button links straight to WhatsApp, so there is no subscription or hosted script behind it.

Will a WhatsApp button slow down my website?

No. The snippet is a few kilobytes of inline HTML, CSS and JavaScript and makes no network requests until a visitor clicks it, unlike widgets that load external scripts, fonts and trackers.

How do I add a WhatsApp button in WordPress?

Use a header and footer code plugin such as WPCode and paste the snippet into the footer section, or add it to a Custom HTML block in your footer template if you use a block theme. Clear your cache and test.

How do I add a WhatsApp button to Shopify?

In Shopify admin open Online Store, Themes, then Edit code on your live theme. Open layout/theme.liquid and paste the snippet just before </body>, then save and check your store on mobile.

Can I show the WhatsApp button only on mobile?

Yes. Untick Desktop in the generator and the button is hidden on screens 768 pixels wide and above. You can also untick Mobile to show it on desktop only.

Can several agents answer chats from the website button?

Not well from a single phone. Connect the number to the WhatsApp Business API and route chats to a shared team inbox, where several agents and chatbots can answer the same number.

More free tools