AISEND
Login
Free WhatsApp chat button generator

Add a WhatsApp chat button to your website in two minutes

Pick a colour and a side, write a welcome message, and watch the button float over a website. Then copy one block of code. No plugin, no signup, and no other site is loaded.

Design my buttonChat with our team
  • Free, with no plugin
  • Live preview, computer and phone
  • Works on any website
Where should the button open a chat?

Spaces, dashes and a leading 0 are fine.

It waits in the chat box when a visitor clicks. They still tap send themselves.

Design the buttonSide of the screen
Colour
Size
Show it on

The pulse stops for visitors who have asked their device for less motion.

Welcome popup
seconds

A visitor who closes the popup is not shown it again during that visit.

Copy the code

Add your WhatsApp number in step 1 to unlock the code.

Test the chat link
See the code
<!-- WhatsApp chat button. Paste this block just before </body>. -->
<style>
#aswa{--aswa-c:#1b6b4a;--aswa-t:#ffffff;--aswa-s:60px;--aswa-x:20px;--aswa-y:20px;position:fixed;bottom:var(--aswa-y);z-index:99999;display:flex;flex-direction:column;font:14px/1.45 system-ui,-apple-system,"Segoe UI",Roboto,sans-serif}
#aswa,#aswa *{box-sizing:border-box}
#aswa.aswa--right{right:var(--aswa-x);align-items:flex-end}
#aswa.aswa--left{left:var(--aswa-x);align-items:flex-start}
#aswa .aswa__btn{position:relative;display:flex;align-items:center;justify-content:center;gap:10px;height:var(--aswa-s);min-width:var(--aswa-s);margin:0;padding:0 calc(var(--aswa-s)*.27);border:0;border-radius:999px;background:var(--aswa-c);color:var(--aswa-t);box-shadow:0 8px 24px rgba(0,0,0,.22);cursor:pointer;font:inherit;font-weight:600;line-height:1;text-decoration:none;transition:transform .15s ease}
#aswa .aswa__btn:hover{transform:translateY(-2px)}
#aswa .aswa__btn:focus-visible{outline:3px solid var(--aswa-c);outline-offset:3px}
#aswa .aswa__btn svg{display:block;flex:none;width:calc(var(--aswa-s)*.46);height:calc(var(--aswa-s)*.46)}
#aswa .aswa__label{white-space:nowrap;font-size:15px}
#aswa .aswa__card{position:relative;width:min(320px,calc(100vw - 32px));margin:0 0 14px;padding:16px;border-radius:16px;background:#fff;color:#1f2937;box-shadow:0 18px 48px rgba(0,0,0,.25)}
#aswa .aswa__card[hidden]{display:none}
#aswa .aswa__x{position:absolute;top:8px;right:8px;width:28px;height:28px;margin:0;padding:0;border:0;border-radius:50%;background:transparent;color:#6b7280;font:inherit;font-size:20px;line-height:1;cursor:pointer}
#aswa .aswa__x:hover{background:#f3f4f6}
#aswa .aswa__head{display:flex;align-items:center;gap:10px;margin:0 0 12px;padding-right:24px}
#aswa .aswa__avatar{flex:none;display:flex;align-items:center;justify-content:center;width:40px;height:40px;border-radius:50%;background:var(--aswa-c);color:var(--aswa-t);font-weight:700}
#aswa .aswa__who strong{display:block;font-size:15px;line-height:1.2}
#aswa .aswa__who span{display:block;margin-top:2px;font-size:12.5px;color:#6b7280}
#aswa .aswa__msg{margin:0 0 14px;padding:10px 12px;border-radius:4px 14px 14px 14px;background:#f3f4f6;font-size:14px}
#aswa .aswa__cta{display:block;padding:11px 14px;border-radius:999px;background:var(--aswa-c);color:var(--aswa-t);text-align:center;font-weight:600;text-decoration:none}
#aswa .aswa__by{display:block;margin-top:10px;font-size:11.5px;text-align:center;color:#9ca3af;text-decoration:none}
@media (prefers-reduced-motion: no-preference){@keyframes aswa-pulse{0%{transform:scale(1);opacity:.5}100%{transform:scale(1.55);opacity:0}}#aswa.aswa--pulse .aswa__btn::before{content:"";position:absolute;inset:0;z-index:-1;border-radius:inherit;background:var(--aswa-c);pointer-events:none;animation:aswa-pulse 2.2s ease-out infinite}}
</style>
<div id="aswa" class="aswa aswa--right aswa--pulse" data-popup="1" data-delay="5">
  <div id="aswa-card" class="aswa__card" role="dialog" aria-label="Chat on WhatsApp" hidden>
    <button type="button" class="aswa__x" aria-label="Close">&times;</button>
    <div class="aswa__head">
      <span class="aswa__avatar" aria-hidden="true">S</span>
      <div class="aswa__who"><strong>Support team</strong><span>Ask us anything</span></div>
    </div>
    <p class="aswa__msg">Hi there! How can we help you today?</p>
    <a class="aswa__cta" href="https://wa.me/919876543210" target="_blank" rel="noopener noreferrer">Start chat</a>
    <a class="aswa__by" href="https://app.performancemktg.net/?utm_source=chat-widget&amp;utm_medium=widget&amp;utm_campaign=made-with" target="_blank" rel="nofollow noopener noreferrer">Made with AiSend</a>
  </div>
  <button type="button" id="aswa-btn" class="aswa__btn" aria-expanded="false" aria-controls="aswa-card" aria-label="Chat on WhatsApp"><svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.9" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true" focusable="false"><path d="M20 11.5a7.5 7.5 0 0 1-11 6.6L4 19.5l1.4-4.4A7.5 7.5 0 1 1 20 11.5Z"/><path d="M9 11.5h.01M12 11.5h.01M15 11.5h.01"/></svg></button>
</div>
<script>(function(){
var root=document.getElementById('aswa');
var card=document.getElementById('aswa-card');
var btn=document.getElementById('aswa-btn');
if(!root||!card||!btn||root.getAttribute('data-popup')!=='1')return;
var KEY='aswa-closed';
function seen(){try{return window.sessionStorage.getItem(KEY)==='1'}catch(e){return false}}
function remember(){try{window.sessionStorage.setItem(KEY,'1')}catch(e){}}
function show(){card.hidden=false;btn.setAttribute('aria-expanded','true')}
function hide(){card.hidden=true;btn.setAttribute('aria-expanded','false');remember()}
btn.addEventListener('click',function(){if(card.hidden){show()}else{hide()}});
var close=card.querySelector('.aswa__x');
if(close)close.addEventListener('click',function(){hide();btn.focus()});
document.addEventListener('keydown',function(e){if(e.key==='Escape'&&!card.hidden){hide();btn.focus()}});
var delay=parseInt(root.getAttribute('data-delay'),10)||0;
if(!seen())setTimeout(show,delay*1000);
})();</script>
Where to paste it

Paste the whole block just before the closing body tag of your pages. Pick your platform:

WordPress
  1. Install a plugin that adds code to your footer, such as WPCode or Insert Headers and Footers.
  2. Open the plugin and find the footer box.
  3. Paste the code, then save.

A plugin is safer than editing theme files, because a theme update will not remove your code.

Shopify
  1. In your Shopify admin, open Online Store, then Themes.
  2. Next to your live theme choose the three dots, then Edit code.
  3. Open the layout folder and the file named theme.liquid.
  4. Paste the code just above the closing body tag and save.
Wix
  1. Open your site settings and find Custom code.
  2. Choose to add custom code and paste the block.
  3. Set it to load on all pages, at the end of the body.
  4. Apply, then publish your site.

Custom code may need a paid Wix plan and a connected domain.

Squarespace
  1. Open Settings, then Developer tools, then Code injection.
  2. Paste the code into the footer box.
  3. Save.

Code injection is available on some Squarespace plans only.

Webflow
  1. Open your project settings and choose Custom code.
  2. Paste the block into the footer code box.
  3. Save, then publish your site.
Google Tag Manager
  1. Create a new tag and choose Custom HTML.
  2. Paste the whole block into it.
  3. Set the trigger to all pages, then save and publish the container.
Plain HTML site
  1. Open the page or template file in an editor.
  2. Paste the block just above the closing body tag.
  3. Upload the file and reload your site.

Nothing you type here is saved or sent anywhere. The code is made in your browser, and your number goes only into the button’s link.

Want every chat from your website to land in a shared team inbox, with automatic replies? Try AiSend free

Why put a chat button on your website?

Most visitors who have a question leave rather than hunt for a contact page. A button that is always in the corner turns that question into a conversation you can answer.

  • Questions become chats

    People ask on the app they already use all day. There is no form to fill in and no email to wait on.

  • Light and quick to add

    It is one small block of code. It makes no calls to other sites, so it does not slow your pages down.

  • Matches your brand

    Choose your colour, size and side of the screen, and add a short greeting in your own words.

Add a WhatsApp button to any website
Video coming soon
Write a popup that gets clicks
Video coming soon

Live on your website in three steps

The preview updates as you type, so you can see exactly what your visitors will see.

  1. Add your number

    Type your WhatsApp number and the first message people should send when the chat opens.

  2. Design the button

    Choose a colour, a side and a size. Turn on the welcome popup and write your greeting.

  3. Copy and paste the code

    Copy the block and paste it before the closing body tag of your site. Steps for each platform are in the tool.

Set it up for your kind of business

Pick a business and we load a greeting, a name, a button label and a colour that suit it into the generator above. Change any of it.

Online store

Help shoppers choose a size, check delivery or ask about an order before they leave the page.

Restaurant or cafe

Take orders and table bookings from your menu page without a phone call.

Clinic or salon

Let patients and clients ask for a slot at the moment they decide to come.

Real estate

Turn a property listing into a conversation about a visit or a price list.

School or coaching

Answer questions about courses, fees and admissions while parents are still on the page.

Agency or services

Invite visitors to describe what they need and get a reply the same day.

Not sure where to paste the code?

Tell us which platform your website is on. We will show you exactly where the code goes and check that the button appears.

Chat on WhatsApp

The complete guide to WhatsApp chat buttons for websites

How a chat button works, how to add it to your platform, how to design and word it so people click, and how to see whether it brings you customers.

What a WhatsApp chat button is

A WhatsApp chat button is a small round button that floats in the corner of your website. When a visitor clicks it, WhatsApp opens with a chat to your business number, and any first message you wrote is already typed in. On a phone it opens the app. On a computer it opens WhatsApp Web or the desktop app.

There is no special software behind it. The button is a link to a normal click-to-chat address that starts with wa.me. That means it works with a personal number, the WhatsApp Business app and a number connected to the WhatsApp Business API, with nothing to install or connect.

The button shown here can also open a short welcome popup first. The popup greets the visitor, shows a name and a line of text, and has a button that opens the chat. It is a gentle way to say that a real person is on the other end.

How to add it to your website

  1. Add your number. Choose your country, type your WhatsApp number and write the first message.
  2. Design the button. Pick a colour, a side of the screen and a size. Add a short label if you want one.
  3. Write the popup. Give it a name, a line of text, a greeting and a button label, or switch it off.
  4. Check the preview. Look at it on the computer and the phone view. Make sure it does not cover anything important.
  5. Copy the code. One button copies the whole block.
  6. Paste it into your site. Put it just before the closing body tag. The tool lists the steps for each platform.
  7. Test it. Open your site in a private window, click the button and check that the chat opens with your message.

The block contains its own styles, its markup and a small script, so you paste once and nothing else needs to be linked. Every name in it starts with aswa, so it cannot clash with your theme.

Where the code goes on each platform

Every website platform has a place for code that should appear on all pages. These are the usual ones. Menus change from time to time, so look for the closest match if a name is slightly different.

Where to paste the chat button code.
PlatformWhere to paste itGood to know
WordPressA header and footer plugin, in the footer box.Safer than editing theme files, which an update can overwrite.
ShopifyOnline Store, Themes, Edit code, then theme.liquid, above the closing body tag.Copy your theme first so you can undo a mistake.
WixSettings, then Custom code, set to the end of the body on all pages.May need a paid plan and a connected domain.
SquarespaceSettings, Developer tools, Code injection, footer box.Available on some plans only.
WebflowProject settings, Custom code, footer code.Publish the site after you save.
Google Tag ManagerA new Custom HTML tag that fires on all pages.Useful when you cannot edit the site directly.
Plain HTMLIn your page or template, above the closing body tag.Upload the file again after the change.

If your site is built with a framework and a shared layout file, paste the code into that layout so it appears on every page at once.

Design it so people click

A chat button only works if visitors notice it and trust it. A few small design choices decide which.

Side, size and distance

Bottom right is where most visitors expect a chat button, so start there. Choose the left side only if something else on the right already sits in the corner, such as a cookie banner or another widget. The medium size suits most sites. Go larger for sites visited mostly on phones, where a fingertip needs a bigger target.

Common choices and what they do.
ChoiceWorks well whenWatch out for
Bottom rightYour site has nothing else in that corner.Overlap with a cookie banner or back-to-top arrow.
Bottom leftThe right corner is already used.Left-handed phone users reach it less easily.
Icon onlyYour layout is busy or your audience is used to chat buttons.A few visitors will not know what it does.
Icon with wordsYou want to be clear, such as "Chat with us".It is wider, so it may crowd small screens.
Pulse onYou want to draw attention gently.Constant motion can irritate, so keep it for key pages.
Popup onYou want to start the conversation for the visitor.Opening too fast feels pushy.

Colour and contrast

Choose a colour that stands out from your page background but matches your brand. The generator checks the contrast and picks a white or dark icon, whichever is easier to see on your colour, so a light button never gets a pale icon.

Do not hide your content

Check the button on your busiest pages, such as product pages and checkout. A button that covers a price, a form field or a buy button costs more than it earns. Use the distance sliders to move it clear, or show it only on the screens where it fits.

Writing a welcome popup that gets clicks

The popup has one job: to make starting a chat feel easy. It should sound like a person, ask a question the visitor can answer, and offer one clear next step.

Weak and stronger popup messages.
WeakStrongerWhy it works better
Welcome to our website.Hi! Need help choosing something? Ask us here.It offers help rather than stating the obvious.
Contact us for more information.Want a quote? Tell us what you need and we will reply today.It says what happens next.
Chat now!!!Questions about delivery? We can check for you.It names a specific worry.
Click hereStart chatThe button says what will happen.

When should it open?

A popup that opens the moment the page loads interrupts people who have not yet seen what you offer. Five to ten seconds is a sensible starting point for most pages, and longer for pages that take time to read. A visitor who closes it is not shown it again during that visit.

Be honest about who answers

  • Use a real name or team name. "Priya from Sales" is warmer than "Support".
  • Do not promise speed you cannot keep. If you reply within a day, do not write "replies in minutes".
  • Match your opening hours. If nobody is online at night, say so or let the first message set the expectation.

The first message

The first message is the text waiting in the chat box when the visitor arrives in WhatsApp. They still tap send, so nothing goes out without their choice. Write it as the customer would: short, friendly and specific, such as "Hi! I have a question about your delivery times."

Use a different message for each page

The simplest way to find out which page brings you chats is to give each one its own first message. A pricing page might say "Hi! I have a question about your pricing", and a product page "Hi! I have a question about this product". When the chat arrives, you can see which page it came from without any extra tools.

To do this, make a separate button for each page template, or place a different code block on key pages. If you also want a quick reference for the links themselves, the WhatsApp link generator builds them.

Speed, privacy and accessibility

A chat button sits on every page, so it has to be good company. The code made here is built with that in mind.

  • It is small. A few kilobytes of code, with no images and no fonts to download.
  • It loads nothing from other sites. The icon is drawn inside the code, so there are no extra requests that could slow your page.
  • It does not shift your layout. The button is fixed to the corner of the screen, so nothing on the page moves when it appears.
  • It sets no cookies. To remember that a popup was closed during a visit, it uses the browser session, which ends when the tab closes. If you have questions about privacy notices, ask whoever looks after your compliance.
  • It can be used with a keyboard. Every part can be reached with the Tab key, and the Escape key closes the popup.
  • It respects reduced motion. The pulse stops for visitors whose device is set to reduce animation.
  • It has readable colours. The icon colour is chosen for contrast against your button colour.

When a visitor sends a message, WhatsApp shows you their phone number, because that is how WhatsApp works. Visitors who only click the button and never send anything stay anonymous to you.

See whether it is working

A button that gets clicks but no sales is worth knowing about. There are three simple ways to measure, from easiest to most detailed.

  1. Count the chats. Compare how many new conversations you get each week before and after you add the button.
  2. Read the first message. If you gave pages different first messages, you can see which pages bring chats.
  3. Track the clicks. In Google Tag Manager, create a trigger for clicks on links that contain wa.me. The popup's button is such a link, so each click can be counted as an event in your analytics.

Give the change a few weeks before you judge it. Try one change at a time, such as the greeting or the delay, so you know which one made the difference.

If the button does not appear

  • Your site is cached. Clear the cache in your caching plugin or host, then reload in a private window.
  • The code went in the wrong place. It must be inside the page, before the closing body tag, not only in the admin area.
  • A plugin removed the script. Some security or speed plugins strip scripts from custom code. Check their settings, or add the code with Google Tag Manager.
  • It is hidden behind something. Another widget or banner may sit on top. Move the button with the distance sliders, or move it to the other side.
  • You limited it to one device. Check the "Show it on" setting. A button set to phones only will not appear on a computer.
  • The chat does not open. Check that the number has the right country code and that WhatsApp is installed on the phone or reachable through WhatsApp Web.

If it still does not work, tell us which platform you use and we will help you find the cause.

A button starts the chat. AiSend helps you run it.

Once visitors start messaging you, the work is answering well and fast. AiSend gives your team one place to do that.

  • One shared inbox

    Every chat from your website lands in the same place, where your team can answer, assign and tag them.

  • An automatic first reply

    Greet visitors the moment they message you, ask what they need and hand over to a person when it matters.

  • Follow-ups to opted-in contacts

    Send approved template messages to people who have agreed to hear from you.

Create your accountExplore the WhatsApp Business API

See it in action

Two short walk-throughs: adding the button to a website, and writing a popup that gets clicks.

Add a WhatsApp chat button to your website
Video coming soon

Add a chat button to your website

From the generator to a live page.

Write a welcome popup that gets clicks
Video coming soon

Write a popup that gets clicks

Wording, timing and the first message.

What customers say

Using AiSend in your business?

Tell us how it is going. With your permission, we will share your story here.

Share your feedback

Guides on WhatsApp chat buttons

Practical reads on adding a chat button, writing the popup and turning clicks into customers.

Guides

How to Add a WhatsApp Chat Button to Your Website

A step-by-step guide to adding a floating WhatsApp chat button to WordPress, Shopify, Wix and any HTML website, with no plugin needed.

11 October 2026, 3 min readRead article
Guides

WhatsApp Chat Button Best Practices: Popup and Placement

Where to put a WhatsApp chat button, how to word the welcome popup and first message, and how to tell whether it brings you customers.

11 October 2026, 2 min readRead article
View all articles

More free WhatsApp tools

Everything here is free and runs in your browser.

View all free tools

Frequently asked questions

How do I add a WhatsApp chat button to my website?

Add your number in the generator, design the button, then copy the code and paste it just before the closing body tag of your pages. The tool lists the exact steps for WordPress, Shopify, Wix, Squarespace, Webflow, Google Tag Manager and plain HTML sites.

Is this WhatsApp chat button free?

Yes. There is no signup, no limit and no monthly fee. The code runs on your own website and does not depend on our servers, so it keeps working however long you leave it.

Do I need a plugin?

No. The button is one block of code. On WordPress, a plugin that adds code to the footer is the easiest place to paste it, but you do not need a chat plugin.

Does it work with WhatsApp Business and the Business API?

Yes. The button opens a chat with any number registered on WhatsApp, including the WhatsApp Business app and a number connected to the WhatsApp Business API.

Can I show the button only on phones or only on computers?

Yes. Choose "Phones only" or "Computers only" under "Show it on". The generator also tells you when your setting hides the button on the preview you are looking at.

How do I put the button on the left side?

Choose "Left" under "Side of the screen". You can also use the distance sliders to move it away from the edge or from other items in the corner.

What does the welcome popup do?

It opens a small card above the button with a name, a short greeting and a button that starts the chat. You choose the words and how many seconds it waits. A visitor who closes it will not see it again on that visit.

Can I turn the popup off?

Yes. Untick "Greet visitors with a short message". The button then opens WhatsApp as soon as it is clicked.

Can I change the colour and the label?

Yes. Choose from the colours or type your own hex code, and add a short label such as "Chat with us", or leave it as an icon only. The icon colour is chosen automatically so it stays easy to see.

Will the button slow down my website?

It should not. It is a few kilobytes, it loads no images, fonts or scripts from other sites, and it is fixed to the corner so it cannot move your layout.

Does it use cookies or track my visitors?

It sets no cookies and does no tracking of its own. To avoid showing a closed popup again during a visit, it remembers the choice in the browser session only. Speak to whoever looks after your privacy policy about how it applies to your site.

Why is my chat button not showing?

The usual causes are a cached page, code pasted in the wrong place, a plugin that removes scripts, or another element covering it. Check the "Show it on" setting too. The guide above walks through each one.

  • Clear your site cache and reload in a private window
  • Make sure the code is inside the page, before the closing body tag
  • Check whether a security or speed plugin strips scripts
  • Look for another widget or banner covering the corner
  • Confirm the device setting is not hiding it
How can I tell how many people click the button?

Use Google Tag Manager to count clicks on links that contain wa.me, or give each page its own first message and see which one arrives in your chats. The guide above explains both.

Can I use different numbers for different pages?

Yes. Make a separate block for each number and paste the right one on each page template. Only use one block per page, because two on the same page would clash.

Is my number saved or sent anywhere?

No. The code is made in your browser. Your number goes only into the link inside the button, which is visible to anyone who views your page source, as with any contact link.

Want help setting up WhatsApp for your business?

Leave your details and our team will call you back. If you would rather chat, message us on WhatsApp.

  • We call to understand what you need
  • Get help connecting your number to the official WhatsApp Business API
  • No obligation to sign up
Chat on WhatsApp+91 87078 79485

Request a call back