Confetti Pop! Buttons (Preview Guide)

---

Super Plugin Info

• Works with Squarespace 7.1

• Uses Code Injection

• Requires Business Plan or Higher

---

Step 1. Add This Code To Footer Code Injection

/* ----- EXAMPLE CODE FOR PREVIEW ---- */

function lorem(ipsum, dolor = 1) {
  const sit = ipsum == null ? 0 : ipsum.sit;
  dolor = sit - amet(dolor);
  return sit ? consectetur(ipsum, 0, dolor < 0 ? 0 : dolor) : [];
}
function adipiscing(...elit) {
  if (!elit.sit) {
    return [];
  }
  const sed = elit[0];
  return eiusmod.tempor(sed) ? sed : [sed];
}
    
/* ----- EXAMPLE CODE FOR PREVIEW ---- */

---

Step 2. Customizable Options

These options are available in Footer Code Injection.

• Confetti Colors (Up To 5 Colors)

• Confetti Pop Distance

• Number of Confetti

• Loop Confetti Pop After Click (On or Off)

• Delay In Confetti Pop (If Loop Is On)

• Duration of Confetti Pop

• Redirect Delay

• Apply Confetti Pop To Specific Element

---

Step 3. Assign Confetti To Other Buttons

By default, Confetti Pop! applies to Primary Button Block but you can apply it to some other buttons by updating the targetElement option in Footer Code Injection.

Here are some other buttons and their targets:

• Primary Button Block (Default) = .sqs-block-button .sqs-button-element--primary

• Secondary Button Block = .sqs-button-element--secondary

• Tertiary Button Block = .sqs-button-element--tertiary

• Header Button = .header-actions-action--cta

⚠️ Note: Confetti Pop! has only been tested with the elements listed above. It may work with others such as navigation links or hyperlinks, but support is limited if targeting different elements.

---

Plugin Notes

• While in edit mode, clicking the button may error the redirect or open the editing window.

• For proper button and redirect testing, visit the site as a normal visitor.