Pasilobus Confetti JavaScript API | Pasilobus Help Center

The Pasilobus Confetti JavaScript API allows developers to manually trigger confetti effects on their Shopify store. Since the app automatically injects the confetti library, you can call confetti functions directly without any additional setup.

This guide provides an overview of the available confetti functions and how to use them in your custom JavaScript code.

⚠️ Important: The Pasilobus Confetti App must be active in your Shopify theme for the API to function. If the app is not enabled, confetti effects will not trigger. Ensure you have activated the app in the Shopify Theme Editor before using the API.

🎯 How to Trigger Confetti

To manually trigger confetti, simply call the corresponding function. You can integrate this into buttons, form submissions, or any other interactive elements on your store.

Basic Example: Trigger Confetti on Button Click

document.getElementById("confettiButton").addEventListener("click", function() {
    popConfetti(); // Triggers the standard colorful confetti effect
});

🎆 Available Confetti Functions

Below is a list of confetti effects you can trigger using the API:

Function Name	Description	Best Use Case
`popConfetti()`	Classic colorful confetti burst.	General celebrations, promotions.
`popRandomConfetti()`	Randomized confetti spread and angle.	Unique, less uniform effect.
`popFireworks()`	Firework-style confetti explosions.	Product launches, big announcements.
`gold()`	Gold glitter confetti with elegant particles.	Luxury sales, VIP promotions.
`goldFireworks()`	Gold glitter confetti fireworks.	Holiday specials, high-end events.
`goldPride()`	Gold-themed pride confetti.	Special awareness campaigns.
`heartsConfetti()`	Falling heart confetti.	Valentine’s Day, romantic promotions.
`heartsShootConfetti()`	Shooting heart confetti burst.	Engagements, gifts, emotional interactions.
`heartsPrideConfetti()`	Colorful heart pride confetti.	Pride campaigns, inclusivity messaging.
`popStars()`	Star-shaped confetti explosion.	Achievement celebrations, gamification.
`popSchoolpride()`	School/team-themed confetti.	Back-to-school sales, university stores.
`popSnow()`	Snowfall confetti effect.	Winter sales, holiday campaigns.

🔧 Using Confetti with Custom Triggers

Trigger Confetti on Page Load

window.onload = function() {
    popConfetti(); // Fires when the page loads
};

Trigger Confetti on Add-to-Cart Button Click

document.querySelector(".add-to-cart-button").addEventListener("click", function() {
    popFireworks();
});

Trigger Confetti on Form Submission

document.getElementById("signupForm").addEventListener("submit", function(event) {
    event.preventDefault(); // Prevent default form submission for testing
    goldFireworks(); // Show gold confetti when form is submitted
});

💡 Best Practices

✅ Use confetti selectively – Too much can overwhelm the user experience.
✅ Match the confetti style to the event – Use hearts for romantic moments, gold for luxury sales, fireworks for big announcements.
✅ Test across devices – Ensure confetti effects work smoothly on mobile and desktop.

🚀 Get Creative!

With the Pasilobus Confetti JavaScript API, you can create dynamic, engaging experiences that delight customers and enhance interactions.

For more customization options, reach out to our support team! 🎊🚀

Introduction to Pasilobus Confetti

How to install Confetti to Shopify?

Understanding Confetti Types & Styles in Pasilobus Confetti

How to Use Pasilobus Confetti Effectively