Description
HootBox is the smart popup element for YOOtheme Pro. You build the popup in the builder like any other section, with text, images, video, a form or a module inside it, and then you decide the part that actually matters: when it appears, how often, and who gets to see it.
A popup does not have to be a box in the middle of the screen. Pick 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 full screen welcome mat. Ten placements in total, each one using the card styles of your theme, so it matches the rest of the site without a line of extra CSS.
Timing is where a smart popup earns its keep. Open on page load after a delay, 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. Give it a start and an end date, weekdays and a daily time window, and the Christmas banner disappears on the twenty sixth without anyone logging in.
Then decide how often. Every page load, once per session, once per visitor, or again after a number of days. Cap the number of views, choose whether a view counts on open, on close or only after a button click, and add a do not show again checkbox for the people who mean it. All of it is stored in the browser of the visitor: no cookies, nothing sent to a server, nothing to declare in a privacy statement.
Show it to guests only or to logged in users only, limit it to phones or desktops, give phones a bottom bar instead of a blocking modal, and match the language of the page, a campaign parameter in the address or the site the visitor came from.
Built to keep you out of trouble: the defaults follow Google's guidance on intrusive interstitials, a blocking popup is a real dialog with focus handling and an Escape route, and visitors who ask their system for less motion get no animation at all.
One element, one licence, the same behaviour on Joomla and on WordPress.
Feature request
What is the next feature for this plugin?
Submit your idea or vote on existing ones.
Top voted
Changelog
v0.9.11
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.
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.
v0.9.10
Changed
- The element icon is now #B13DD2.
- 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.
v0.9.9
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.
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.
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.
v0.9.8
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.
v0.9.7
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.
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.
v0.9.6
Changed
- Inline help. Every setting of the HootBox element now carries a full description in the builder: what it does on the site, what each option does, the default and why, when to change it, and the pitfalls. 48 settings were empty or too short; 73 of the 78 settings are now documented. The remaining five are the standard Advanced fields of YOOtheme Pro itself. This text is also the source for the user manual, so the manual can be written without inventing anything.
v0.9.5
Fixed
- The popup title was invisible on themes that give headings the same colour as the card background. On a white card the contrast was 1:1. The title now takes the text colour of the popup itself.
- Visitors could see the builder hint "Put any element in here: text, images, forms, buttons, video." A popup without content of its own showed that line on the live site. The hint now only appears in the builder.
- The popup stopped halfway through its opening animation and stayed at 90 percent of its size. Everything inside it shrank along, so the close button measured 40 by 40 pixels instead of the 44 by 44 tap target. Two causes: the card style of the theme overruled the popup transition, and the opening animation could stay stuck on its first frame. Both are handled now, so the popup always reaches its full size.
v0.9.4
Changed
- Inline help for "When an element comes into view" and "Escape key" updated to the new behaviour.
Fixed
- A popup that is hidden on the current device (phone layout "Do not show", or desktop-only on a phone) could still be opened by a link, a data attribute or a click selector. The dialog opened invisibly as a modal and froze the page. Manual opens now respect the device rules and fire a yc-hb:blocked event instead.
- Bars, corner panels and the phone bottom bar (popups without an overlay) were clipped or misplaced inside a section with overflow hidden or a transform. The popup wrapper now moves to the end of body on the live site, so every layout is positioned against the screen.
- "When an element comes into view" never fired on elements taller than about four screens (the observer required 25 percent visibility). It now fires when the element is one fifth into the screen and observes every element the selector matches.
- "Maximum views per visitor" had no effect with frequency "Every page load". The counter is now kept whenever a maximum is set.
- The Escape key now also closes bars and corner panels (popups without an overlay); only the topmost open popup reacts.
- When a manually opened popup replaced an automatic one, the page scroll was unblocked while the new popup was still open.
- Queue: when the next popup in line was no longer allowed, the ones behind it were skipped.
- Countdown pause listeners were bound again on every open; they are now cleaned up on close.
- Accessibility: the dialog name (aria-labelledby) pointed to nothing when the alert header was off but a title was filled in.
Security
- Joomla: the license_status AJAX task now requires the same administrator permission as activate and deactivate. It returned the instance id and expiry date to anyone.
v0.9.3
Fixed
- Joomla 5.4: the plugin configuration page gave a 500. Joomla 5.4 added a public render() method to FormField and the licence field declared a private one; renamed to buildLicenseField(); renderField() is also a public FormField method, so the name must not collide with anything in FormField. Compile errors like this cannot be caught, so the try/catch guard did not help.
v0.9.2
Fixed
- Joomla: stylesheet and script were not loaded on the front end or in the customizer (the relative HTMLHelper path resolved to nothing). Assets now load through the WebAssetManager with an absolute media URL, the same route Epic Slider uses.