Popup & Modal Pro

What it is

One module that is one popup. Drop it anywhere in a drag-and-drop area and it shows where you put it only as an optional button; the popup itself opens over the page when one of its triggers fires. Put several on a page, or in a global group on every page, and they share one queue, so a visitor only ever sees one at a time.

Set it up

1. Drop it in. Drag Popup & Modal Pro into a drag-and-drop area on a site page, landing page or blog template. Published with no edits, it already works: a Get 15% off button where it sits, and a centred offer with a code that opens eight seconds after the page loads, once per visit.
2. Popup ID. Under Popup, give it a short name of its own, such as spring-offer. Links to #spring-offer open it, and visitors' counts are kept under it. Every popup on the site needs its own.
3. Layout. Still under Popup. Pick it early: it decides which of the other fields appear.
4. Content. The eyebrow, heading and text, and an icon, image or video. Then something to act on: a form, up to two buttons, or a coupon with an optional countdown.
5. When it opens. Under Triggers, clicks and links are on already, and so is the eight-second delay. Switch the delay off for a popup that should only open when asked.
6. How often. Frequency and targeting sets how often the automatic triggers may open it, on which devices and for which visitors.
7. Trigger button. Keep it where the module sits, float it in a corner, or switch it off when your own links open the popup.
8. Style. Set Colours → Accent first, then the group for your layout, then work down the Style tab.

The popup shows open in the page editor, so you see every change as you make it. To test the automatic triggers after publishing, use a private window: once it has shown, it remembers.

Layouts

On phones the modal, the split and the drawer can become a sheet from the bottom of the screen that the visitor can drag down to close, stay as they are, or fill the screen. The breakpoint is a field.

Triggers

Switch on as many as you like. The first one to fire opens the popup, and the rest wait for the next page view.

• Click. Any link on the page to #your-popup-id, any element matching a CSS selector you enter (such as .open-offer), and the module's own button. A link from another page to /page#your-popup-id opens it on arrival.
• Delay. Seconds after the page loads.
• Time spent reading. Seconds counted only while the tab is in view and the visitor has moved, scrolled or typed in the last half minute.
• Scroll. A percentage of the page, or the moment an element you name reaches the middle of the screen.
• Exit intent. On a computer, the pointer leaving through the top of the window. On a phone, a fast scroll back up after reading a quarter of the page. It waits a few seconds after load so it never fires on someone who has only just arrived.
• Inactivity. Seconds without a scroll, click, tap or key press.
• Web address. ?popup=your-popup-id, or a parameter of your own such as ?offer=spring, so an email or an ad can open it.

How often, and to whom

These rules apply to the automatic triggers. A click or a link always opens the popup, whatever the limits say, because the visitor asked for it.

• Show automatically on every page view, once per visit, once every few days, or once ever.
• Stop after a number of showings, and stop after a conversion: a form sent, a button marked as a conversion, or the code copied.
• Only from the second or third page view of a visit, or not before a number of seconds into the visit.
• Desktop and tablet only, or phones only.
• First-time visitors only, or returning visitors only.
• Wait until HubSpot's cookie banner has been answered.

Counts are kept in the visitor's browser under the Popup ID, so the same popup placed on many pages shares its counts. Give every popup on your site its own ID. No cookies are set.

Content

From top to bottom: an icon, an image or a video; an eyebrow with an optional icon; the heading; rich text; a countdown; a coupon code with a Copy button; a HubSpot form; up to two buttons; small print; a “Don't show this again” checkbox; and a No thanks link. Each part shows only when it has something in it. A button can go to a link, close the popup or copy the code. The slide-in can show up to three sets of initials and a status line above the heading.

The countdown runs to a date and time, or to a number of hours after each visitor first sees the popup. When it reaches zero it can hide itself, show an “offer ended” line, or stop the popup opening by itself.

Forms

Pick any HubSpot form. Forms from the legacy form editor render inside the popup and take its styling: labels, fields, errors, the submit button and the consent text all follow the Form group on the Style tab. Forms from the new form editor render in HubSpot's own frame, which a page's styles cannot reach, so they keep the look set in the form editor.

After a submit the popup can stay open or close after a few seconds. The thank-you can be the form's own message or redirect, or a heading and text of your own with a tick. A coupon can stay hidden until the form is sent.

Closing and accessibility

A close button, the Esc key, a click on the overlay, a No thanks link, a “Don't show this again” checkbox, or closing by itself after some seconds, paused while the pointer is over it or focus is inside it. Esc always works.

