Forgetting for a second whether I should do this (looking at you @tav), I’m curious if someone can point me in the direction of installing this little effect.
I found this page in my google searches, which provides the open source for adding a little confetti celebration to a page.
And then here is the demo page (I’m thinking of the ‘realistic look’ version).
So, the use case is a temporary section on a site announcing/celebrating a 10-year anniversary for the business and I was going to put in a little button that shot off some confetti and the links above seemed like the execution I was going for.
I’ve started my typical workflow (throwing code randomly at my project) but would appreciate a push in the right direction
You can download the ZIP package from there and get the JS file out of it, add it to your page and then add the JS as per the instructions into one of the RW JS areas.
I don’t actually mind that for your application, its a lot classier effect than your average RW magpie stack.
Not being terribly technical, would you be able to detail the steps you took to get this working, please? Damned if I can figure out where everything needs to go to get a button to trigger it!
You need to pass the confetti method the options object to trigger the realistic effect. it would be a lot easier to trigger your own little helper function with your button onclick to do this.
My issue (I think) is I couldn’t get the javascript to load properly using my own copy. It kept throwing errors. So instead I linked to the CDN version and then it worked (but of course didn’t have the other effects as part of it).
Don’t worry about fussing any more about it, this will do the trick.
@jacksona - if you’re good with the default version, you can just put this into the ‘head’ section of RW code field: <script src="https://cdn.jsdelivr.net/npm/canvas-confetti@1.4.0/dist/confetti.browser.min.js"></script>
and then set our button (or link) to look like this:
Here it is using their realistic effect example - simply create a little function (myConfetti() ) which then triggers the example code of their website.
I’ve left the CDN version in there. Button onclick now points to the myConfetti() function that is in site wide JS.
(You could of course then use any of the other examples in the same way)
You magnificent man. I swear I tried that exact setup but that might’ve been with my non-functioning self-loaded js file. Much appreciated. Edit: It wasn’t the same as mine at second glance but still much appreciated!
After a bit of Googling, I figured out that I could put this in the page body section:
<body onload="myConfetti()">
…but that fires every time the page is refreshed.
I do have Call to Action, which triggers a Limelight modal after a certain number of visits. I wonder if there’s some way to trigger it alongside that…?
We want the confetti after the page has completely loaded (including images etc) so we use the window.onload event.
Using session storage, we can allow the confetti just run just once per session. You could also do a similar thing with local storage if you want it to appear only once per computer rather than per browser tab instance.
Just add the following code to the bottom of the previous JS in my project:
window.onload = function(e){
if (!sessionStorage.getItem('confetti')){
myConfetti();
sessionStorage.setItem('confetti', 1);
}
}
