How to reference the custom code in header to a page or element?

I am trying to implement effects that I have found in this excellent thread:

For example, I am trying to implement the confetti effect on a page following this thread:

Choose the page you want the confetti to appear on Go to Page settings > Custom code > Footer Paste this code in the box:

<script src=“https://cdn.jsdelivr.net/npm/canvas-confetti@1.5.1/dist/confetti.browser.min.js”></script>
<script>
var count = 200;
var defaults = {origin: { y: 0.7 }
};
function fire(particleRatio, opts) {
confetti(Object.assign({}, defaults, opts, {
particleCount: Math.floor(count * particleRatio)
}));
}
fire(0.25, {
spread: 26,
startVelocity: 55,
});
fire(0.2, {
spread: 60,
});
fire(0.35, {
spread: 100,
decay: 0.91,
scalar: 0.8
});
fire(0.1, {
spread: 120,
startVelocity: 25,
decay: 0.92,
scalar: 1.2
});
fire(0.1, {
spread: 120,
startVelocity: 45,
});
</script>

How do I refer to a specific page?

Example:
“Congratulation-page”

What do you mean exactly by referring to a specific page?
As this code is to be applied (copy pasted) in page settings, custom code, footer => you would need to create the page “Congratulation page”

Thank you for your reply.

I try to explain better

I tried to add the code by copying and pasting it in → Settings-> Custom Code → in the Code section inside the footer

But it didn’t work.

I have already created a page called “Congratulations”.

How can I get this effect to show on the “Congratulations” page?

Or do I have to paste the code in a custom code block inside the “Congratulations” page?

The first line (SRC part) is inactive when the code is copy pasted. In order to make it work, Replace the first line by the code below(basically a re-copy paste). To see if it works=> colors should appear on that part of the code

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

It will work

2 Likes

Thanks for your help! Its working :smiley:

1 Like