Can I show a Squarespace popup on mobile?

Yes. Use a longer delay, larger tap targets, and an easy close. The promotional popup lets you choose to show on mobile and cap frequency. For custom on‑click popups, ensure the modal fits small screens and the close button is always visible. Consider an announcement bar for always‑on messages.

Can I embed third‑party forms (Mailchimp, ConvertKit, Calendly) in a popup?

Yes. Place the provider’s embed inside the modal body via a Code Block. Most embeds render fine in modals. Test on mobile for scrolling and input behavior. If the embed is tall, allow the modal to scroll and keep the close control visible.

How do I avoid spam filters with a Squarespace email popup?

Authenticate your sending domain (SPF/DKIM) with your email provider, use double opt‑in, write clear subject lines, and balance text and images. Keep lists clean by removing inactive subscribers. Squarespace’s Email Campaigns docs cover domain authentication steps.

How do I trigger a popup on click only?

Use a small HTML modal with CSS and a short JavaScript snippet to open it when elements with data‑popup="#promo-popup" are clicked. This gives precise, on‑demand behavior without auto‑showing on page load.

Is exit intent supported in Squarespace?

The promotional popup doesn’t include exit‑intent. You can approximate it on desktop with a lightweight script that opens the modal when the cursor leaves the viewport near the top. On mobile, prefer scroll‑based or on‑click triggers instead.

Create a Popup in Squarespace (Forms & Promos)

Q: How do I create multiple popups for different pages?

The built‑in promotional popup is global. For multiple popups, add on‑click modals per page or conditionally include modal code in specific pages via Page Settings → Advanced. Keep targeting clear so visitors don’t encounter multiple prompts in one session.

Popups work when they’re useful, on‑brand, and polite. A well‑timed Squarespace popup can capture email signups, announce promos, or offer help—without hijacking the visit. This guide covers the built‑in promotional popup for quick wins, then an optional on‑click popup for precise control. If your message is simple, an unobtrusive banner might be better—see the alternative in our guide to the Squarespace Announcement Bar.

You’ll get scannable steps, a minimal on‑click script, and practical advice on timing, frequency caps, and deliverability for any Squarespace popup form. If you want to style beyond the defaults, hop over to our Custom CSS for Squarespace guide.

A quick framing: use the built‑in promotional popup for speed; use an on‑click popup when you want a button to open a modal on demand.

Use this for	Why it’s right
Built‑in promotional popup	Fast setup, newsletter popup Squarespace‑style, frequency and device rules
On‑click popup	Open via button/link, any content inside, fully custom look and behavior

Make it easy to say yes is a good test. Clear value, short form, gentle timing.

Overview

Squarespace includes a promotional popup you can turn on in minutes. It’s ideal for a Squarespace email popup or site‑wide promo. You can control delay, frequency, and mobile behavior, and plug in a newsletter form.

If you need a Squarespace popup on click—say, a “Join newsletter” button that opens a modal—you can add a tiny script and matching HTML/CSS. We’ll show a minimal, copy‑ready pattern and where to place it. For downloadable content, you can even show a brochure inside the modal—pair it with our how‑to on embedding PDFs in Squarespace.

Official references while you work:

Squarespace’s Promotional pop‑up guide
Squarespace Code Injection reference
Squarespace Newsletter Block docs
Email authentication for deliverability: Authenticate your domain

Launch on-brand popups instantly with MicroEdits

If you’d rather not touch settings or code, use MicroEdits. It’s a magic website editor for non‑technical users: describe the change in plain English and it happens. Ask for a squarespace popup form with a 2‑second delay on mobile and a bold headline; MicroEdits creates it, styles it to your brand, and applies it instantly.

Edit your existing Squarespace site—no rebuilds.
Set targeting, timing, and on‑click triggers in simple language.
Preview variations, share them, and revert with ease.
Works across platforms if you run multiple sites (Squarespace, Shopify, WordPress, and more).
No copying/pasting—MicroEdits generates the code and applies it directly.

