How to Add Confetti to Your Svelte/SvelteKit App
Note: This tutorial is for developers. If you're not a developer, check out the rest of our tutorials.
First Create the Confetti Animation
Step 0: Create a custom Confetti animation and generate the code to install on your website by visiting ConfettiPage.com.
Step 1: Click the black button that says “Copy Code”.
Step 2: On SvelteKit go to the desired page you want the confetti to be in.
Quick tip: It is recommended to put the confetti animation in the thank you page, to celebrate with your visitor for taking action (signing up, purchase etc).
Then Install the Confetti Code on your Chosen Page
Step 3: Install the confetti code (script tag) into your app.html file.
VERY Important: Make sure to add
data-trigger="custom". This will prevent the confetti animation from playing until you programmatically fire it (Step 4).
Step 4. Play the confetti anywhere in your app by calling
window.ConfettiPage.play()
Got IntelliSense Warning?
If you're suffering from this IntelliSense error and it bothers you, create a global.d.ts file under /src folder and add this code:
// src/global.d.ts
interface Window {
ConfettiPage: {
play(): void;
};
}
It will get rid of the IntelliSense warning:
Optional: Remove the Watermark
If you are using the free version, you will see the “ConfettiPage.com” branding appear at the bottom left.
If you would like it removed, simply upgrade for a license to use it without the ConfettiPage branding.
Note: Once you pay for a license, you will need to create a new Confetti code as a paying customers which will generate a watermark-free code for you to install.