Modal layouts use the browser's own dialog: the page behind is out of reach for the keyboard and screen readers, Tab stays inside, the page does not scroll, and focus returns to whatever opened the popup. Slide-ins and bars leave the page usable and do not take focus when they open by themselves; screen readers hear the heading once. Visitors who ask their device for reduced motion get a quick fade and no autoplaying video.

One at a time

Only one popup is ever on screen. When a second one's trigger fires while another is open, it waits in a queue ordered by each popup's Priority and opens shortly after the first one closes, if its rules still allow it. A click on another popup's link closes the open one and opens the new one straight away. On this page the top bar counts too: close it and the others can arrive.

In the page editor

The popup renders in place, open, inside a dashed frame, so you can click into every field. A line above it names the layout, the triggers and the frequency. Nothing opens by itself in the editor, nothing covers it and the page never stops scrolling. Notes appear there, and only there, when something needs attention: nothing to show, a video that is missing, a button without a link, a click selector that is not valid, or a Popup ID used twice on the page.

Tracking

With the dataLayer switch on, the module pushes an event when a popup shows, converts and closes, for Google Tag Manager to pick up. The event names are fields.

window.dataLayer.push({
  event: 'popup_show',        // popup_convert, popup_close
  popup_id: 'linen-offer',
  popup_layout: 'split',
  popup_trigger: 'scroll',    // hash, selector, button, url, delay, engaged, exit, inactivity, api
  popup_method: 'esc',        // on close: button, esc, overlay, auto, dismiss_link, button_close, after_submit, replaced
  popup_conversion: 'form'    // on convert: form, button, coupon_copy
});

The same details go out as popupmodalpro:show, popupmodalpro:convert and popupmodalpro:close events on the document. A developer can open and close popups with PopupModalPro.open('linen-offer') and PopupModalPro.close().

Style

Every colour, size, spacing, border, radius, shadow and duration is a field on the Style tab, in this order: Typography, Eyebrow, Colours, Overlay, Popup box, a group for each layout, Phones, Close button, Esc key, Buttons, Form, Coupon, Countdown, the No thanks link, the Trigger button, Motion, Layering and the page editor preview. Many fields start empty and follow another value, such as small buttons following the button height; each one's note says what it follows. The accent colour, the fonts and the link colour follow your theme until you change them.

Every word the module prints that isn't your content, such as Copy, Copied, the countdown units and the close button's name for screen readers, is under Content → Words, so the popup can be translated in full. A word you clear is left out. With the grow setting on, a popup opened by a click grows out of the button or link that opened it and shrinks back into it.

Troubleshooting

• It does not open by itself. It has probably used up its frequency: open the page in a private window, or clear the site's data. Check the device and visitor rules, and whether another popup is open and holding the queue.
• My form looks different from the popup. It was built in the new form editor, which HubSpot renders in its own frame. Use a form from the legacy editor for fields that match the popup.
• The top bar covers my header. Set the bar to push the page. A header that is fixed to the top of the screen stays under the bar either way; use the bottom bar or a slide-in there.
• Nothing appears at all, not even the button. The popup has nothing in it. Add a heading, text, a coupon, a form or a button. In the video layout, paste the address of the video's own page.
• It opened once and never again, even in a new tab. Once every few days and Once, ever are stored per browser, not per tab. A private window clears it.
• A Style change does nothing on the live page. Republish the page and give HubSpot's cache a minute.
• The CSS selector does nothing. The page editor warns when it is not valid CSS. If it is, check that it matches something: in the browser console, document.querySelectorAll('.your-selector').length should be more than 0.
• The popup can't be closed on a phone. The close button, No thanks and clicking outside are all off, and a phone has no Esc key. Turn at least one back on. The page editor warns about this.
• A #link does nothing. The link must be exactly # plus the Popup ID, and “Open from links to #popup-id” must be on.

Notes on this page

Every demo above is an instance of the module on the same container as its text. Foundry Row, Halden, Hollis & Pine, Planyard, Brightwork, Flagpost, Kestrel, Marram, Ledgerline, Alder & Finch, Corvid Audio, Fernhill Candle Co., Tallyhouse and Loma Pilates are made up for the demo, and so are their pictures. The forms are real HubSpot forms on this site. The webinar video is a public tutorial on YouTube standing in for a recorded session. No CSS on this page touches the module.

The automatic triggers remember that you have seen them. Reset the demo to see them fire again.