Modals, split offers, full-screen launches, corner slide-ins, bars, drawers and video lightboxes. Open them with a click, a delay, a scroll, an exit, a quiet minute or a link from your email, and choose how often each one shows and to whom. Every colour, size and word is a field.
Demo 1
A top bar in push mode. Three seconds after the page loads it slides in above the header and moves the page down once, so nothing is covered. It has no overlay and does not take focus, so you can keep reading with it open. Close it and it stays closed until the next page view.
Opens by itself 3 seconds after load.
Demo 2
A centred modal with an image on top, an email field and a No thanks link. On a computer it opens when the pointer leaves through the top of the window. On a phone it opens on a fast scroll back up. It shows once per visit and three times in total, and never again after you subscribe. On a phone it becomes a sheet from the bottom of the screen.
Also opens when you move the pointer out of the top of the window, once per visit.
Demo 3
A split popup, image on the left. The code copies with one click and the countdown runs to the end of the offer. It opens when a new visitor has read 30% of the page, or straight away when the page is opened with ?offer=autumn in the address, the way a link in an email or an ad would open it. It shows once every seven days.
Also opens at 30% scroll, for new visitors, once a week.
Demo 4
A video lightbox. The poster below is an ordinary image on the page. The popup listens for clicks on anything matching .demo-webinar-card, so the poster opens it, and so does the link in this sentence. The player grows out of whatever you clicked and stops the sound when it closes.
Click only. This popup never opens by itself.
Demo 5
The popup draws its own button. It sits wherever you drop the module, in the button style you choose, and opens a split popup with the image on the right and a form. This one uses the default colours: nothing in the Style tab has been changed. Once someone sends the form, the popup stops opening for them by itself. On a phone it opens as a sheet.
No automatic trigger. The button is the module's own.
Demo 6
A side drawer from the right, opened by an outline button with a count on it. The header and footer stay put while the body scrolls, so a long changelog still reads well. The entries are one rich text field: headings, paragraphs, images and a tag before each heading.
No automatic trigger.
Demo 7
A slide-in from the bottom-right corner. It opens once this section scrolls into view, and the page stays usable around it: no overlay, no locked scroll, and focus stays where you are. On a phone it docks along the bottom edge. It stops opening by itself once a question has been sent.
Opens by itself when this section comes into view, once per visit.
Demo 8
A full-screen takeover for a launch day. It opens from a link to #orla-two, which works from anywhere on the page, from another page, or from an email. The text comes in line by line, and the close button names itself and the Esc key.
Click or link only. A full-screen popup that opens by itself is hard to forgive.
Demo 9
A bottom bar with an email field built in. It opens after 20 seconds without a scroll, click or key press, or after 90 seconds on the page, whichever comes first. It opens by itself on computers only. A phone gets the button, because a bar with a keyboard over it leaves little room to read. It shows at most twice.
Opens by itself after 20 seconds idle, on a computer.
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.
| Layout | What it is for |
|---|---|
| Centred modal | An offer, a sign-up or a notice in the middle of the screen, with an optional image on top |
| Split | Image on one side, content on the other. Left or right |
| Full-screen takeover | A launch or an announcement that owns the screen, image beside, below or behind the text |
| Corner slide-in | A small panel in any corner. The page stays usable around it |
| Top bar | A line of news across the top. It can sit over the page or push it down |
| Bottom bar | The same along the bottom edge, with room for a code, a countdown, a button or one form field |
| Side drawer | A tall panel from the left or right, with a header and footer that stay put |
| Video lightbox | YouTube, Vimeo, HubSpot video or an MP4 file over a dark overlay |
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.
Switch on as many as you like. The first one to fire opens the popup, and the rest wait for the next page view.
#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.?popup=your-popup-id, or a parameter of your own such as ?offer=spring, so an email or an ad can open it.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.
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.
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.
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.
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.
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.
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.
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().
Every colour, size, radius, shadow and duration is on the Style tab, in this order: Typography, Colours, Overlay, Popup box, one group for the chosen layout, Phones, Close button, Buttons, Form, Coupon, Countdown, the No thanks link, the Trigger button, Motion and Layering. The accent colour, the fonts and the link colour follow your theme until you change them. 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.
# plus the Popup ID, and “Open from links to #popup-id” must be on.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, Orla and Ledgerline 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. to see them fire again.