Canvas Docs

Popups

A popup is a dialog that appears over the page: a newsletter invitation, an announcement, a login form. In Canvas each popup is a record composed from blocks, with its behaviour, display rules and design set on the record itself, so building one is the same editing you do everywhere else. The one decision that shapes everything after it is how the popup opens: on its own, or when a link is clicked. Popups are a premium feature and render only while a license is active.

How To Create A Popup

Starting screenthe WordPress admin menu, Popups.

Choose Add New, compose the dialog's contents in the editor, and open the Popup Settings box beneath it. Turn on Enable this popup, because a popup renders nowhere until it is explicitly enabled, and publishing alone is not enough. Then choose How it opens:

  • Automatically opens the popup on its own. Open delay (ms) holds it back for a moment, and Open after scrolling (px) holds it until the visitor has scrolled that far, which is the difference between an interruption and an invitation: a popup after 800 pixels of reading is addressing someone who is engaged.
  • When a link is clicked keeps it closed until a link opens it, which is the right mode for login boxes, video dialogs and anything the visitor asks for.

For a link triggered popup, set a Link anchor: a stable name of your choosing, without the #. Any link whose address is that anchor (as #your-anchor) and which carries the attribute data-lightbox="inline" (added through a block's Custom Attributes, one line, data-lightbox=inline) opens the popup. A menu item can be the trigger too: set the item's Open in Lightbox to Inline under Appearance > Menus, with the anchor as its URL. Set the anchor yourself rather than leaving it empty, because the fallback is the popup's own id, and that id changes when the popup is imported into another site, breaking every link written against it.

Display, Frequency And Design

The rest of the settings box covers where the popup appears, how often, and how it looks. Show on scopes it to the entire site, the front page, or a list of specific pages. Show only once (cookie) remembers visitors who have already seen it, with Cookie expiry (days) deciding how long the memory lasts; use it on every marketing popup, because the second uninvited appearance is where goodwill goes to die. The Design section styles the dialog and its overlay without CSS.

The full settings list:

  • Enable this popup

  • How it opens

    Automatically opens the popup on its own. From a link keeps it closed until a link pointing at its anchor is clicked.

  • Link anchor

    The anchor a link opens this popup with, without the #. Give the link this address and the attribute data-lightbox="inline". Leave empty to use the popup's own id, which changes when the popup is imported.

  • Open delay (ms)

    Delay before the popup opens, in milliseconds.

  • Open after scrolling (px)

    Hold the popup back until the visitor has scrolled this far down the page. 0 = open on the delay alone.

  • Auto-close after (ms)

    Automatically close after this many milliseconds. 0 = never.

  • Open animation

  • Close animation

  • Close on backdrop click

  • Show close button

  • Show only once (cookie)

    Remember when this popup has been shown so it does not reappear.

  • Cookie expiry (days)

    How long to remember, in days.

  • Cookie path

  • Show on

  • Page / Post IDs

    Comma-separated IDs. Used when "Show on" is set to "Specific pages".

  • Max width

    These design tokens reuse Canvas / Bootstrap defaults. Leave blank to use the theme default.

  • Background

  • Border radius

  • Padding

  • Overlay color

  • Overlay opacity

    A value between 0 and 1. Blank uses the theme default.

Pitfalls

Popup problems are almost always one of these five:

  • The popup never opens. Enable this popup is off. It is off by default, precisely so a half built popup cannot leak onto the live site.
  • The delay and scroll settings have disappeared. The popup is in link mode. Open delay (ms) and Open after scrolling (px) belong to Automatically, and hide when a link is the trigger, because the click is the timing.
  • Cookie expiry seems ignored. The cookie settings act only while Show only once (cookie) is on; without it no cookie is set and there is nothing to expire.
  • Your trigger link stopped working after a site import. The Link anchor was empty, so links were written against the popup's internal id, which the import changed. Give the popup a named anchor and point the links at that.
  • It opens once and never again while you are testing. Your own Show only once cookie is doing its job. Test in a private window, or turn the cookie off until the popup is final.

For a panel that slides in beside the page instead of over it, see Side Panels. Menu items as triggers are covered in Menus And Navigation, and the record's reference is Popups.

Was this page helpful?