Skip to main content


🔙 May 2019


Due to a recent update from our removal of Jquery dependancy, this script is no longer functioning reliably. I’ll leave the script and instructions on this page as it may function with some individual tweaking. However, in some cases this workaround may not work.

-@jess



tips-scripts-banner


Let’s be honest. Each time you get a new lead notification email in your inbox, you probably feel like celebrating. And who wouldn’t? New leads means more potential business.


But sometimes we get so wrapped up in convincing people to sign-up that we forget about the post-click experience all together. The truth is, your new leads should be just as excited as you are. After all, they just signed up to receive something exciting from you… whether it be a special offer, newsletter, ebook, etc. To


Here’s a super simple way to inject a little ‘celebration’ into your post-click experience. 🎉


Check out the effect (built in Unbounce) here:

http://landingpage.noahmatsell.ca/confetti-confirmation/



confetti 7



How to Install in Unbounce




Click Here for Instructions



🚨

This is not an official Unbounce feature. This functionality is based entirely on third party code, and has only been tested in limited applications. Since this isn’t a supported Unbounce feature, our support team will be unable to assist if things go awry. So if you are not comfortable with HTML, Javascript and CSS, please consider consulting an experienced developer.





Step 1.


Go grab the latest version of the javascript and CSS files here: https://gist.github.com/noahub/83733fae847d94e17e9835d5d4419109


Step 2.


Create your landing page form and style the form confirmation dialog to your liking.


Step 3.



  • Open the Javascripts console and click +Add New Javascript

  • Name your new script Confetti sJS]

  • Set the placement to Before Body End Tag

  • Paste the script 1-confetti.js into the editor and click Save Code


instruction gif


Step 4.



  • Open your Stylesheets console and click +Add New Stylesheet

  • Name your new stylesheet Confetti sCSS]

  • Make sure Soft Wrap is selected

  • Paste the CSS script 2-confetti.css into the editor and click Save Code


instructions 2


Step 5.


Save and Republish your landing page. Be sure to test out the published version of the page.


Step 6.


Celebrate. 🍾 🎊



That’s it!


If you want to play around in the code a bit, you can tweak a few things such as the colours to make the confetti more on-brand.


If you end up using this on your next landing page, be sure to come back and share with the Community! 🙂







Want to take your Unbounce landing pages + Convertables™️ to the next level?

:spinbounce: Check out the Ultimate List of Unbounce Tips, Scripts & Hacks

I just tried this out. Soooo simple, but so freaking delightful.


Keep 'em coming @Noah ! 🎉


https://media.giphy.com/media/26BGP98lm74FJgfNS/giphy.gif(image larger than 10000KB)


This is very cool.

Hey does the JS and CSS go into the form confirmation page or the main page. It’s not working for me for some reason. I put the all code on the main page.

Sorry to hear @Ben_Carew. All of the code should go on the main page, and it’s important that the JS snippet is set to ‘Before Body End Tag’. If it is, feel free to dm me your page and I’ll take a look!

Hi Noah - I just tried it on another machine and apparently it was a caching issue on the original machine - all good now - loving it!

Hey @Noah this is awesome! Is there a way to make it rain confetti when a users clicks a button? i.e. to download a file or see a lightbox?

@Noah is currently at a workshop with Google right now, so he might be able to reply back right away. Just wanted to give you a heads up @Zoe_Tattersall!

Cheers! No rush, confetti is 😂😉

Hey @Noah, just wondering if you saw my question above? 🙂

OK I’ve got a form on my page now and soooo keen for confetti – but it’s not working for some reason.

This is the page I’ve set it up on – http://www.zoetattersall.com/


Please help! 🙂


Awesome script! Perfect for a Bday Promo LP I’m doing!! nice work!

Same question as Zoe! I would like it for a specific lightbox button on my page. Any help?


I did try the above though but that didn’t work for my case.

Is this only going to work with the form confirm dialogue? I typically use redirects so I can easily track results from Adwords/FB on a thank you page. Wonder if it is possible to somehow use it in that sequence.

Hi there,

has anyone else experienced that since adding the JS and CSS code for the confetti, the preview of the landing page loads super slowly?

I cannot get this script to work has something changed?

Reply


Terms & ConditionsCookie settings