<link rel="stylesheet" href="https://fonts.googleapis.com/css2?family=Cairo:wght@400;600;700&family=Inter:wght@400;500;600;700&family=Poppins:wght@400;500;600;700;800&display=swap"> <link rel="stylesheet" href="https://kit.fontawesome.com/dcf99332e3.css" crossorigin="anonymous">
العربيةTry it free
WhatsApp API

WhatsApp Button for Your Website: Create a Floating Button and Copy the Code for Free

Add a floating WhatsApp button to your website in a minute: set the number, text, color and position, preview it, copy the code, and get more chats.

Modeer 360 teamPublished 27 August 2026 · 3 min read
Share:WhatsAppXLinkedIn
Quick answer

A WhatsApp website button is a fixed button in the corner of the page that opens a chat with your number directly. You build it with a wa.me link and your number including the country code, and place the code just before the end of your site's page. Use the tool in this article to design the button and copy ready-made code, then connect the number to an AI agent so it replies instantly.

01Design your button and copy the code

WhatsApp button builder for your websiteSet the number, text and colour, preview the button on a sample site, then copy the code.
Position
Colour
yourstore.com
Hi! How can we help?
Chat with us on WhatsApp
<!-- WhatsApp button -->
<div style="position:fixed;bottom:84px;left:20px;z-index:9999;max-width:240px;background:#fff;color:#0F1B33;padding:10px 14px;border-radius:14px;box-shadow:0 8px 24px rgba(0,0,0,.15);font:14px/1.6 sans-serif" dir="ltr">Hi! How can we help?</div>
<a href="https://wa.me/966500000000" target="_blank" rel="noopener" dir="ltr" style="position:fixed;bottom:20px;left:20px;z-index:9999;display:flex;align-items:center;gap:8px;padding:14px 20px;border-radius:999px;background:#15803D;color:#fff;font:600 15px/1 sans-serif;text-decoration:none;box-shadow:0 8px 24px rgba(0,0,0,.2)">Chat with us on WhatsApp</a>
Paste the code just before the ‎</body>‎ tag on your site. No library needed.

The code sends no data to any server. It is a static link to your WhatsApp number.

02Where do you put the code?

Your site platform · Where the code goes
Your site platformWhere the code goes
Salla or ZidStore settings, then custom code (before the end of the page)
WordPressA plugin for inserting code in the footer, or the theme file
ShopifyEdit theme, then the theme.liquid file before </body>
Custom-built siteIn the main template before </body>

Menu names may vary depending on the platform version.

035 tips to get more chats from the button

  1. Write text that states the benefit: "Ask about your size" beats "Contact us".
  2. A welcome message with one clear question.
  3. A different pre-filled message for each product page, so the agent knows what the customer wants.
  4. Don't cover the buy or cart button on mobile.
  5. Reply within seconds, or the button just brings in frustrated customers.

04The button alone isn't enough

The button opens the door, but the sale happens in the chat. If chats sit waiting for a busy staff member, the button becomes a source of complaints. Connect your number to the WhatsApp Business API, turn on an AI agent, and distribute chats across your team automatically.

Read alsoDirect WhatsApp Link: Create Your Link and a WhatsApp Button for Your Website for Free
Read alsoWhatsApp Auto Reply: 24/7 Customer Service Without a Night Shift

05Measure the button's results

  • Number of chats coming from the website each week.
  • Share of chats that turned into orders.
  • The page that brings in the most chats.
  • Average first response time on website chats.
Read alsoWhat Is the WhatsApp Business API? How It Differs From the WhatsApp Business App

Key takeaways

  • A WhatsApp button is a wa.me link fixed in the corner of the page.
  • Design it with the tool and paste the code just before the end of the page.
  • The button text and welcome message increase the number of chats.
  • Connect it to an AI agent so every button tap turns into an order.

Frequently asked questions

Is the button free?

Yes, the button is a free link. Fees apply only to template messages you send through the WhatsApp Business API.

Does it work on mobile and desktop?

Yes. On mobile it opens the app, and on desktop it opens WhatsApp Web or the desktop app.

Can I tell that a customer came from the website?

Yes, by adding a website-specific pre-filled message to the link, or by tagging chats in Modeer 360.

  • #Add WhatsApp button to website
  • #WhatsApp icon for website
  • #WhatsApp button code
  • #WhatsApp widget
Modeer 360 teamWe write practical guides for Arab businesses that sell to and serve customers over WhatsApp and calls. This article was last updated on 27 August 2026.
WhatsApp API
2 October 2026 · 4 min read

WhatsApp QR Code Generator: Create a Free QR Code for Your Number

Read the article
WhatsApp API
30 September 2026 · 6 min read

How to Keep Your Business WhatsApp Number From Being Banned: 21 Rules and an Interactive Risk Checker (2026)

Read the article
WhatsApp API
30 September 2026 · 5 min read

My Business WhatsApp Was Banned: What Now? A Step-by-Step Recovery Plan (with an Interactive Diagnoser)

Read the article

Ready to put this into practice?

WhatsApp, Instagram, Messenger and calls in one inbox, an AI agent that sells, and a CRM with invoicing. Try Modeer 360 free for 7 days, no credit card needed.

Start freeBook a demo