Popup in da hoot!
The smart popup element for YOOtheme Pro. Place any content, then decide when it appears, how often, and who sees it.
Ten placements, six triggers, a schedule and per visitor frequency, on Joomla and WordPress. Everything on this page is live: the examples below are real smart popups on this page, not screenshots.
A popup does not have to be a box in the middle of the screen. Pick the placement that fits the message: a centred dialog when you need an answer, a bar for an announcement, a corner panel for a quiet hint, a side panel for a form or a menu, full screen for a welcome mat. Every placement uses the card styles of your theme, so it matches the rest of the site without extra CSS.
Each popup can open with an alert header: an icon, a title, a short message and up to two buttons. Choose the tone and HootBox picks the colour and a matching icon, or pick your own icon from the list, or upload your own image. Everything under the header is yours to fill with builder elements.
The popup is a container in the builder. Drop in whatever you need: text, an image, a video, a gallery, a form from your form component, a module, or dynamic content from your own data. The alert header is optional; switch it off and the popup is nothing but your own layout.
A smart popup is mostly about timing. HootBox opens on page load after a delay you set, at a scroll depth, when a chosen element comes into view, on exit intent, after a period of inactivity, or on a click on any link or button you point at. Combine as many as you like; the first one that happens wins.
Two of them are running on this page right now. Scroll past the middle of the page and a corner panel appears. Move your mouse up towards the address bar and an exit popup shows up. Both only once per visit.
Give a popup a start and an end date and it takes care of itself. Add weekdays and a daily time window and it only shows during opening hours, or only on the weekend. The Christmas banner disappears on the twenty sixth without anyone logging in.
Nothing turns a visitor away faster than the same box on every page. Choose every page load, once per browser session, once per visitor, or again after a number of minutes, hours or days. Set a maximum number of views, decide whether a view counts when the popup opens, when it closes or only after a button click, and add a do not show again checkbox for the people who mean it.
All of that is stored in the browser of the visitor. No cookies, nothing sent to a server, nothing to put in a privacy statement.
Show a popup to guests only, or to logged in users only. Limit it to phones or to desktops, and give phones a different placement so a modal becomes a bottom bar. Match the language of the page, an address that carries a campaign parameter, or a visitor who arrived from a particular site. Everything the visitor does not fit is simply never rendered.
Google penalises pages that cover their content with a dialog right after a visitor arrives from a search result on a phone. HootBox is built around that rule. The delay on the page load trigger starts at a value that keeps you on the safe side, phones can be given a bottom bar instead of a blocking modal, and the close button is a proper tap target from the first second.
The same care goes into the parts you cannot see. A blocking popup is a real dialog: focus moves into it, stays inside while it is open and returns to the button that opened it. Escape closes it, the close button meets the minimum tap size, status is never carried by colour alone, and a visitor who asked their system for less motion gets no animation at all.
No. HootBox is a builder element. You drop it into a section, fill the alert header or build your own layout inside it, and set the triggers and the schedule in the element settings. Every field has its own explanation next to it.
Only if you build it badly. Google penalises dialogs that cover the content of a page right after a visitor arrives from a search result on a phone. The defaults in HootBox steer you away from that: a delay on the page load trigger, a bottom bar instead of a modal on phones, and a close button that is visible and large enough from the start.
Yes. There is a close button, the Escape key works, and a click outside the popup closes it. You can switch the last two off for a dialog that really needs an answer, but the close button and the keyboard route stay.
In the browser of the visitor. No cookies, nothing sent to a server, nothing to declare in a privacy statement. Change the popup identifier and everyone sees it again, which is exactly what you want for a new campaign.
Yes. Any link that points at the popup identifier opens it, and so does any element carrying the HootBox open attribute. You can also give the element a list of your own CSS selectors. The buttons on this page work exactly that way.
Yes. The same element, the same settings and the same behaviour on Joomla and on WordPress, as long as YOOtheme Pro is running. One licence covers both.
No settings match your search.
This manual documents HootBox YOOtheme Pro, version 0.9.11.
The smart popup element for YOOtheme Pro. Place any content, then decide when it appears, how often, and who sees it.
Where to find it Plugin settings › Basic › yc_state
This setting has no help text in the plugin.
ychootboxstatusWhere to find it Plugin settings › Licence › Licence key
Enter the key from your YOOzeCase account and press Activate. The key ties this site to your subscription and keeps updates coming. Deactivate frees the slot so you can use the key on another site.
ychootboxlicenseWhere to find it YOOtheme builder › HootBox › Content › content
This setting has no help text in the plugin.
builder-fragmentWhere to find it YOOtheme builder › HootBox › Advanced › In the editor
Automatic shows the popup inline while you edit and as a real popup on the live site; the Preview as popup button above the inline popup opens it the way visitors see it. Choose Always inline to style it on a test page; switch back before the page goes live.
selectInline in the editor, popup on the site
autoinlinepopupWhere to find it YOOtheme builder › HootBox › Advanced › custom_css
Custom CSS for this popup only. Selectors are scoped automatically. Start a rule with & to target the popup box itself, for example & { border: 2px solid gold; }.
textareaWhere to find it YOOtheme builder › HootBox › Popup content
The popup content is a sublayout, built with ordinary builder elements. Under Builder at the top of this tab, click New Layout: that puts a row in the popup. Click the + in the row to add any element: text, images, forms, buttons, video. Library offers ready-made layouts. Everything you add shows up inside the popup in the preview. The alert header (below) is the optional coloured strip above that content. Use Preview as popup to see the result as visitors will.
noteWhere to find it YOOtheme builder › HootBox › Popup ID
A short name for this popup, for example summer-sale. Used to remember that a visitor closed it, and to open it from a link: href="#hb-summer-sale". Change the ID to show the popup again to everyone.
textWhere to find it YOOtheme builder › HootBox › Alert header
The alert header is the coloured strip at the top of the popup, with an icon, a title and a short message. Switch it off for a popup you fill entirely with your own builder elements (added under Builder at the top of this tab). On by default, because it gives most popups their heading and their colour.
checkbox1
Where to find it YOOtheme builder › HootBox › Type
Colour and default icon of the alert header. Info is neutral, Success green, Warning amber, Error red, Brand uses the primary colour of your theme, and Plain leaves the header without a background so it blends into the card. The colours come from your theme, so the popup matches the rest of the site.
selectInfo
infosuccesswarningdangerbrandplainWhere to find it YOOtheme builder › HootBox › Icon
The icon in front of the title. Match the type picks the icon that belongs to the alert type and stays correct when you change that type later, which is why it is the default. None leaves the space empty and moves the title to the left; the other choices pin one specific icon or your own image.
selectMatch the type
autononeinfocheckwarningerrorbellmegaphoneclockgiftcookieimageWhere to find it YOOtheme builder › HootBox › Icon image
Your own icon instead of one of the built-in ones. It is shown at 48 x 48 px, so use a square SVG or PNG. Only used when Icon is set to Own image.
imageWhere to find it YOOtheme builder › HootBox › Title
The heading of the popup, shown in the alert header. It is also the name a screen reader announces when the popup opens, so keep it short and say what the popup is about. Leave it empty and the popup announces a generic label instead.
textWhere to find it YOOtheme builder › HootBox › Message
Short text under the title, inside the alert header. This is not the popup content: for that, use Builder at the top of this tab (New Layout, then the + in the row) to add any element (text, images, forms, buttons, video).
editorWhere to find it YOOtheme builder › HootBox › Primary button
The text on the primary button, for example Show me or Get the discount. Leave it empty and no button appears. Buttons sit under the content and carry the main action of the popup.
textWhere to find it YOOtheme builder › HootBox › Link
Where the button takes the visitor. Pick a page, an article or a file from your site, or type a full URL for an external page. Leave it empty and the button only closes the popup.
linkWhere to find it YOOtheme builder › HootBox › New tab
Opens the link in a new browser tab, so your page stays open behind it. Off by default, because a new tab is unexpected for a link inside your own site. Switch it on for another website or for a PDF.
checkbox0
Where to find it YOOtheme builder › HootBox › Action
Remember: the popup stays hidden after the click, just like closing it.
selectFollow the link
linkcloselink_rememberWhere to find it YOOtheme builder › HootBox › Style
The look of the button, taken from the button styles of your theme. Primary is the accented style and the default for the main action; Default and Secondary are quieter, Danger is the red style for destructive actions, and Text and Link render the button as plain text.
selectPrimary
primarydefaultsecondarydangertextlinkWhere to find it YOOtheme builder › HootBox › Secondary button
The text on the second button, for example No thanks. Leave it empty and only the primary button appears. Use it for the way out, so the visitor always has a clear alternative to the main action.
textWhere to find it YOOtheme builder › HootBox › Link
Where the second button takes the visitor. Hidden when the action is Close the popup, because that button does not go anywhere.
linkWhere to find it YOOtheme builder › HootBox › New tab
Opens the link in a new browser tab, so your page stays open behind it. Off by default. Switch it on for another website or for a PDF.
checkbox0
Where to find it YOOtheme builder › HootBox › Action
What the button does. Follow the link opens the link and leaves the popup rules untouched, Close the popup only closes it, and Follow the link and remember opens the link and keeps the popup hidden afterwards, exactly as closing it would. Close the popup is the default, because the second button is usually the way out.
selectClose the popup
linkcloselink_rememberWhere to find it YOOtheme builder › HootBox › Style
The look of the button, taken from the button styles of your theme. Default is the quiet style and the default here, so the second button does not compete with the primary one.
selectDefault
primarydefaultsecondarydangertextlinkWhere to find it YOOtheme builder › HootBox › Do not show again
Adds a checkbox. When ticked, the popup stays hidden for this visitor for a year, whatever the frequency setting says.
checkbox0
Where to find it YOOtheme builder › HootBox › Checkbox label
The text next to the checkbox. Leave it empty for the built-in text, which is already translated into the language of the site. Change it only when you need different wording, for example a legal one.
textWhere to find it YOOtheme builder › HootBox › Layout
Centered modal, a bar along the top or bottom, a small panel in a corner, a side panel, or full screen.
selectCentered modal
centertopbottomtop-lefttop-rightbottom-leftbottom-rightleftrightfullscreenWhere to find it YOOtheme builder › HootBox › Width (px)
Maximum width of the popup. It never exceeds the screen width minus the margin.
number560
Where to find it YOOtheme builder › HootBox › Margin (px)
Distance between the popup and the edge of the screen, for corner panels, side panels and bars. 24 px by default, which keeps the popup clear of the edge without wasting space. The centered modal and full screen ignore it, which is why the field is greyed out for those layouts.
number24
Where to find it YOOtheme builder › HootBox › Padding
The white space between the edge of the popup and its content. Default suits most popups, Small tightens a bar or a small corner panel, Large gives a big modal more air, and None removes the padding completely for a popup filled with an image that has to run to the edge.
selectDefault
nonesmalldefaultlargeWhere to find it YOOtheme builder › HootBox › Style
Uses the card styles of your theme, so the popup matches the site.
selectDefault
defaultprimarysecondarymutedcustomWhere to find it YOOtheme builder › HootBox › Background colour
The background colour of the popup, as a hex value or an rgba value. Only used when Style is set to Custom colours. Use rgba when the page should shine through, for example rgba(20,20,20,.95).
textWhere to find it YOOtheme builder › HootBox › Text colour
The colour of the text inside the popup, including the title. Only used when Style is set to Custom colours. Always check it against your background colour: light text on a light card is unreadable, and screen contrast is a real accessibility requirement.
textWhere to find it YOOtheme builder › HootBox › Corner radius (px)
How round the corners of the popup are, in pixels. 8 px by default, which matches the cards of most themes. Set it to 0 for square corners.
number8
Where to find it YOOtheme builder › HootBox › Shadow
The drop shadow under the popup, which lifts it off the page. Large by default, because a popup should read as a layer above the page. Use a smaller shadow, or none, for a bar that is meant to sit flat against the edge of the screen.
selectLarge
nonesmallmediumlargeWhere to find it YOOtheme builder › HootBox › Close button
The X in the corner of the popup. On by default, and worth leaving on: a popup the visitor cannot close is the fastest way to lose them, and Google penalises it on phones. Switch it off only when one of your own buttons already closes the popup.
checkbox1
Where to find it YOOtheme builder › HootBox › Close button position
Where the X sits. Inside the popup is the default and always works. Outside, top right places it just above the popup, which looks cleaner on a popup filled with an image but needs free space around the popup, so avoid it on bars and on full screen.
selectInside the popup
insideoutsideWhere to find it YOOtheme builder › HootBox › Show close button after (s)
Delay before the X appears. Keep this 0 for popups that visitors did not ask for; a hidden close button annoys people and Google penalises it on mobile.
number0
Where to find it YOOtheme builder › HootBox › Overlay
Darkens the page behind the popup, so the popup gets full attention and the rest of the page cannot be clicked. On by default for modals and panels. Bars along the top or bottom never get an overlay, which is why the field is greyed out for those layouts.
checkbox1
Where to find it YOOtheme builder › HootBox › Overlay colour
The colour of the darkened layer behind the popup, as an rgba value. Leave it empty for the built-in rgba(0,0,0,.6). Lower the last number for a lighter overlay, raise it to hide the page almost completely.
textWhere to find it YOOtheme builder › HootBox › Blur
Blurs the page behind the overlay on top of darkening it. Off by default, because the blur costs performance on older phones. Use it when the page behind the popup is busy and pulls attention away from the message.
checkbox0
Where to find it YOOtheme builder › HootBox › Page scroll
Stops the page behind the popup from scrolling while it is open, so the visitor cannot scroll away from the message by accident. On by default. Switch it off if a long popup on a phone no longer scrolls properly itself.
checkbox1
Where to find it YOOtheme builder › HootBox › Close on overlay click
Clicking the darkened area closes the popup. On by default, because visitors expect it and it is the quickest way out. Switch it off only for a popup that really needs an explicit choice, and then keep the close button on.
checkbox1
Where to find it YOOtheme builder › HootBox › Animation in
How the popup appears. Scale up is the default and works for every layout; slide from top or bottom suits bars, slide from left or right suits side panels, Fade is the quietest and None shows the popup at once. Visitors whose system asks for reduced motion always get the popup without animation.
selectScale up
fadescaleslide-topslide-bottomslide-leftslide-rightnoneWhere to find it YOOtheme builder › HootBox › Animation out
How the popup disappears. Reverse of the in animation is the default and mirrors the opening, which is what visitors expect. Pick a specific animation only when the popup should leave in a different direction than it came from.
selectReverse of the in animation
autofadescaleslide-topslide-bottomslide-leftslide-rightnoneWhere to find it YOOtheme builder › HootBox › Duration (ms)
Visitors who prefer reduced motion get no animation regardless.
number300
Where to find it YOOtheme builder › HootBox › On page load
Opens the popup by itself once the page has loaded, after the delay you set below. On by default, because most popups are meant to be seen without the visitor doing anything. Switch it off when the popup should only open on a click, a scroll or one of the other triggers.
checkbox1
Where to find it YOOtheme builder › HootBox › Delay (s)
Wait this long after the page loads. On phones, Google penalises blocking popups that appear right after arriving from a search result; 5 seconds or more, or a bar layout, keeps you safe.
number3
Where to find it YOOtheme builder › HootBox › On scroll
Opens the popup once the visitor has scrolled a part of the page, so they have seen something of your content first. Off by default. It usually performs better than a popup on load, because it only reaches visitors who are actually reading.
checkbox0
Where to find it YOOtheme builder › HootBox › Scroll depth (%)
How far down the page the visitor has to be before the popup opens, as a percentage of the whole page. 30 percent by default. Between 40 and 60 percent works well for long articles; below 10 percent the popup fires almost immediately and loses its point.
number30
Where to find it YOOtheme builder › HootBox › When an element comes into view
CSS selector, for example #pricing, footer or .uk-section:nth-child(3). Opens as soon as the top of that element is one fifth into the screen; with several matches the first one in view wins. Tip: give a section an ID under Advanced in the builder and use #that-id here.
textWhere to find it YOOtheme builder › HootBox › Exit intent
Opens the popup when the mouse moves up out of the page towards the browser bar, which usually means the visitor is about to leave. Off by default. Use it for a last offer, and pick a frequency other than every page load so it does not come back on the next page.
checkbox0
Where to find it YOOtheme builder › HootBox › Exit intent on phones
Touch screens have no mouse, so exit intent uses a substitute there: a quick swipe up after the visitor has scrolled down. On by default. Switch it off when the popup should only appear on desktop.
checkbox1
Where to find it YOOtheme builder › HootBox › Inactivity
Opens the popup when the visitor has not moved the mouse, scrolled, typed or touched the screen for a while. Off by default. It suits an offer of help; it suits an interrupting offer much less, because the visitor may simply be reading.
checkbox0
Where to find it YOOtheme builder › HootBox › Idle time (s)
How long the visitor has to be inactive before the popup opens, in seconds. 30 seconds by default. Under 15 seconds it fires while someone is still reading, and over two minutes most visitors have already gone.
number30
Where to find it YOOtheme builder › HootBox › On click
Extra CSS selectors (comma separated) that open the popup when clicked. Links with href="#hb-{Popup ID}" and elements with data-yc-hb-open="{Popup ID}" always work, no selector needed.
textWhere to find it YOOtheme builder › HootBox › Show from
YYYY-MM-DD or YYYY-MM-DD HH:MM, in the time zone of the site. Leave empty for no start.
textWhere to find it YOOtheme builder › HootBox › Show until
The last moment the popup is shown, in the time zone of the site. A date without a time runs until the end of that day. Leave it empty and the popup has no end date.
textWhere to find it YOOtheme builder › HootBox › Weekdays
Comma separated, Monday = 1 to Sunday = 7. Empty means every day.
textWhere to find it YOOtheme builder › HootBox › Daily from
HH:MM. Combine with Daily until for a daily window, for example 09:00 to 17:00. May cross midnight.
textWhere to find it YOOtheme builder › HootBox › Daily until
The end of the daily time window, in 24 hour notation. It only takes effect together with Daily from, and it limits the popup to a part of the day, for example your opening hours. An end that is earlier than the start makes the window run across midnight, so 22:00 until 06:00 is a night window.
textWhere to find it YOOtheme builder › HootBox › Frequency
How often a visitor sees this popup. Stored in the browser of the visitor; no cookies, nothing sent to a server.
selectOnce per browser session
alwayssessiononceafterWhere to find it YOOtheme builder › HootBox › Show again after
How long the popup stays hidden before the same visitor sees it again, counted from the moment they closed it or clicked a button. Only used when the frequency is set to Show again after.
number7
Where to find it YOOtheme builder › HootBox › Unit
The unit of the waiting time above. Days is the default and suits most offers; use minutes or hours only for a notice that really has to come back within the same visit.
selectDays
minuteshoursdaysWhere to find it YOOtheme builder › HootBox › Count a view when
Closed: only when the visitor closes it (a reload while it is open shows it again). Opened: as soon as it appears. Button: only after a button click.
selectThe popup is closed
closeopenactionWhere to find it YOOtheme builder › HootBox › Maximum views per visitor
The highest number of times one visitor ever sees this popup, whatever the frequency allows. 0 means no limit and is the default. Two or three is a sensible value for an offer that should not keep nagging returning visitors.
number0
Where to find it YOOtheme builder › HootBox › Close automatically after (s)
Closes the popup by itself after this many seconds. 0 keeps it open until the visitor closes it, and that is the default. Use at least eight seconds, because anything shorter is gone before the message has been read.
number0
Where to find it YOOtheme builder › HootBox › Countdown
Shows the visitor how much time is left before the popup closes itself. Progress bar is the default and the least distracting, Seconds shows a number, Bar and seconds shows both, and Hidden closes the popup without warning. Only used when Close automatically after is set.
selectProgress bar
barnumberbothnoneWhere to find it YOOtheme builder › HootBox › Pause
Stops the countdown while the mouse is over the popup or the keyboard focus is inside it, so the popup cannot disappear while someone is reading or filling in a field. On by default; switching it off makes the popup considerably harder to use.
checkbox1
Where to find it YOOtheme builder › HootBox › Escape key
Works for every layout, also bars and corner panels. Browsers protect visitors: when a popup with an overlay opened without the visitor clicking anything, Chrome still lets Escape close it whatever this setting says. Turn it off only for popups opened by a click.
checkbox1
Where to find it YOOtheme builder › HootBox › Priority
When several popups want to open at the same moment, the highest number wins.
number5
Where to find it YOOtheme builder › HootBox › One at a time
Makes this popup wait while another popup is open instead of stacking on top of it. On by default and worth keeping on: stacked popups block each other and confuse screen readers. As soon as the other popup closes, this one opens.
checkbox1
Where to find it YOOtheme builder › HootBox › Show to
Limits the popup to a part of your visitors. Everyone is the default, Guests only hides it from people who are logged in and suits a subscribe or register offer, and Logged-in users only suits a message for members. The choice is made on the server, so a hidden popup is not even in the page.
selectEveryone
allguestsusersWhere to find it YOOtheme builder › HootBox › Devices
Limits the popup to a screen size. All devices is the default; Phones and tablets only shows it below 960 pixels wide and Desktop only from 960 pixels up. Use it for a popup that only makes sense on one of the two, an app download for example.
selectAll devices
allmobiledesktopWhere to find it YOOtheme builder › HootBox › On phones
Below 640 px. A bottom bar respects the Google guideline against intrusive interstitials on mobile.
selectSame layout
samebottomfullscreenhiddenWhere to find it YOOtheme builder › HootBox › Language
Only show on pages in this language, for example nl-NL or de. Empty = every language.
textWhere to find it YOOtheme builder › HootBox › URL parameter
Only show when the address contains this parameter, for example utm_source=newsletter or promo (any value).
textWhere to find it YOOtheme builder › HootBox › Referrer contains
Only show when the visitor arrived from an address containing this text, for example google or facebook.com.
textWe use cookies and similar technologies to improve your experience on our website. Read our Privacy Policy.