WhatsApp chat button

Free WhatsApp Chat Widget for Your Website

Let website visitors message you on WhatsApp in one tap. Add a floating WhatsApp button with your name, photo and welcome message - free.

Create your free widget See how it works
  • Opens a WhatsApp chat with your number
  • Works on phones and desktops
  • Free, with analytics

How it works

  1. 1

    Create your widget

    Add your WhatsApp details, name, photo and welcome message, and pick your colours. Free account required.

  2. 2

    Paste two lines of code

    Copy the snippet into your site before the closing body tag, or use one of the step-by-step guides for 31 platforms.

  3. 3

    Check the installation

    Use Check installation to confirm the widget is live, and clear your site's cache if you don't see it.

Make it yours

What you can set for the WhatsApp chat widget. You can change it any time without touching the code again.

  • Display name and profile photo
  • A caption such as "Typically replies within an hour"
  • Your welcome message
  • Position: left, centre or right
  • A round icon or a "Chat now" button
  • A choice of icon images
  • Button background and text colours

Analytics

See how often the widget is shown and clicked, over time, and which websites the visits came from.

Illustration only.

Who uses a WhatsApp button

  • Online stores

    Answer size, stock and delivery questions before a visitor leaves the product page.

  • Local services

    Clinics, salons, tutors and repair shops take enquiries and bookings on WhatsApp.

  • Real estate and travel

    Share details and photos in a conversation instead of a long contact form.

  • Support

    Give customers a familiar, direct way to reach you from any page.

Works with your website

Step-by-step installation guides for 31 platforms, including notes on caching, content security policies and single-page apps.

  • Any website (HTML)
  • Google Tag Manager
  • Cloudflare Zaraz
  • WordPress
  • WooCommerce
  • Shopify
  • Blogger
  • Ghost
  • Joomla
  • Drupal
  • Wix
  • Squarespace
  • Webflow
  • Google Sites
  • Magento / Adobe Commerce
  • PrestaShop
  • OpenCart
  • React
  • Next.js
  • Angular
  • Vue
  • Nuxt
  • ASP.NET Core
  • ASP.NET Web Forms
  • PHP
  • Laravel
  • CodeIgniter
  • Django
  • Flask
  • Ruby on Rails
  • Node.js / Express

Good to know

  • The widget hands your visitor to the messaging app - the conversation continues there, not on your website.
  • Your destination is fetched by the widget with its public key, so treat it as public information, like a number printed on your website.
  • When the widget is shown or clicked, A2Z Tools records the visit (IP address, page address, referrer and time) to count views and clicks. It does not collect your visitors' names or email addresses.
  • A small "powered by a2z.tools" credit link is shown in the widget.

Other widgets

Guides

Ready in a few minutes

Create your widget for free, paste it into your site, and start getting conversations.

Create your free widget See my widgets

Related Tools

More tools in the same category

Other Tools

Popular tools from across A2Z

Quick answer

To add WhatsApp chat to a website, create a WhatsApp widget in a free A2Z Tools account, enter your country code and number, style the popup, and paste the two-line code into your site. Visitors click the button and message you in WhatsApp.

Key facts

  • Free; creating and managing widgets needs a free A2Z Tools account
  • Opens WhatsApp through a wa.me link to the number you enter
  • The conversation continues in WhatsApp, not on your website
  • A WhatsApp Business account is not required
  • Popup shows your display name, caption, welcome message and profile image, with a "Start Chat" button
  • Appears about one second after the page loads
  • Install guides for 31 platforms including WordPress, WooCommerce and Shopify
  • Dashboard shows impressions, clicks and referring websites

What is this tool?

A WhatsApp chat widget is a button on your website that starts a WhatsApp conversation with you. The A2Z Tools version shows a small popup first - your name, a caption and a welcome message - and then opens WhatsApp through a wa.me link with your number already filled in.

Nothing is typed or sent on your website. The visitor lands in WhatsApp on their phone, or WhatsApp Web on a computer, and you answer from WhatsApp as usual. If you want the chat itself to stay on your website, use A2Z Live Chat instead.

How to use it

There are two separate jobs: creating the widget in your free A2Z Tools account, and adding its code to your website. Nothing appears for visitors until the second job is done.

The code is two lines - an async script tag and a div carrying your site key. Step-by-step guides cover 31 platforms: HTML, Google Tag Manager, Cloudflare Zaraz, WordPress, WooCommerce, Shopify, Blogger, Ghost, Joomla, Drupal, Wix, Squarespace, Webflow, Google Sites, Magento (Adobe Commerce), PrestaShop, OpenCart, React, Next.js, Angular, Vue, Nuxt, ASP.NET Core, ASP.NET Web Forms, PHP, Laravel, CodeIgniter, Django, Flask, Ruby on Rails and Node.js (Express). Squarespace needs a Business plan and Webflow a paid site plan before custom code can be added, and Google Sites accepts only an embed box, not a floating button.

  1. Sign in to A2Z Tools with your email address; the account is free.
  2. Create a WhatsApp widget and enter your WhatsApp country code and number.
  3. Set the display name, caption, welcome message, profile image, icon style, position and colours, and check the preview.
  4. Save the widget and copy its two-line code.
  5. Open the installation guide for your platform and paste the code so it loads on every page.
  6. Clear your site, plugin or CDN cache, then run the Integration Centre check or open your site in a private window.
  7. Follow impressions, clicks and referring websites in your dashboard.

