How to add Confetti Pop! Buttons in Squarespace 7.1

1. Add this code to Website Tools → Code Injection → Footer


///WWW.SQUARESPELL.COM///
function lorem(ipsum, dolor = 1) {  const sit = ipsum == null ? 0 : ipsum.sit;
  return sit ? consectetur(ipsum, 0, dolor < 0 ? 0 : dolor) : [];
///WWW.SQUARESPELL.COM///

Key Features

  • Confetti Library: The code imports a confetti library from a CDN, allowing you to use the confetti() function to create confetti animations.

  • Confetti Trigger: The confetti animation is triggered when a specific button is clicked. You can change the event or the button by modifying the selector.

  • Prevent Default Link Behavior: The e.preventDefault() function stops the link from navigating immediately, giving time for the confetti effect to show first.

  • Customizable Particle Count:

    • particleCount: 100: This sets the number of confetti particles in the first trigger. You can change the number of particles by modifying this value.

  • Confetti Spread and Origin:

    • spread: 70: Controls the spread of confetti, which can be increased or decreased for wider or narrower effects.

    • origin: { y: 0.6 }: Adjusts the starting position of the confetti on the Y-axis. Modify this value to change where the confetti launches from vertically.

  • Confetti Colors:

    • colors: ['#ff0000', '#00ff00', '#0000ff', '#ffff00', '#ff00ff']: Customize up to 5 colors for the confetti by changing these hex color codes.

  • Second Confetti Burst: After a 150ms delay, the confetti is triggered again from two angles:

    • particleCount: 50: You can customize the number of particles for the second burst.

    • angle: 60 and angle: 120: Change these angles to adjust the direction from which the confetti pops.

    • origin: { x: 0 } and origin: { x: 1 }: Controls the horizontal position of the confetti. x: 0 is the left side, and x: 1 is the right.

  • Navigation Delay:

    • The confetti plays for 300ms before redirecting to the link (window.location.href). You can adjust the delay by changing the value in setTimeout().

  • Button Selector:

    • The button is selected using the CSS selector #block-yui_3_17_2_1_1728728185968_2536 .sqs-block-button-element. Modify this selector to attach the confetti effect to any button or link on your page.

  • Dynamic Content Handling:

    • The MutationObserver watches for changes in the document and re-attaches the confetti trigger if the button appears dynamically. This is useful if your button is loaded via JavaScript.

Use Cases

  • Button Selector: Modify the button selector in the JavaScript code to target the "Subscribe" button on the sign-up form.

  • Particle Count: Set a moderate particleCount (e.g., 80–150) to avoid overwhelming the user but still make the celebration noticeable.

  • Confetti Colors: Customize the confetti colors to match the website's or brand's palette, or choose colors that represent fun and celebration.

  • Spread and Origin: Adjust the spread (e.g., spread: 60) to control the width of the confetti's distribution, ensuring the animation remains centered around the button.

  • Redirect Delay: After the confetti animation plays, redirect the user to a thank-you page or confirmation message. You can customize the delay to give enough time for the animation (e.g., setTimeout(() => { window.location.href = "thank-you.html"; }, 400)).

  • Loop Option: Keep the confetti effect single-use (without looping), so it only plays once upon clicking the "Subscribe" button.

To apply this code to your Squarespace site, simply follow the steps provided. If you encounter any issues or need further assistance, feel free to reach out to us—we’re here to help!