---
title: "Show Confetti on a Thank You Page in Joomla - Code Snippets"
description: "Celebrate every order and sign-up with a burst of confetti on your Joomla thank you page, using one HTML snippet."
url: "https://www.tassos.gr/docs/code-snippets/howto/user-experience/confetti-thank-you-page"
date: "2026-10-23T01:23:26+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)

#  Show Confetti on a Thank You Page in Joomla

##  Celebrate every order and sign-up with a burst of confetti on your Joomla thank you page, using one HTML snippet.

 ![Show Confetti on a Thank You Page in Joomla](https://www.tassos.gr/images/2026/10/code-snippets-confetti-thank-you-page-card.png)Your thank you page appears right after a visitor buys, books, or signs up. A short burst of confetti there turns that moment into a small celebration. You can add one with the [canvas-confetti](https://github.com/catdad/canvas-confetti) library and a single HTML snippet in Code Snippets, then use Conditional Logic so it only fires on your thank you page.

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

This HTML snippet loads canvas-confetti from the jsDelivr CDN, about 10 KB, and fires one burst as soon as the page finishes loading.

```
<script src="https://cdn.jsdelivr.net/npm/canvas-confetti@1.9.4/dist/confetti.browser.min.js"></script>
<script>
  window.addEventListener('load', function () {
    confetti({
      // How many pieces of confetti to throw.
      particleCount: 150,
      // How wide the burst is, in degrees.
      spread: 90,
      // Where the burst starts: 0 is the top of the screen and 1 is the bottom.
      origin: { y: 0.6 },
      // Skip the animation for visitors who turned on reduced motion.
      disableForReducedMotion: true
    });
  });
</script>
```

To use your brand colors, add a `colors` option with your own hex codes inside `confetti({ ... })`:

```
colors: ['#4f46e5', '#22c55e', '#f59e0b'],

```

Visitors who turned on reduced motion in their operating system won't see the animation.

## [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 *Thank you confetti*.
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.

## [Show it only on your thank you page](#show-it-only-on-your-thank-you-page)

Without a condition, the confetti would fire on every page of your site. Limit it to your thank you page:

1. Open the **Conditional Logic** tab.
2. Set **Display on** to **Selected Pages**.
3. Click **New Condition Set**.
4. Click **Select Condition** and choose **URL - Query String**.
5. In **URL**, enter a part of your thank you page's address, for example `thank-you`.
6. Click **Save & Close**.

If your thank you page has its own menu item, you can choose the **Menu** condition instead. Learn more in [Run a snippet on specific pages](https://www.tassos.gr/docs/code-snippets/recipes/run-a-snippet-on-specific-pages).

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

1. Open your thank you page.
2. Watch for the confetti burst once the page loads.
3. Open any other page and make sure no confetti appears there.

That's it. Every order or sign-up now ends with a small celebration, and you didn't need another extension for it.

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 14:10