Add Confetti to your contest for more fun

In Newsby planetmitch

I'm looking for ways to make my contests 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 on giveawayRocket… I didn't write the confetti code, but it is available for common use.

Here's a demo of the confetti on a share page after a user registers to win.

Note the gif is a bit stiff and misses a couple of frames but I think you get the idea.

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.