How to set up a Black Friday promotional popup on Squarespace

If you run a store on Squarespace, a promotional popup is the fastest way to make sure visitors actually see your Black Friday offer. Squarespace has the popup built in; this tutorial adds the part it doesn't have: a confetti burst when the popup appears, which sounds gimmicky and works anyway.

What you get

• Confetti fires automatically when your promotional popup appears
• Control over when and how quickly the popup displays (via Squarespace's own settings)
• Point the popup anywhere: your store, a sale category, or a landing page

Step 1: Create the popup

In your dashboard, go to Marketing → Promotional Pop-Up and build the offer: headline, discount, button destination and display timing all live here. This is standard Squarespace, no code yet.

Step 2: Add the confetti

Paste this into Settings → Advanced → Code Injection → Footer:

<script src="https://cdn.jsdelivr.net/npm/canvas-confetti@1.5.1/dist/confetti.browser.min.js"></script>
<script>
function triggerConfetti() {
  confetti({
    particleCount: 200,
    spread: 100,
    zIndex: 99999,
  });
}
document.addEventListener("DOMContentLoaded", function() {
  !function e() {
    let n = document.querySelector(".sqs-popup-overlay.visible");
    n ? setTimeout(triggerConfetti, 2000) : setTimeout(e, 100);
  }();
});
</script>

The script waits for the popup overlay to become visible, then fires the confetti two seconds later. Tweak particleCount and spread to taste, or change the 2000 (milliseconds) to fire sooner or later.

Developers: the effect uses the open-source canvas-confetti library, which supports shapes, colours and directional bursts if you want to match it to your brand.

Works just as well for January sales, launches, or anything else worth celebrating. Just update the popup content and leave the code where it is.