--- title: "Hootbox Demo | Smart Popup Builder for YOOtheme Pro" description: "Explore Hootbox with flexible popup triggers, timing, frequency controls, targeting options and fully customizable YOOtheme Pro content." url: "https://www.yoozecase.com/hootbox-demo" date: "2026-09-20T23:59:05+00:00" language: "en-GB" --- Popup in da hoot! # HootBox 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. [ See the layouts ](#layouts) [ Read the questions ](#faq) ### Hoot hoot This is a smart popup. It opened by itself, five seconds after the page finished loading, and it will leave you alone for the rest of your visit. [Show me the layouts](#layouts) ### Popup Pong! Highscores Footer Pong ## Ten ways to place it 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. [ Centred modal ](#hb-lay-center) [ Top bar ](#hb-lay-top) [ Corner panel ](#hb-lay-corner) [ Side panel ](#hb-lay-side) [ Full screen ](#hb-lay-full) ### Centred modal The classic. It sits in the middle, the page behind it is dimmed and cannot scroll, and clicking outside closes it. Use it when the visitor really has to answer something. ### Top bar A slim bar above the content. Nothing is covered, nothing is blocked, and the visitor can read on while it is there. ### Corner panel A small panel in one of the four corners. Friendly, easy to ignore, and the right size for a hint or a small offer. ### Side panel A full height panel that slides in from the left or the right. Room enough for a form, a menu, or a longer story. ### Full screen The welcome mat. It fills the screen, so keep it short and make the way out obvious. Layouts ## One header, six moods 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. [ Info ](#hb-al-info) [ Success ](#hb-al-success) [ Warning ](#hb-al-warning) [ Error ](#hb-al-error) [ Brand ](#hb-al-brand) ### Info Neutral news. A change in opening hours, a new page, a small announcement. ### Success Something went well. A form was sent, an order came through, a file was saved. ### Warning Something needs attention before it becomes a problem. Maintenance tonight, a deadline tomorrow. ### Error Something is wrong and the visitor has to know. Keep the wording plain and say what to do next. ### Brand Your own primary colour, for offers and campaigns that should look like you and not like a system message. Alert header ## Anything you can build, in a popup 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. [ Open the newsletter example ](#hb-content) Notification### Once a month, nothing more This is a normal builder column inside the popup. A headline, a paragraph and a button, all placed the way you always place them. Swap them for a form and you have a newsletter box. [ Sign me up ](#) [ Maybe later ](#) Content ## Six ways to open it 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. ### You scrolled past halfway This one waited until you were 55 percent down the page. A visitor who reads that far is a lot more interesting than one who just arrived. ### Leaving already? Exit intent: the mouse moved up towards the browser bar. On a phone HootBox watches for a quick scroll up instead, so the idea also works on touch. Triggers ## Set it now, forget it later 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. [ Open the scheduled example ](#hb-schedule) ### Open until 17:00 on weekdays This is what a scheduled bar looks like. In a real campaign it would carry a start date, an end date, the weekdays it runs on, and the hours of the day it is allowed to show. Schedule ## How often, and for how long 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. [ Auto close with a countdown ](#hb-autoclose) [ Do not show again ](#hb-dismiss) ### Closing in a moment Closes automatically after 8 secondsThis one closes itself after eight seconds. The bar underneath is the countdown, and it pauses as long as your mouse or keyboard focus is on the popup. ### Do not show this again Tick the box and this popup stays away for a year, whatever the frequency setting says. Give the visitor the last word and they mind the next one a lot less. Do not show this again Behaviour ## Only where it belongs 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. [ Open the targeting example ](#hb-targeting) ### Made for one audience A welcome offer for guests, a service message for logged in customers, a phone only bar for people on the move, a campaign popup that only appears when the address carries your newsletter parameter. Same element, different audience. Targeting ## Popups that do not cost you rankings 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. Google safe ## Frequently asked questions ### Do I need to write any code? 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. ### Will a smart popup hurt my Google ranking? 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. ### Can a visitor always close it? 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. ### How does HootBox remember that someone closed it? 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. ### Can I open a popup from my own link or button? 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. ### Does it work on WordPress as well? 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. ### Contents No settings match your search. ## HootBox YOOtheme Pro 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. ### What's new #### 0.9.11 (2026-09-09) ##### Fixed - Adding content inside a HootBox now works from the builder interface. The Content tab opens with a Builder section, exactly like the Sublayout element of YOOtheme: click New Layout to put a row in the popup, click the + in that row to add any element, or pick a ready-made layout from the Library. The element was already declared as a sublayout container, but the panel field that opens the nested builder was missing, so the plus below HootBox in the layout tree could only add a neighbour. Popups built earlier keep working: the renderer accepts rows as well as single elements as children. ##### Changed - The hint in an empty popup, the note on the Content tab and the descriptions of Alert header and Message now describe the real route (New Layout under Builder, then the + in the row), in all six languages; WordPress translations regenerated. #### 0.9.10 (2026-09-08) ##### Changed - The element icon is now #B13DD2. ##### Known issue (resolved in 0.9.11) - Adding an element inside a HootBox does not work from the builder interface. The plus below the element in the builder panel adds an element NEXT to the popup, not inside it, so the instruction in the panel is wrong. The layout format and the renderer handle children correctly; it is the builder interface that offers no way in. Under investigation. #### 0.9.9 (2026-09-08) ##### Added - Preview as popup. While editing, the popup sits inline in the page so you can build its content. The badge above it now has a button that opens the popup the way visitors see it: overlay, animation, position, phone layout. Close it and everything is back inline. A preview never counts as a view, so a popup set to "once per visitor" still shows on the live site. - A screen reader is told when a popup closes by itself. A modal popup carries the sentence in its description, a bar or corner panel announces it once through the live region. The ticking countdown itself stays hidden from screen readers. ##### Fixed - Headings placed inside the popup were invisible on themes with light headings (dark sites): white on a white card, contrast 1:1. Headings inside the popup now take the colour of the card, unless they carry an explicit colour class of their own. - The settings panel had seven tabs. At the default panel width they wrapped to a second line and "Advanced" fell over the first group title. There are six tabs now: the schedule (period, recurring) lives under Triggers, because a schedule is about when the popup opens. ##### Changed - Finding the popup content. The content is a sublayout: hover over HootBox in the builder panel and click the + that appears below it, or drag an element onto it. That is now said in three places: the hint in the empty popup, the first group of the Content tab, and the descriptions of Alert header and Message. The hint is also easier to read (contrast 4.6:1 instead of 2.8:1). - The element icon is now 30 by 30 in the element library and 20 by 20 in the page builder, the same sizes YOOtheme uses for its own elements, in the HootBox colour #ac0b0a. It was 24 by 24 in an orange that another YOOzeCase product already uses. - The badge above the inline popup is visible on dark sections too (its border follows the text colour), and the badge only appears while editing, not when "Always inline" is used on a live test page. - Three new front-end strings (preview button, content hint, auto-close sentence) in all six languages, WordPress translations regenerated. #### 0.9.8 (2026-09-08) ##### Fixed - Weekdays and the daily time window fell back to the visitor's own clock on sites whose time zone is set as a UTC offset instead of a city. WordPress reports such a site as "+02:00", which the browser's Intl does not accept as a time zone. The offset now travels with the popup as a number of minutes, so the window is still judged by the clock of the site. A fixed offset has no daylight saving, so it stays correct on a cached page as well. #### 0.9.7 (2026-09-08) ##### Fixed - Weekdays and the daily time window were decided on the server only. On a site with page caching the popup kept showing outside its window, and on a page that was cached outside the window it never came back. Those two settings recur, so the popup now stays in the page and the browser checks them again in the time zone of the site, daylight saving included. The from and to dates still decide on the server: that boundary is crossed once, and the popup should not be in the page before it starts. A click on a trigger link respects the window too. - Bars and corner panels without an overlay deliberately do not take the keyboard focus, so a screen reader never noticed them. They now carry the role of a region named after the title, and their text is announced once through a live region. Centred modals are unchanged: they take focus and announce themselves that way. ##### Changed - The element icon in the builder is now the HootBox owl, an original drawing in the same stroke style as the other icons. Recorded in NOTICE.txt. - WordPress: the eight front-end strings now ship as real translations (Dutch, German, French, Spanish, Italian) instead of English only. They are generated from the Joomla language files with scripts/build-wp-languages.py, so both platforms always say the same thing. ### Plugin settings #### Basic ##### yc\_state [\#](#yc-manual-yc-manual-settings-basic-yc-state) Where to find it Plugin settings › Basic › yc\_state This setting has no help text in the plugin. Type `ychootboxstatus` Default Not set **About** HootBox adds a popup element to the YOOtheme Pro builder. No configuration needed here; add a HootBox to any page in the builder. #### Licence ##### Licence key [\#](#yc-manual-yc-manual-settings-licence-license-key) Where 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. Type `ychootboxlicense` Default Not set ### HootBox #### Content ##### content [\#](#yc-manual-yc-manual-element-yc-hootbox-content-content) Where to find it YOOtheme builder › HootBox › Content › content This setting has no help text in the plugin. Type `builder-fragment` Default Not set #### Advanced ##### In the editor [\#](#yc-manual-yc-manual-element-yc-hootbox-advanced-preview-mode) Where 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. Type `select` Default `Inline in the editor, popup on the site` Options - Inline in the editor, popup on the site `auto` - Always inline `inline` - Always popup `popup` ##### custom\_css [\#](#yc-manual-yc-manual-element-yc-hootbox-advanced-custom-css) Where 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; }. Type `textarea` Default Not set #### HootBox ##### Popup content [\#](#yc-manual-yc-manual-element-yc-hootbox-2-content-help) Where 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. Type `note` Default Not set ##### Popup ID [\#](#yc-manual-yc-manual-element-yc-hootbox-2-hb-id) Where 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. Type `text` Default Not set ##### Alert header [\#](#yc-manual-yc-manual-element-yc-hootbox-2-alert-enable) Where 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. Type `checkbox` Default `1` ##### Type [\#](#yc-manual-yc-manual-element-yc-hootbox-2-alert-type) 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. Type `select` Default `Info` Options - Info `info` - Success `success` - Warning `warning` - Error `danger` - Brand (primary colour) `brand` - Plain (no colour) `plain` ##### Icon [\#](#yc-manual-yc-manual-element-yc-hootbox-2-alert-icon) Where 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. Type `select` Default `Match the type` Options - Match the type `auto` - None `none` - Info `info` - Check `check` - Warning `warning` - Error `error` - Bell `bell` - Megaphone `megaphone` - Clock `clock` - Gift `gift` - Cookie `cookie` - Own image `image` ##### Icon image [\#](#yc-manual-yc-manual-element-yc-hootbox-2-alert-icon-image) Where 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. Type `image` Default Not set ##### Title [\#](#yc-manual-yc-manual-element-yc-hootbox-2-title) Where 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. Type `text` Default Not set ##### Message [\#](#yc-manual-yc-manual-element-yc-hootbox-2-message) Where 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). Type `editor` Default Not set ##### Primary button [\#](#yc-manual-yc-manual-element-yc-hootbox-2-btn1-text) Where 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. Type `text` Default Not set ##### Link [\#](#yc-manual-yc-manual-element-yc-hootbox-2-btn1-link) Where 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. Type `link` Default Not set ##### New tab [\#](#yc-manual-yc-manual-element-yc-hootbox-2-btn1-target) Where 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. Type `checkbox` Default `0` ##### Action [\#](#yc-manual-yc-manual-element-yc-hootbox-2-btn1-action) Where to find it YOOtheme builder › HootBox › Action Remember: the popup stays hidden after the click, just like closing it. Type `select` Default `Follow the link` Options - Follow the link `link` - Close the popup `close` - Follow the link and remember `link_remember` ##### Style [\#](#yc-manual-yc-manual-element-yc-hootbox-2-btn1-style) Where 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. Type `select` Default `Primary` Options - Primary `primary` - Default `default` - Secondary `secondary` - Danger `danger` - Text `text` - Link `link` ##### Secondary button [\#](#yc-manual-yc-manual-element-yc-hootbox-2-btn2-text) Where 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. Type `text` Default Not set ##### Link [\#](#yc-manual-yc-manual-element-yc-hootbox-2-btn2-link) Where 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. Type `link` Default Not set ##### New tab [\#](#yc-manual-yc-manual-element-yc-hootbox-2-btn2-target) Where 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. Type `checkbox` Default `0` ##### Action [\#](#yc-manual-yc-manual-element-yc-hootbox-2-btn2-action) 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. Type `select` Default `Close the popup` Options - Follow the link `link` - Close the popup `close` - Follow the link and remember `link_remember` ##### Style [\#](#yc-manual-yc-manual-element-yc-hootbox-2-btn2-style) Where 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. Type `select` Default `Default` Options - Primary `primary` - Default `default` - Secondary `secondary` - Danger `danger` - Text `text` - Link `link` ##### Do not show again [\#](#yc-manual-yc-manual-element-yc-hootbox-2-dismiss-checkbox) Where 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. Type `checkbox` Default `0` ##### Checkbox label [\#](#yc-manual-yc-manual-element-yc-hootbox-2-dismiss-label) 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. Type `text` Default Not set ##### Layout [\#](#yc-manual-yc-manual-element-yc-hootbox-2-layout) Where 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. Type `select` Default `Centered modal` Options - Centered modal `center` - Top bar `top` - Bottom bar `bottom` - Top left `top-left` - Top right `top-right` - Bottom left `bottom-left` - Bottom right `bottom-right` - Side panel left `left` - Side panel right `right` - Full screen `fullscreen` ##### Width (px) [\#](#yc-manual-yc-manual-element-yc-hootbox-2-width) Where to find it YOOtheme builder › HootBox › Width (px) Maximum width of the popup. It never exceeds the screen width minus the margin. Type `number` Default `560` ##### Margin (px) [\#](#yc-manual-yc-manual-element-yc-hootbox-2-margin) 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. Type `number` Default `24` ##### Padding [\#](#yc-manual-yc-manual-element-yc-hootbox-2-padding) 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. Type `select` Default `Default` Options - None `none` - Small `small` - Default `default` - Large `large` ##### Style [\#](#yc-manual-yc-manual-element-yc-hootbox-2-card-style) Where to find it YOOtheme builder › HootBox › Style Uses the card styles of your theme, so the popup matches the site. Type `select` Default `Default` Options - Default `default` - Primary `primary` - Secondary `secondary` - Muted `muted` - Custom colours `custom` ##### Background colour [\#](#yc-manual-yc-manual-element-yc-hootbox-2-bg-color) Where 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). Type `text` Default Not set ##### Text colour [\#](#yc-manual-yc-manual-element-yc-hootbox-2-text-color) Where 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. Type `text` Default Not set ##### Corner radius (px) [\#](#yc-manual-yc-manual-element-yc-hootbox-2-radius) Where 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. Type `number` Default `8` ##### Shadow [\#](#yc-manual-yc-manual-element-yc-hootbox-2-shadow) 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. Type `select` Default `Large` Options - None `none` - Small `small` - Medium `medium` - Large `large` ##### Close button [\#](#yc-manual-yc-manual-element-yc-hootbox-2-close-button) Where 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. Type `checkbox` Default `1` ##### Close button position [\#](#yc-manual-yc-manual-element-yc-hootbox-2-close-position) 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. Type `select` Default `Inside the popup` Options - Inside the popup `inside` - Outside, top right `outside` ##### Show close button after (s) [\#](#yc-manual-yc-manual-element-yc-hootbox-2-close-delay) Where 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. Type `number` Default `0` ##### Overlay [\#](#yc-manual-yc-manual-element-yc-hootbox-2-overlay) 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. Type `checkbox` Default `1` ##### Overlay colour [\#](#yc-manual-yc-manual-element-yc-hootbox-2-overlay-color) 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. Type `text` Default Not set ##### Blur [\#](#yc-manual-yc-manual-element-yc-hootbox-2-overlay-blur) Where 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. Type `checkbox` Default `0` ##### Page scroll [\#](#yc-manual-yc-manual-element-yc-hootbox-2-block-scroll) 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. Type `checkbox` Default `1` ##### Close on overlay click [\#](#yc-manual-yc-manual-element-yc-hootbox-2-overlay-close) 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. Type `checkbox` Default `1` ##### Animation in [\#](#yc-manual-yc-manual-element-yc-hootbox-2-anim-in) 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. Type `select` Default `Scale up` Options - Fade `fade` - Scale up `scale` - Slide from top `slide-top` - Slide from bottom `slide-bottom` - Slide from left `slide-left` - Slide from right `slide-right` - None `none` ##### Animation out [\#](#yc-manual-yc-manual-element-yc-hootbox-2-anim-out) Where 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. Type `select` Default `Reverse of the in animation` Options - Reverse of the in animation `auto` - Fade `fade` - Scale down `scale` - Slide to top `slide-top` - Slide to bottom `slide-bottom` - Slide to left `slide-left` - Slide to right `slide-right` - None `none` ##### Duration (ms) [\#](#yc-manual-yc-manual-element-yc-hootbox-2-anim-duration) Where to find it YOOtheme builder › HootBox › Duration (ms) Visitors who prefer reduced motion get no animation regardless. Type `number` Default `300` ##### On page load [\#](#yc-manual-yc-manual-element-yc-hootbox-2-trigger-load) 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. Type `checkbox` Default `1` ##### Delay (s) [\#](#yc-manual-yc-manual-element-yc-hootbox-2-delay) 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. Type `number` Default `3` ##### On scroll [\#](#yc-manual-yc-manual-element-yc-hootbox-2-trigger-scroll) 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. Type `checkbox` Default `0` ##### Scroll depth (%) [\#](#yc-manual-yc-manual-element-yc-hootbox-2-scroll-pct) 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. Type `number` Default `30` ##### When an element comes into view [\#](#yc-manual-yc-manual-element-yc-hootbox-2-trigger-element) 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. Type `text` Default Not set ##### Exit intent [\#](#yc-manual-yc-manual-element-yc-hootbox-2-trigger-exit) Where 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. Type `checkbox` Default `0` ##### Exit intent on phones [\#](#yc-manual-yc-manual-element-yc-hootbox-2-exit-mobile) 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. Type `checkbox` Default `1` ##### Inactivity [\#](#yc-manual-yc-manual-element-yc-hootbox-2-trigger-idle) 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. Type `checkbox` Default `0` ##### Idle time (s) [\#](#yc-manual-yc-manual-element-yc-hootbox-2-idle-sec) 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. Type `number` Default `30` ##### On click [\#](#yc-manual-yc-manual-element-yc-hootbox-2-trigger-click) 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. Type `text` Default Not set ##### Show from [\#](#yc-manual-yc-manual-element-yc-hootbox-2-date-from) Where 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. Type `text` Default Not set ##### Show until [\#](#yc-manual-yc-manual-element-yc-hootbox-2-date-to) Where 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. Type `text` Default Not set ##### Weekdays [\#](#yc-manual-yc-manual-element-yc-hootbox-2-weekdays) Where to find it YOOtheme builder › HootBox › Weekdays Comma separated, Monday = 1 to Sunday = 7. Empty means every day. Type `text` Default Not set ##### Daily from [\#](#yc-manual-yc-manual-element-yc-hootbox-2-time-from) Where 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. Type `text` Default Not set ##### Daily until [\#](#yc-manual-yc-manual-element-yc-hootbox-2-time-to) Where 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. Type `text` Default Not set ##### Frequency [\#](#yc-manual-yc-manual-element-yc-hootbox-2-frequency) Where 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. Type `select` Default `Once per browser session` Options - Every page load `always` - Once per browser session `session` - Once per visitor `once` - Again after a while `after` ##### Show again after [\#](#yc-manual-yc-manual-element-yc-hootbox-2-repeat-value) Where 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. Type `number` Default `7` ##### Unit [\#](#yc-manual-yc-manual-element-yc-hootbox-2-repeat-unit) 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. Type `select` Default `Days` Options - Minutes `minutes` - Hours `hours` - Days `days` ##### Count a view when [\#](#yc-manual-yc-manual-element-yc-hootbox-2-remember-on) Where 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. Type `select` Default `The popup is closed` Options - The popup is closed `close` - The popup is opened `open` - A button is clicked `action` ##### Maximum views per visitor [\#](#yc-manual-yc-manual-element-yc-hootbox-2-max-shows) Where 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. Type `number` Default `0` ##### Close automatically after (s) [\#](#yc-manual-yc-manual-element-yc-hootbox-2-auto-close) 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. Type `number` Default `0` ##### Countdown [\#](#yc-manual-yc-manual-element-yc-hootbox-2-countdown) 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. Type `select` Default `Progress bar` Options - Progress bar `bar` - Seconds `number` - Bar and seconds `both` - Hidden `none` ##### Pause [\#](#yc-manual-yc-manual-element-yc-hootbox-2-pause-hover) Where 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. Type `checkbox` Default `1` ##### Escape key [\#](#yc-manual-yc-manual-element-yc-hootbox-2-esc-close) 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. Type `checkbox` Default `1` ##### Priority [\#](#yc-manual-yc-manual-element-yc-hootbox-2-priority) Where to find it YOOtheme builder › HootBox › Priority When several popups want to open at the same moment, the highest number wins. Type `number` Default `5` ##### One at a time [\#](#yc-manual-yc-manual-element-yc-hootbox-2-exclusive) 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. Type `checkbox` Default `1` ##### Show to [\#](#yc-manual-yc-manual-element-yc-hootbox-2-audience) 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. Type `select` Default `Everyone` Options - Everyone `all` - Guests only `guests` - Logged-in users only `users` ##### Devices [\#](#yc-manual-yc-manual-element-yc-hootbox-2-devices) Where 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. Type `select` Default `All devices` Options - All devices `all` - Phones and tablets only (below 960 px) `mobile` - Desktop only (960 px and up) `desktop` ##### On phones [\#](#yc-manual-yc-manual-element-yc-hootbox-2-mobile-layout) Where to find it YOOtheme builder › HootBox › On phones Below 640 px. A bottom bar respects the Google guideline against intrusive interstitials on mobile. Type `select` Default `Same layout` Options - Same layout `same` - Bottom bar `bottom` - Full screen `fullscreen` - Do not show `hidden` ##### Language [\#](#yc-manual-yc-manual-element-yc-hootbox-2-language) Where to find it YOOtheme builder › HootBox › Language Only show on pages in this language, for example nl-NL or de. Empty = every language. Type `text` Default Not set ##### URL parameter [\#](#yc-manual-yc-manual-element-yc-hootbox-2-url-param) Where 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). Type `text` Default Not set ##### Referrer contains [\#](#yc-manual-yc-manual-element-yc-hootbox-2-referrer) Where 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. Type `text` Default Not set ## Schema ```json { "@context": "https://schema.org", "@type": "BreadcrumbList", "itemListElement": [ { "@type": "ListItem", "position": 1, "name": "Home", "item": "https://www.yoozecase.com" }, { "@type": "ListItem", "position": 2, "name": "HootBox Demo", "item": "https://www.yoozecase.com/hootbox-demo" } ] } ```