Popup and slide-in embeds

Quizably has two extra shortcodes that put a quiz behind a button: a popup (a centered modal) and a slide-in (a small panel in the corner of the screen). Both can also open on their own after a delay, after the visitor scrolls, or when the mouse heads for the browser’s top edge.

Get the shortcode

1. Open the quiz in the builder and publish it.
2. Open the Summary tab.
3. Copy the Popup shortcode or Slide-in shortcode card.
4. Paste it into a page, post or widget that runs shortcodes.

The copied snippet uses the quiz’s numeric ID, for example [quizably_quiz_popup id="123"]. The id can also be the quiz UUID. The quiz must be Published. If the quiz is a draft or archived, or the ID is not found, the shortcode prints nothing.

The two shortcodes

Shortcode	Attributes	Defaults
[quizably_quiz_popup]	id, label, trigger, delay, scroll, once	label is “Take the quiz”
[quizably_quiz_slidein]	id, label, position, trigger, delay, scroll, once	label is “Take quiz”

For the slide-in, position accepts bottom-right or bottom-left. If you leave it out, or give any other value, the button sits in the corner at the end of the line: bottom right on a left-to-right site and bottom left on a right-to-left site. An explicit bottom-left or bottom-right stays exactly as written.

Examples:

[quizably_quiz_popup id="123" label="Find your match"]
[quizably_quiz_slidein id="123" position="bottom-left" trigger="scroll" scroll="60" once="day"]

Triggers

The trigger attribute decides when the popup or slide-in opens by itself.

trigger	Opens	Extra attribute
click (default)	Only when the visitor selects the button	None
delay	After a number of seconds on the page	delay, in seconds. Default 5, from 0 to 600. 5 and 5s both work.
scroll	When the visitor has scrolled a share of the page	scroll, in percent. Default 50, from 1 to 100. 50 and 50% both work.
exit	When the mouse leaves through the top of the window (exit intent)	None

Values outside the range are pulled to the nearest allowed value. A trigger that is not one of the four, such as a typo, falls back to click.

Exit intent needs a mouse or trackpad. On phones and tablets there is nothing to leave with, so exit never fires there and the visitor uses the button instead.

The button is always on the page, whichever trigger you choose, so a visitor can open the quiz later or after closing it.

How often it opens by itself: once

once	Automatic opening is limited to
session (default)	Once per browser session
day	Once every 24 hours
always	Every page load

once only limits automatic opening. Selecting the button always works. Quizably remembers the last automatic opening in the visitor’s browser, per quiz. If the browser blocks storage, such as in some private windows, the limit is ignored and the popup can open again on every page load.

What each one looks like

Popup. A button is placed where you add the shortcode. When it opens, a dimmed overlay covers the screen with a white panel up to 640 pixels wide (90 percent of the screen on narrow screens) and up to 90 percent of the screen height, which scrolls if the quiz is taller. Page scrolling is locked while it is open. Only one popup can be open at a time.

Slide-in. A rounded button is fixed 24 pixels from the bottom and from the side. Opening it shows a panel above the button, 360 pixels wide and up to 520 pixels tall, with a header showing the label and a close button. The page behind stays usable and scrollable.

Closing and accessibility

• Popup: select the x button (accessible name “Close quiz”), click the dimmed area, or press Esc.
• Slide-in: select the close button (accessible name “Close”), select the button again, or press Esc.
• Both are marked up as dialogs, with the button label as the dialog name.
• The popup is modal. Focus moves into it when it opens, Tab stays inside it, and focus goes back to where it was when it closes.
• The slide-in is not modal. When the visitor opens it, focus moves into it. When it opens automatically, Quizably does not take focus away from what the visitor is doing.

Things to know before you use it

• Every page view counts, opened or not. The quiz is loaded into the page when the page loads, even while the popup is closed. Each page view adds one to the quiz’s views and starts an unfinished submission. A popup on a busy page therefore lowers your completion rate in Analytics. Put it only on pages where it earns its place.
• Do not also embed the same quiz inline on that page. The quiz would start two submissions per visit.
• Test automatic triggers in a private window. With once="session" or once="day", a popup you have already seen will not open by itself again, which can look like a bug.
• Cached pages. If you use a caching plugin, clear the cache after you change the shortcode.
• Styling. The trigger button has a fixed look, indigo with white text. The slide-in panel is a fixed 360 pixels wide.

Checklist before you publish

1. The quiz is Published.
2. You tested the button and the automatic trigger on the live page, in a private window and on a phone.
3. The popup shows questions, and you can reach a result.
4. You tested closing with the close button, the outside click and Esc.
5. You cleared any page cache.

Related

• Embed a quiz: block, shortcode and iFrame
• Shortcodes and block reference
• Analytics
• Troubleshooting