Code working with Webflow but not with WeWeb

Ask us anything How do I?
1

Hey everyone!

We wanted to include a confetti effect in our app. We found the following code, which we setup in the Body section of custom code:

<script src="https://cdn.jsdelivr.net/npm/canvas-confetti@1.3.2/dist/confetti.browser.min.js"></script>

<script>
$('#confetti-btn').click(function() {

var end = Date.now() + (8 * 500);
var colors = ['#e6631a', '#72bedd'];

(function frame() {
  confetti({
    particleCount: 2,
    angle: 60,
    spread: 100,
    origin: { x: 0 },
    colors: colors
  });
  confetti({
    particleCount: 2,
    angle: 120,
    spread: 90,
    origin: { x: 1 },
    colors: colors
  });

  if (Date.now() < end) {
    requestAnimationFrame(frame);
  }
}());
  
});
</script>

It needs an element with ID, so in WeWeb we put in the ID under HTML attributes “confetti-btn”.
It did not work. We went on to test the same in Webflow and it worked. It was the exact same code and process.

Does someone know how to get the code to work in WeWeb?

2

You’re calling a jquery method in your script $(), but there is not jquery in WeWeb.
You’re attaching an event click to a button with code but there is no need in WeWeb, you can just add a workflow on click on a button, add a custom js block and call directly the relevant part of your code snippet

const end = Date.now() + (8 * 500);
const colors = ['#e6631a', '#72bedd'];

(function frame() {
  confetti({
    particleCount: 2,
    angle: 60,
    spread: 100,
    origin: { x: 0 },
    colors: colors
  });
  confetti({
    particleCount: 2,
    angle: 120,
    spread: 90,
    origin: { x: 1 },
    colors: colors
  });

  if (Date.now() < end) {
    requestAnimationFrame(frame);
  }
}());

1 Like
3

Thank you so much, Alexis, this worked perfectly!

Have a wonderful day.

1 Like
4

This is great, thanks!

I have an input select field, and I’m trying to figure out if it’s possible to add confetti to only one option, when that’s selected. Any ideas?

5

Hi,

On your workflow you can add a split true/false and go to the custom js confetti code only if the value of your select is something specific