3 minutes to read

How to Add Confetti to Your Webflow Page

Adding Confetti animation to Webflow is really easy!

No coding skills required. Simply follow these steps and you're good to go.

Youtube video:

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.

Play confetti example

Step 1: Click the black button that says โ€œCopy Codeโ€.

Step 2: On Webflow 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: Go to Webflow.com, and then on the Dashboard, select the website you want to use the confetti on.

Step 4: Once inside, click on the โ€œ+โ€ sign in the upper-left corner of the panel to open Elements.

Note: Please disregard the content you are seeing on this page โ€“ it is simply being used for demonstration purposes.

Step 5: Look for the โ€œEmbed" Element and then click it.

Step 6: This will open a box where you will paste the Confetti Code. This is what it will look like.

Step 7: Right-click with your mouse and click โ€œpasteโ€ to add the code you copied from ConfettiPage.com earlier (or use the text shortcut โ€œControl Vโ€ for Windows or โ€œCommand Vโ€ for Mac) to paste the code.

Note: If there is code in the box, scroll to the bottom, and paste the Confetti Code below it.

Step 8: Once you see the Confetti Code pasted into the box, click on "Save and Close".

Step 9: The Confetti will only appear on the published website. When you are ready to publish it, click on "Publish" in the upper right corner, then select the relevant domains and click "Publish to selected domains".

Step 10: To see the Confetti animation in action, click on the "New Tab" Icon.

Step 11: A new tab will open with your published website. Navigate to the page you installed the Confetti on and watch the magic happen!

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.

Ready to make your visitors' hearts dance?