When you’re juggling a sale or a launch, this saves hours. It feels like asking a teammate to “add a newsletter popup” and watching it appear.

enter any Squarespace site

Built-in promotional pop-up

Use this first. It’s the fastest route to a clean, compliant newsletter popup Squarespace users expect.

Open the popup settings
- In your site editor, go to Marketing → Promotional Pop‑Up.
- Turn it on. See Squarespace’s official Promotional pop‑up steps if you don’t see it.
Write clear content
- Keep the headline crisp and benefit‑led.
- Add optional image, description, and a call to action.
Connect your list
- Add a Newsletter Block or connect to Email Campaigns/Mailchimp per the Newsletter Block docs.
- Ask only for essentials (usually email, maybe first name).
Set display rules
- Choose a delay (e.g., 2–5 seconds) or after scroll.
- Use a frequency cap so it doesn’t reappear constantly (e.g., once per visitor or after a number of days).
Target devices
- Decide whether to show on mobile. Often, a later delay on mobile is kinder.
Style and test
- Match brand colors and fonts. For deeper tweaks, see Custom CSS for Squarespace.
- Publish, then test across a few pages and devices.

Tip: If your message is always‑on (e.g., shipping notice), consider the Announcement Bar pattern instead of a modal.

On-click popups

Sometimes you want a Squarespace popup on click—open a modal when a visitor clicks a button or link. Here’s a minimal pattern you can drop onto any page. It keeps markup, style, and behavior small and readable.

Where to put things:

HTML: add in a Code Block on the page (ideally near the bottom).
CSS: Design → Custom CSS (or Page → Advanced → Page Header).
JavaScript: Settings → Advanced → Code Injection → Footer. Paste the snippet as‑is.

Trigger button (place anywhere on your page):

<a href="#promo-popup" class="btn" data-popup="#promo-popup"
  >Join our newsletter</a
>

Popup markup (add once per page where you need it):

<div
  class="me-popup"
  id="promo-popup"
  role="dialog"
  aria-modal="true"
  aria-hidden="true"
>
  <div class="me-popup__overlay" data-close></div>
  <div class="me-popup__window" role="document">
    <button class="me-popup__close" aria-label="Close" data-close>
      &times;
    </button>
    <h3>Get 10% off your first order</h3>
    <div class="me-popup__body">
      <!-- Add a Newsletter Block or an embedded form -->
    </div>
  </div>
</div>

Styles (basic, on-brand friendly):

html.no-scroll,
body.no-scroll {
  overflow: hidden;
}

.me-popup {
  position: fixed;
  inset: 0;
  display: none;
  z-index: 9999;
}
.me-popup.is-open {
  display: block;
}
.me-popup__overlay {
  position: absolute;
  inset: 0;
  background: rgba(0, 0, 0, 0.45);
}
.me-popup__window {
  position: relative;
  margin: 8vh auto 0;
  max-width: 520px;
  background: #fff;
  color: #222;
  border-radius: 10px;
  padding: 24px;
  box-shadow: 0 20px 50px rgba(0, 0, 0, 0.2);
}
.me-popup__close {
  position: absolute;
  top: 8px;
  right: 8px;
  border: 0;
  background: transparent;
  font-size: 28px;
  cursor: pointer;
  line-height: 1;
}
@media (max-width: 640px) {
  .me-popup__window {
    margin: 0;
    min-height: 100vh;
    border-radius: 0;
  }
}

Behavior (open/close, ESC, overlay click):

document.addEventListener("DOMContentLoaded", function () {
  var popup = document.getElementById("promo-popup");
  if (!popup) return;

  function openPopup() {
    popup.classList.add("is-open");
    document.documentElement.classList.add("no-scroll");
    document.body.classList.add("no-scroll");
    popup.setAttribute("aria-hidden", "false");
  }
  function closePopup() {
    popup.classList.remove("is-open");
    document.documentElement.classList.remove("no-scroll");
    document.body.classList.remove("no-scroll");
    popup.setAttribute("aria-hidden", "true");
  }

  document
    .querySelectorAll('[data-popup="#promo-popup"]')
    .forEach(function (el) {
      el.addEventListener("click", function (e) {
        e.preventDefault();
        openPopup();
      });
    });

  popup.addEventListener("click", function (e) {
    if (e.target.matches("[data-close], .me-popup__overlay")) closePopup();
  });

  document.addEventListener("keydown", function (e) {
    if (e.key === "Escape") closePopup();
  });
});

