---
title: "Add a WhatsApp Chat Button in Joomla - Code Snippets"
description: "A visitor with a quick question rarely fills in a contact form. They want an answer in a minute, and a form with a captcha and a \"we'll reply within 2"
url: "https://www.tassos.gr/docs/code-snippets/howto/user-experience/whatsapp-chat-button"
date: "2026-09-17T03:27:35+00:00"
language: "en-GB"
---

[ Home ](https://www.tassos.gr/index.php?option=com_content&view=category&layout=blog&id=24&Itemid=1088) / [ Code Snippets ](https://www.tassos.gr/index.php?option=com_content&view=category&id=120) / [ How-to Guides ](https://www.tassos.gr/index.php?option=com_content&view=category&id=125) / [ User Experience ](https://www.tassos.gr/index.php?option=com_content&view=category&id=143)

#  Add a WhatsApp Chat Button in Joomla

A visitor with a quick question rarely fills in a contact form. They want an answer in a minute, and a form with a captcha and a "we'll reply within 2 business days" note sends them elsewhere. A floating WhatsApp button opens a chat in the app they already have on their phone, and adding one doesn't need another plugin. You can add a WhatsApp chat button to your Joomla site using Code Snippets.

## [How to get your WhatsApp link](#how-to-get-your-whatsapp-link)

WhatsApp uses plain `wa.me` links, so there's nothing to sign up for.

1. Take your phone number in full international format.
2. Remove the `+`, spaces, dashes, and brackets. `+30 210 1234567` becomes `302101234567`.
3. Your link is `https://wa.me/302101234567`.
4. To pre-fill the first message, add `?text=`, for example `https://wa.me/302101234567?text=Hi,%20I%20have%20a%20question`.

## [The snippet code](#the-snippet-code)

This HTML snippet adds a floating WhatsApp button in the bottom-right corner of every page. The styling and the official icon (inlined as SVG) are included, so nothing external has to load.

 ```
<a id="tcs-whatsapp" href="https://wa.me/302101234567?text=Hi,%20I%20have%20a%20question"
   target="_blank" rel="noopener" aria-label="Chat on WhatsApp">
    <svg viewBox="0 0 32 32" width="28" height="28" fill="currentColor" aria-hidden="true">
        <path d="M16 3C8.8 3 3 8.8 3 16c0 2.3.6 4.5 1.8 6.4L3 29l6.8-1.8C11.6 28.4 13.8 29 16 29c7.2 0 13-5.8 13-13S23.2 3 16 3zm0 23.6c-2 0-3.9-.5-5.6-1.6l-.4-.2-4 1 1.1-3.9-.3-.4c-1.1-1.7-1.7-3.7-1.7-5.7C5.1 10 10 5.1 16 5.1S26.9 10 26.9 16 22 26.6 16 26.6zm6-7.9c-.3-.2-1.9-1-2.2-1.1-.3-.1-.5-.2-.7.2s-.8 1.1-1 1.3c-.2.2-.4.2-.7.1-.3-.2-1.4-.5-2.6-1.6-1-.9-1.6-1.9-1.8-2.3-.2-.3 0-.5.1-.7l.5-.6c.2-.2.2-.3.3-.5.1-.2 0-.4 0-.6s-.7-1.7-1-2.3c-.3-.6-.5-.5-.7-.5h-.6c-.2 0-.6.1-.9.4-.3.3-1.2 1.1-1.2 2.8s1.2 3.2 1.4 3.5c.2.2 2.4 3.7 5.9 5.2.8.4 1.5.6 2 .7.8.3 1.6.2 2.2.1.7-.1 1.9-.8 2.2-1.6.3-.8.3-1.4.2-1.6-.1-.1-.3-.2-.6-.4z"/>
    </svg>
</a>

<style>
#tcs-whatsapp {

    position: fixed;
    right: 20px;
    bottom: 20px;
    z-index: 999;
    display: flex;
    align-items: center;
    justify-content: center;
    width: 56px;
    height: 56px;
    border-radius: 50%;
    background: #25d366;

    color: #fff;

    box-shadow: 0 2px 10px rgba(0, 0, 0, .25);
    text-decoration: none;
}

#tcs-whatsapp:hover {

    background: #1ebe57;

    color: #fff;

}
</style>
```

Replace `302101234567` with your own number and edit the `text=` part to change the pre-filled message. If a back to top button already sits in that corner, change `bottom: 20px` to `bottom: 90px` on one of them.

The button floats in a fixed corner on purpose. It stays within reach however far the visitor scrolls, it doesn't move your content, and the green circle is a shape people already know from booking and business sites. To show it only on phones, where a tap opens the app directly, add this to the `<style>` block:

 ```
@media (min-width: 769px) {
    #tcs-whatsapp {

        display: none;
    }
}
```

## [Where a WhatsApp button pays off](#where-a-whatsapp-button-pays-off)

- **Vacation rentals and direct-booking sites.** A host who lists on Airbnb but also runs their own Joomla site gets the questions that decide a booking here: free on these dates, parking, is it child-friendly. Answer in 2 minutes and the guest books direct. The same chat later carries check-in instructions and a location pin.
- **Hotels, guesthouses, and tour operators.** Guests from abroad often prefer a chat to a phone call in a foreign language, and it works over the hotel Wi-Fi with no roaming charges.
- **Real estate agencies.** Property pages get "is this still available" and "can I visit Saturday" messages that no one would type into a contact form.
- **Restaurants and local trades.** Reservations, a quote from a plumber, or "do you have this in stock" for a small shop all fit a short chat better than an email thread.
- **Freelancers and one-person businesses.** You can't staff a live chat widget alone, but you can answer WhatsApp from your phone between jobs.

Use the [**Conditional Logic**](https://www.tassos.gr/docs/code-snippets/functionality/conditional-logic) tab to fit the button to the job: show it only on property or product pages, hide it on checkout, or switch it off outside the hours you reply.

## [How to add this snippet](#how-to-add-this-snippet)

1. Install **Code Snippets** if it is not installed already.
2. Log into your Joomla backend.
3. Go to **Components → Code Snippets**.
4. Click **New**.
5. Give your snippet a descriptive title like "WhatsApp Chat Button".
6. Select **HTML** snippet type.
7. Paste the WhatsApp button code above.
8. Replace the sample phone number with yours.
9. Select **Site Footer** as the **Insertion Method**.
10. Publish the snippet.
11. Optionally, open the [**Conditional Logic**](https://www.tassos.gr/docs/code-snippets/functionality/conditional-logic) tab to limit the button to certain pages or hours. Leave it empty to run it site-wide. Learn more in Using Conditional Logic.

Congrats! You've added a WhatsApp chat button to your Joomla site without installing another plugin.

 Last updated on Sep 2nd 2026 16:09