How to Add a Popup to Your Website

Google is the constraint to plan around. Its Search Central guidance says not to cover the whole page with interstitials and suggests small banners instead. So build a popup that is easy to close, appears after some engagement, and never hides the content a visitor arrived from search to read.

Popup triggers compared
TriggerWhen it showsBest for
On loadImmediatelyLegal age gates only
Time delayAfter N secondsNewsletter offers
Scroll depthAfter reading part of the pageContent upgrades
Exit intentMouse heads for the tab bar (desktop)Last-chance discounts
ClickWhen a button is pressedForms, bookings, video

Updated

Popups work because they interrupt, and they annoy for the same reason. A popup that opens when someone clicks 'Get the price list' is welcome. One that covers a recipe two seconds after arriving from Google is the kind of experience Google's guidance warns against.

Add a popup on We.Inc, WordPress, Wix, Squarespace or plain HTML

We.Inc

  1. In the AI chat, describe the popup's job, its trigger and how often it shows, for example 'show a newsletter popup after the visitor scrolls halfway, once per week'.
  2. Ask for a visible close button and a phone layout that covers only part of the screen.
  3. Check it in preview on desktop and phone sizes.
  4. Publish when you are happy with it.

Popups are built by the AI in your site's code rather than through Add-ons, and that uses credits on a paid plan.

WordPress

  1. Go to Plugins > Add Plugin and search for a popup plugin with good reviews and recent updates.
  2. Install and activate it, then create a new popup from its menu.
  3. Set the trigger, which pages it shows on and how often it repeats.
  4. Publish the popup and test it in a private window.

A popup plugin on WordPress.com means being on a paid plan.

Wix

  1. In the Editor, click Add Elements, choose Interactive and pick a design under Popups.
  2. Add your text, form or button inside the popup.
  3. Open Pages & Menu > Popups, select it and click Set Triggers.
  4. Choose automatic display on page load, or link a button to the popup with the Link icon.

Wix cannot trigger a popup when a visitor attempts to leave.

Squarespace

  1. Open the Pages panel, scroll to the bottom and click Marketing Tools, then Promotional Pop-Up.
  2. Choose a layout and write the content and action (newsletter signup or a button).
  3. Set Display and timing, including which pages and how often it reappears.
  4. Switch on the display toggle and save, then test in an incognito window.

Promotional pop-ups are available on the Core, Plus and Advanced plans.

Plain HTML

  1. Add a <dialog> element containing your offer and a close button.
  2. Open it with showModal() after a delay or a scroll position.
  3. Store a flag in localStorage when it is closed so it does not return on every page.

A minimal timed dialog

Opens once after 20 seconds

The form with method dialog closes it without any extra script, and the stored flag stops it reappearing for that visitor.

<dialog id="offer">
  <p>Get our spring price list by email.</p>
  <form method="dialog"><button>Close</button></form>
</dialog>
<script>
  const d = document.getElementById("offer");
  if (!localStorage.getItem("offerSeen")) {
    setTimeout(() => d.showModal(), 20000);
    d.addEventListener("close", () => localStorage.setItem("offerSeen", "1"));
  }
</script>

Sources

Every popup source here was checked on October 28, 2026.

  • Google Search Central on avoiding intrusive interstitials and dialogs: https://developers.google.com/search/docs/appearance/avoid-intrusive-interstitials
  • Squarespace promotional pop-up setup and plans: https://support.squarespace.com/hc/en-us/articles/115008375848-Add-a-promotional-pop-up
  • Wix Editor popups and triggers: https://support.wix.com/en/article/wix-editor-adding-and-setting-up-a-lightbox
  • Wix request page confirming no exit-intent trigger: https://support.wix.com/en/article/wix-editor-request-triggering-a-lightbox-when-a-visitor-attempts-to-leave-your-site

Use the native dialog element

If you code it yourself, the HTML dialog element handles much of the hard work. Calling showModal() puts it above the page, makes the rest of the page inert and lets Escape close it.

Our modal component gallery has accessible dialog designs you can adapt, and the snippet below shows a minimal timed version.

How it works

  1. Write one clear offer with one field or one button.
  2. Choose a trigger that matches the offer, from the table above.
  3. Add an obvious close button and let Escape and clicking outside close it.
  4. Limit frequency so a visitor sees it once, not on every page.
  5. Check on a phone that it takes up only part of the screen.

Tips

  • Exit intent relies on the mouse leaving the window, so it does not exist on phones. Use a scroll or time trigger there instead.
  • Squarespace's frequency setting lets you choose when a dismissed pop-up returns, such as the next day or never.
  • Move focus into the popup when it opens and back to the trigger when it closes, so keyboard and screen reader users are not lost.
  • Measure signups per visitor, not per popup view. A popup that converts 5% of viewers but makes 30% leave is a loss.

Frequently asked questions

Do popups hurt SEO?

Google's guidance says intrusive interstitials and dialogs can make it hard for Google to understand your content and can affect search performance. Small banners and popups triggered by a click are the safer patterns.

Can Wix show a popup when someone tries to leave?

No. Wix's help center lists exit-triggered popups as a feature request that is not currently possible. Wix popups can open on page load or when an element is clicked.

Which popups does Google consider acceptable?

Banners that take up a small fraction of the screen, browser app-install banners, and mandatory interstitials such as age verification, which Google says to overlay on the content rather than redirecting.

Related: Modal components, Call to action examples, Add a cookie banner, Add an announcement bar, Website accessibility checklist.

Start for free or see all free tools. We.Inc is free to start, with no card needed. AI building is on paid plans from $20 a month.

More in Guides

Product

Who It's For

Features

Resources

Company

View Sitemap