Here’s some samples for putting confetti on your UpViral campaign.

First, you want to put these ONLY on the sharing page in the Advanced settings section. AND – put the script in the “Social Share Page Footer codes” section (not in the header – not 100% sure why, but the confetti won’t load if in the header).

Instructions

Confetti – comes from left and right

<!-- Confetti from Mitch Aunger 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">

// change duration here - first number is the number of seconds you want the confetti to display
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>

confetti – pops randomly on the page (like fireworks)

<!-- Fireworks (random) confetti from Mitch Aunger and original 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">
	
	// change duration here - first number is the number of seconds you want the confetti to display
	var duration = 10 * 1000;
	var animationEnd = Date.now() + duration;
	var defaults = { startVelocity: 30, spread: 360, ticks: 60, zIndex: 0 };
	
	function randomInRange(min, max) {
	  return Math.random() * (max - min) + min;
	}
	
	var interval = setInterval(function() {
	  var timeLeft = animationEnd - Date.now();
	
	  if (timeLeft <= 0) {
	    return clearInterval(interval);
	  }
	
	  var particleCount = 100 * (timeLeft / duration);
	  // since particles fall down, start a bit higher than random
	  confetti(Object.assign({}, defaults, { particleCount, origin: { x: randomInRange(0.1, 0.3), y: Math.random() - 0.2 } }));
	  confetti(Object.assign({}, defaults, { particleCount, origin: { x: randomInRange(0.7, 0.9), y: Math.random() - 0.2 } }));
	}, 250);
</script>

General confetti – comes from left and right

<!-- Confetti from Mitch Aunger 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>