---
title: "Add a Facebook Messenger Chat Button to Joomla - Code Snippets"
description: "Let visitors start a Messenger conversation with your Facebook Page from a floating button on every Joomla page, using one HTML snippet."
url: "https://www.tassos.gr/docs/code-snippets/howto/user-experience/facebook-messenger-chat-button"
date: "2026-10-23T01:22:44+00:00"
language: "en-GB"
---

[ Home ](https://www.tassos.gr/docs) / [ Code Snippets ](https://www.tassos.gr/docs/code-snippets) / [ How-to Guides ](https://www.tassos.gr/docs/code-snippets/howto) / [ User Experience ](https://www.tassos.gr/docs/code-snippets/howto/user-experience)

#  Add a Facebook Messenger Chat Button to Joomla

##  Let visitors start a Messenger conversation with your Facebook Page from a floating button on every Joomla page, using one HTML snippet.

 ![Add a Facebook Messenger Chat Button to Joomla](https://www.tassos.gr/images/2026/10/code-snippets-facebook-messenger-chat-button-card.png)Your customers already message your Facebook Page, but on your site they have to hunt for a contact form. A Messenger button in the corner of every page starts the conversation in the app they use anyway. You can add a Facebook Messenger chat button to Joomla with one HTML snippet in Code Snippets.

## [How to get your Messenger link](#how-to-get-your-messenger-link)

Every Facebook Page has a Messenger address at `m.me/` followed by the Page's username. The username is the last part of your Page's web address: for `facebook.com/tassosgr` it's `tassosgr`, and the Messenger link is `https://m.me/tassosgr`. If your Page has no username yet, set one under the Page's settings on Facebook.

Meta retired the Messenger Chat Plugin that opened a chat window inside your site in May 2024, so old embed codes no longer work. The m.me link is Meta's own replacement: it opens the conversation in Messenger on the web or in the app.

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

The snippet adds a round blue button with the Messenger logo to the bottom right corner of every page. It stays in place while the visitor scrolls and opens your Page's Messenger conversation in a new tab.

```
<a id="tcs-messenger" href="https://m.me/yourpage"
   target="_blank" rel="noopener" aria-label="Chat with us on Messenger">
    <svg viewBox="0 0 24 24" width="30" height="30" fill="currentColor" aria-hidden="true">
        <path d="M.001 11.639C.001 4.949 5.241 0 12.001 0S24 4.95 24 11.639c0 6.689-5.24 11.638-12 11.638-1.21 0-2.38-.16-3.47-.46a.96.96 0 0 0-.64.05l-2.39 1.05a.96.96 0 0 1-1.35-.85l-.07-2.14a.97.97 0 0 0-.32-.68A11.39 11.39 0 0 1 .002 11.64zm8.32-2.19-3.52 5.6c-.35.53.32 1.139.82.75l3.79-2.87c.26-.2.6-.2.87 0l2.8 2.1c.84.63 2.04.4 2.6-.48l3.52-5.6c.35-.53-.32-1.13-.82-.75l-3.79 2.87c-.25.2-.6.2-.86 0l-2.8-2.1a1.8 1.8 0 0 0-2.61.48z"/>
    </svg>
</a>

<style>
#tcs-messenger {

    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: #0084ff;

    color: #fff;

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

#tcs-messenger:hover {

    background: #006fd6;

    color: #fff;

}
</style>
```

Replace `yourpage` in the link with your Page's username. To move the button to the left side, change `right: 20px` to `left: 20px`. To change the color, edit the 2 `background` values: the first is the normal color, the second the hover color.

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

1. Install [Code Snippets](https://www.tassos.gr/docs/code-snippets/getting-started/how-to-install) if it isn't installed already.
2. Log into your Joomla backend.
3. Go to **Components** → **Tassos Code Snippets**.
4. Click **New**.
5. Enter a title, for example *Messenger button*.
6. Set **Code Type** to **HTML**.
7. Set **Insertion Method** to **Auto-Insert Locations**.
8. Set **Location** to **Site Footer**.
9. Paste the code above into the editor.
10. Replace `yourpage` with your Page's username.
11. Click **Save & Close**.

## [Show it only on some pages](#show-it-only-on-some-pages)

1. Open the snippet and go to the **Conditional Logic** tab.
2. Set **Display on** to **Selected Pages**.
3. Click **New Condition Set**.
4. Click **Select Condition** and choose **Menu**.
5. Pick the menu items where the button should appear.
6. Click **Save & Close**.

Learn more in [Conditional Logic](https://www.tassos.gr/docs/code-snippets/functionality/conditional-logic).

## [Check that it works](#check-that-it-works)

1. Open any page on your site.
2. Click the blue button in the bottom right corner.

A new tab opens on Messenger with a conversation with your Page. Visitors who are logged into Facebook can type right away.

To offer WhatsApp as well, see [Add a WhatsApp Chat Button in Joomla](https://www.tassos.gr/docs/code-snippets/howto/user-experience/whatsapp-chat-button). To learn more about HTML snippets, read the [HTML snippet docs](https://www.tassos.gr/docs/code-snippets/types/html).

 Last updated on Oct 15th 2026 15:10