I’m looking for ways to make my thank you pages a bit more fun for everyone involved. We want to be engaging and gamification is fun.

You may have seen confetti when you visited pages here… I didn’t write the confetti code, but it is available for common use.

Here’s a demo of the confetti on a thank you page page after a user registers to win a contest.

There are actually 2 different scripts running on that page – both are confetti. I think I like the way they work together.

One is coming straight down from the top. See code sample 1.

The other is shooting confetti up from both sides. This second one is very much configurable. You can see some demos here on their site.

The first code you need (i put it in the upViral share page header in the ‘advanced settings’):

<style>
		#confetti-canvas {
			display          : block;
			position         : fixed;
			z-index          : 9999990;
			pointer-events   : none;
			top              : 0;
			left             : 0;
			bottom           : 0;
			right            : 0;
			background-color : transparent;
		}
	</style>
<canvas id="confetti-canvas"></canvas>
<script type="text/javascript" src="https://giveawayRocket.com/confetti/js/confetti.min.js"></script>

This is the code for the confetti spitting out the sides:

<!-- Confetti from giveawayRocket.com and source: https://www.kirilv.com/canvas-confetti/ -->

<script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/confetti.browser.min.js"></script>

<script type="text/javascript">
// do this for 3 seconds
var duration = 3 * 1000;
var end = Date.now() + duration;
 
(function frame() {
  // launch a few confetti from the left edge
  confetti({
    particleCount: 7,
    angle: 60,
    spread: 55,
    origin: { x: 0 }
  });
  // and launch a few from the right edge
  confetti({
    particleCount: 7,
    angle: 120,
    spread: 55,
    origin: { x: 1 }
  });
 
  // keep going until we are out of time
  if (Date.now() < end) {
    requestAnimationFrame(frame);
  }
}());
</script>

So there you go, that should be all you need to get started.