--- title: "WhatsApp chat button for your website" description: "Generate a floating WhatsApp chat button for your website: pick colour, position, greeting and delay, preview it live, and copy lightweight code. Free." canonical: "https://omnichannels.ai/tools/whatsapp-chat-button/" language: "en" updated: "2026-10-10" publisher: "BroadNet Technologies" brand: "OmniChannels.ai" --- # WhatsApp chat button for your website Canonical: https://omnichannels.ai/tools/whatsapp-chat-button/ Language: en Publisher: OmniChannels.ai by BroadNet Technologies 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. ## How to add a WhatsApp button to your website 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. **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. **Copy the code:** Copy the snippet. It is a few kilobytes of HTML, CSS and JavaScript with no external requests, cookies or tracking. 4. **Paste it before :** 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 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 , 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.