Click Confetti

CLICK CONFETTI

Create a colorful burst of confetti when a visitor clicks or taps a Showit element. Use it with buttons, text, images, icons, shapes, or other clickable elements.

HOW TO USE IT

1. CHOOSE YOUR ELEMENT
Add and design your element normally in Showit.

This can be a button, text, image, icon, shape, or another Showit element.

2. ADD THE CLASS SELECTOR
Select the element and go to:

Advanced → Class Selectors

Add: confetti-trigger
Then click the check mark to save it.

Showit may display a "." in front of the class name. That's correct.

3. ADD THE JAVASCRIPT
Select the page name in the Pages panel.

Go to:

Advanced Settings → Page Loaded Javascript

Paste the supplied JavaScript into the box.

Do not add <script> tags. Showit adds those automatically.

CUSTOMIZE YOUR CONFETTI

At the top of the supplied code, you'll find the settings you can safely change.

AMOUNT

var amount = 45;

This controls how many pieces of confetti appear.

Increase the number for more confetti. Decrease it for a lighter burst.

PIECE SIZE

var minSize = 10;
var maxSize = 20;

These control the size range of the confetti pieces.

Increase the numbers for larger pieces or decrease them for smaller pieces.

SPREAD

var minSpread = 150;
var maxSpread = 450;

These control how far the confetti travels from the element.

Increase the numbers for a wider burst. Decrease them for a smaller, tighter burst.

COLORS

Find the colors section at the top of the code:

var colors = [
  '#ff6b6b',
  '#ffd93d',
  '#6bcb77',
  '#4d96ff',
  '#c77dff'
];

Replace the hex codes with your own brand colors.

Keep the quotation marks, commas, and # symbol in place.

MOBILE NOTE

Click Confetti works on both desktop and mobile.

Desktop visitors click the element. Mobile visitors tap the element.

QUICK INFO

Difficulty: Easy
Requires: Class Selector + Page Loaded Javascript
Class Selector: confetti-trigger
Interaction: Click or tap
Elements: Buttons, text, images, icons, shapes + more
Mobile: Yes
Coding knowledge: Not required