Example

Settings: country code 44 and the shop mobile number; display name "Harbour Bakery"; caption "Typically replies within an hour"; welcome message "Hi! Ask us about custom cakes or today's bread."; icon on the right; green button colour.

What a visitor sees: about a second after a page loads, a round WhatsApp icon appears bottom right. Clicking it opens the popup with the bakery name, caption and welcome message. "Start Chat" opens WhatsApp with a new chat to the bakery number.

Common use cases

  • Answering product, delivery and stock questions for an online shop
  • Taking bookings for salons, clinics, tutors and restaurants
  • Giving mobile visitors a faster alternative to a contact form
  • Sales enquiries for local services and real estate listings
  • Support for customers in regions where WhatsApp is the usual way to contact a business

Benefits

  • Familiar to visitors. They message you in WhatsApp, already signed in, without creating anything new.
  • No new inbox. Replies go out from the WhatsApp or WhatsApp Business app you already use.
  • Change it without touching your site. The widget loads its settings with the site key, so a new number or message takes effect without editing the code.
  • Free and measurable. See how often the button is shown and clicked, and which websites send those visitors.

Limitations

  • The chat does not happen on your website. The button hands the visitor to WhatsApp; the conversation, its history and your notifications all live there.
  • One number, and visitors need WhatsApp. Each widget points at a single WhatsApp number; create another widget for a second number. A visitor without WhatsApp or WhatsApp Web cannot use it.
  • No scheduling or targeting. The installed widget does not apply delay or trigger rules, business hours, device or page targeting, size or animation options, custom button text or a consent checkbox. It shows on every page that carries the code, about one second after the page loads, and its popup button always reads "Start Chat".
  • A credit link. Every widget shows a small "powered by a2z.tools" link.
  • Blockers. Ad blockers and privacy extensions can stop the widget loading for some visitors, so your counts can be lower than real traffic.
  • Platform plans. Squarespace (Business plan) and Webflow (paid site plan) restrict custom code, and Google Sites allows only an embed box.

Privacy & your data

What you enter

Your WhatsApp number is stored by A2Z Tools. The code on your website contains only a public site key; when a page loads, the widget uses that key to fetch its settings, including the WhatsApp number. Anyone can read the key in your page source, so treat the WhatsApp number as public information, like contact details printed on your site.

Conversations

Messages are written and answered in WhatsApp. They do not pass through A2Z Tools, and WhatsApp handles them under its own privacy terms.

What is recorded when the widget is shown or clicked

  • the visitor IP address
  • the page address and the referring address
  • the page title
  • a random device id kept in your website browser storage
  • the date and time

These records produce the impressions, clicks and referring websites in your dashboard. The widget does not ask for, or collect, visitor names or email addresses.

Your privacy notice

Because the widget records IP addresses and uses browser storage on your website, mention it in your own privacy or cookie notice where the rules that apply to your site require it.

Frequently asked questions

Do I need a WhatsApp Business account?

No. Any phone number registered on WhatsApp works, because the button opens a standard wa.me click-to-chat link. Enter the country code and number in the widget. The WhatsApp Business app is optional; use it if you want its business profile and messaging tools inside WhatsApp.

Can I use more than one WhatsApp number?

Each WhatsApp widget points at one number, but you can create several WhatsApp widgets - for example one per website, branch or team - and install each where you need it. To offer WhatsApp together with Messenger, Telegram or Viber from one button, use the All-in-One widget.

Is the WhatsApp chat widget free, and do I need an account?

Yes, it is free. You need a free A2Z Tools account (email sign-in) to create, edit and track widgets, and you can make more than one widget of each type. Your visitors do not need an A2Z Tools account.

How do I install it on WordPress, Shopify or another website?

Copy the two-line code (an async script tag and a div with your site key) and follow the installation guide for your platform. Guides cover 31 platforms, including WordPress, WooCommerce, Shopify, Wix, Squarespace, Webflow, Google Tag Manager, React and Next.js. After saving, clear any site, plugin or CDN cache and use the Integration Centre check. Squarespace needs a Business plan and Webflow a paid site plan to add custom code; Google Sites allows only an embed box, not a floating button.

Will the widget slow down my website?

The script tag is async, so your page does not wait for it before rendering. The button appears about one second after the page loads. If the widget cannot load, for example because of an ad blocker, the rest of your page is unaffected.

Does the conversation happen on my website?

No. The popup is on your website, but "Start Chat" opens WhatsApp, and the conversation continues there. If you want visitors to chat inside your website and a team to answer from a dashboard, look at A2Z Live Chat.

What does the widget record about my visitors?

When the widget is shown or clicked, A2Z Tools records the visitor IP address, the page address and referrer, the page title, a random device id kept in your website browser storage, and the time. That is what powers the impressions, clicks and referring websites in your dashboard. Names and email addresses are not collected, and messages sent in WhatsApp do not pass through A2Z Tools. Your WhatsApp number is stored by A2Z Tools and loaded with the public site key, so treat it as public.

Can I change the widget later without reinstalling the code?

Yes. The code on your site carries only the site key, and the widget loads its current settings each time a page opens. Edit the WhatsApp number, text, image or colours in your dashboard and the installed widget uses the new settings; clear your site cache if you do not see the change.

Related tools

Last reviewed: