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

Guide to Replace #block-id for Confetti Animation:

1. Locate the Block ID of Your Button:

   • Open your Squarespace website in a browser.

   • Right-click on the button you want to trigger the confetti animation and select Inspect or Inspect Element.

   • Look for a parent element or the button itself with an id attribute. It will look something like id="block-yui_3_17_2_1_1728728185968_2536".

2. Copy the Block ID:

   • Highlight and copy the id value (e.g., block-yui_3_17_2_1_1728728185968_2536).

3. Replace the Existing Block ID in the Code:

   • Locate the line in your JavaScript code where the button selector is defined:

• Replace #block-yui_3_17_2_1_1728728185968_2536 with the copied Block ID from Step 2.

1. Verify the Button Class:

   • Ensure that the .sqs-block-button-element class is still valid for your button. This class is commonly used for buttons in Squarespace but may vary depending on your template or custom styles.

   • If your button uses a different class, update the selector accordingly, e.g., #your-block-id .your-button-class.

2. Test the Confetti Animation:

   • Save the updated JavaScript code and refresh your website.

   • Click the button to ensure the confetti animation triggers as expected.

   • If it doesn’t work, double-check the Block ID and the button’s class.

3. Optional: Watch for Dynamic Changes:

   • If your button is dynamically loaded (e.g., part of a popup or AJAX-loaded content), the provided script includes a MutationObserver to detect changes in the DOM. No further action is required to handle this unless you need to customize the observer