Notes:

Match fonts/colors to your theme. If needed, add refinements via Custom CSS.
To create an exit intent popup Squarespace can support on desktop, you can adapt the behavior to open on mouseout near the top of the viewport. On mobile, prefer delay or scroll triggers instead.

Targeting, timing, and deliverability

Timing that respects attention
- Start with a short delay (2–5s) on desktop; a bit longer on mobile.
- Alternatives to “instant” include on‑scroll (e.g., 35–50%), inactivity timers, or on‑click opens.
- True “exit intent” is desktop‑only. On mobile, use on‑scroll + gentle messaging instead.
Frequency caps to prevent fatigue
- Use the promotional popup’s built‑in frequency so visitors don’t see it on every page.
- Consider “once per visitor” or a multi‑day cool‑down for returning users.
- For custom popups, store a timestamp in localStorage and skip showing again within your chosen window.
Deliverability for a squarespace email popup
- Authenticate your sending domain (SPF/DKIM) in Email Campaigns/Mailchimp per Squarespace’s domain authentication.
- Use double opt‑in, keep fields minimal, and avoid shouty subject lines.
- Set expectations: what they’ll receive and how often.
Mobile UX
- Larger tap targets, easy close, and a layout that never blocks critical content.
- If the popup carries a one‑time coupon, make sure the code is easy to copy and that dismissing it doesn’t feel permanent.

If a persistent promo does the job, the Announcement Bar is a lighter pattern than a modal.

FAQ

Yes, but be thoughtful. Use a longer delay, larger tap targets, and an easy close. The built‑in promotional popup lets you choose whether to show on mobile and set frequency caps. For custom on‑click popups, ensure the modal is full‑width on small screens and the close button is always visible. If the message is evergreen, consider an announcement bar instead.

How do I create multiple popups for different pages?

With the built‑in promotional popup, you get one site‑wide instance with global rules. For multiple popups, use on‑click modals per page or conditionally load different modals with small snippets on specific pages (Page Settings → Advanced → Header/Footer). Keep targeting clear so visitors don’t see multiple prompts in a single session.

Use Marketing → Promotional Pop‑Up with a Newsletter Block. Connect to Email Campaigns or a provider like Mailchimp, set a short delay, and cap frequency. Keep copy concise and ask for only the email address to boost completion rates. If you want it to open from a “Join” button, add the on‑click pattern above to that page.

Yes. In a custom modal, paste the provider’s embed into the modal body via a Code Block. Most embeds render fine in modals. For bookings or scheduling, Calendly widgets work well inside an on‑click popup. Test on mobile for scrolling and keyboard behavior. If the embed is tall, allow the modal to scroll.

Authenticate your domain (SPF/DKIM) with your email provider, use double opt‑in, and keep your from‑name consistent. Write clear, human subject lines and balance text and images. Remove stale subscribers periodically. Squarespace’s Email Campaigns docs include domain authentication and list‑hygiene guidance.

Use the on‑click pattern above: a trigger element with data‑popup=“#promo-popup”, a small modal markup block, CSS to style it, and a short script to open/close. This gives you a precise squarespace popup on click without affecting page load or showing anything automatically. It’s perfect for “Learn more” or “Join” buttons.

The promotional popup doesn’t include exit‑intent. You can approximate it on desktop with a tiny script that listens for the mouse leaving the viewport near the top and then opens your modal. On mobile, exit intent isn’t reliable—use scroll‑based or on‑click triggers instead.

How to Create a Popup in Squarespace