Please Help - wanting to create an automatic Confetti Explosion in html for my Wix site.

[kirstend]

Hi Everyone 🙂

I am in the middle of creating an e-commerce store and would love to add a little something special to my check out page.

I was thinking about an explosion of confetti, or glitter or something similar would be nice.  However, I would like it to look elegant and tasteful. I don't mind something like this ....  

import Confetti from 'react-dom-confetti';

const config = {
  angle: 51,
  spread: 360,
  startVelocity: 68,
  elementCount: 200,
  decay: 0.87
};
return <Confetti active={ someProp } config={ config }/>

I just have no idea how to put it into HTML l format for my WIX site. 

I found this from      https://daniel-lundin.github.io/react-dom-confetti   -but I know it is missing something major to make it work........ and I dont like that you have to press a button to make it work, I would prefer it to be automatic.

Please help me.

Kirsten 🙂

[Jsum]

@kirstend, Maybe you could repurpose one of these jquery plugins: https://www.jqueryscript.net/demo/Canvas-Fireworks-Effect-jQuery-Click-Fireworks/

Need help? Hire Us Here

[kirstend]

Hi Jsum 🙂 

I like https://www.jqueryscript.net/animation/particle-system-flying-circles.html . 

But am not sure what I need to do .... do I just paste 1,2,3,4,5 one after the other on my site? 

I tried downloading it and entering the html on my page but it didnt work?

Eeeeek please help

[tjoyce]

@kirstend - I don't think your wix website is built using reactjs, but, if it is, according to the documentation (This component will trigger a confetti explosion every time the prop active goes from a falsy to truthy value.) 

So, all you have to do is change the active to true and it will happen on page load:

import Confetti from 'react-dom-confetti';

const config = {
  angle: 51,
  spread: 360,
  startVelocity: 68,
  elementCount: 200,
  decay: 0.87
};
return <Confetti active=true config={ config }/>

If you're looking for a straight HTML implementation of confetti, you can grab some code from here: https://codepen.io/tag/confetti/

---

If this answer helped, please, mark as solved 😄

---

tim@belch.io | forms.belch.io | Design your own Beautiful HubSpot Forms; No coding necessary.

Drop by and say Hi to me on slack.

[kirstend]

Hi Tjoyce,

Thank you for your detailed response....

I have chosen one from (https://codepen.io/steveebenezer/pen/qPeJOq?page=3)  that i am hoping to tweak slightly but i have no idea how to insert it to my wix .

I am not sure if i'm doing it correctly but i will send you a screen shot of what happens when i go to insert it..... 

As for this one ....

import Confetti from 'react-dom-confetti';

const config = {
  angle: 51,
  spread: 360,
  startVelocity: 68,
  elementCount: 200,
  decay: 0.87
};
return <Confetti active=true config={ config }/>

 I really like this but I have no idea what to add to it to make it work. I also have no idea how to add a component to make it truthy? I don't even know what that means. 

I know it's pathetic but I'm such a newbie with coding and it's really frustrating me. 

Do you know what I need to add to the above code to make it work on my page? 

Thank you

Kirsten 

[roisinkirby]

Hey @kirstend - welcome to the Community!

Could you please - if possible - share a link to the page/site you are working on?

@tjoyce, @Jsum, @Anton, @AJLaPorte_diagr - what would your advice be here?

[kirstend]

Hi Roisinkirby

Thank you for your reply! 

I certainly can , but the page is the checkout page of my site so I dont think i can link it...I have taken a screen shot though of the page, i just feel it looks so boring and really want to spice it up a little by adding something quirky.

I have also added the URL of my checkout page on my WIX account - I'm not sure if you'll be able to view it though but i'll attach both 🙂

Thank you

https://editor.wix.com/html/editor/web/renderer/edit/c978c779-dbd8-4579-9df5-87d2e15e1832?metaSiteId...

My site is also www.wheresmybobbypin.com.au if anyone wants to see. I still have a long way to go but I am getting there 🙂