Show Confetti on a Thank You Page in Joomla

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 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

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

1. Install Code Snippets 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

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.

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.