--- title: "Element Visibility Trigger - EngageBox" description: "The \"Element Visibility\" Trigger fires when specified element(s) enter the viewport after scrolling down. If the specified scroll depth is visible in" url: "https://www.tassos.gr/docs/engagebox/triggers/element-visibility" date: "2026-05-01T22:25:59+00:00" language: "en-GB" --- [ Home ](https://www.tassos.gr/index.php?option=com_content&view=category&layout=blog&id=24&Itemid=1088) / [ EngageBox ](https://www.tassos.gr/index.php?option=com_content&view=category&id=35) / [ Triggers ](https://www.tassos.gr/index.php?option=com_content&view=category&id=50) # Element Visibility Trigger Element Visibility Trigger is available in Pro Unlock this and dozens of other powerful features by upgrading to EngageBox Pro. [ Unlock this feature ](https://www.tassos.gr/joomla-extensions/engagebox/subscribe) The "Element Visibility" Trigger fires when specified element(s) enter the viewport after scrolling down. If the specified scroll depth is visible in the viewport when the page loads, the trigger will fire without a scroll occurring. Below you can find how to set up a popup with the "Element Visibility" trigger, all supported settings for this trigger explained as well as how to trigger it with the JavaScript Events API. ## [How to create a popup that appears when an element becomes visible in Joomla](#how-to-create-element-visibility-popup-in-joomla) To set up your popup to trigger on *Element Visibility* go to your popup settings > Behavior Tab > Trigger Section and apply the following settings: - Under the *Trigger* setting, select **Element Visibility**. - Set the *Trigger Element* by specifying the ID or the Class of the element(s) that should fire this trigger. You can specify multiple elements separated by comma. - Set the percentage of the triggered element that must be visible in order for the trigger to fire, in the *Min Percent Visible* setting. - Set whether to close the popup when the triggered element is outside the viewport in the *Close Outside Viewport* setting. - Set whether to fire the trigger once or unlimited times on the *Firing Frequency* setting. - Lastly, set the delay of the trigger by entering a number in milliseconds in the *Delay* setting [![engagebox trigger on element visibility settings](https://www.tassos.gr/images/2025/09/engagebox-trigger-element-visibility.png)](https://www.tassos.gr/images/2025/09/engagebox-trigger-element-visibility.png) ## [Trigger Settings](#trigger-settings) Below you can find all settings that are configurable when you choose the "Element Visibility" Trigger. | Setting | Value | Description | |---|---|---| | Trigger | Element Visibility | Fires when the specified element enters the viewport after scrolling down. | | Trigger Element | .item-1, .item-2 | Specify the ID or the Class of the element(s) that should fire this trigger. You can specify multiple elements separated by comma. Example 1: .item-100, .item-101 Example 2: #logo Keep in mind that query selectors must always begin with an underscore (\_), a hyphen (-), or a letter(a–z), followed by any number of hyphens, underscores, letters, or numbers. | | Min Percent Visible | 0 | Specify how much of the selected element must be visible on screen before the trigger fires. A value of 25 means that the trigger will fire when 25% of the element is visible while a value of 100 will fire the trigger when the element becomes fully (100%) visible. | | Close Outside Viewport | Disabled | Automatically close the popup when it is outside of the viewport. It respects the Minimum Percent Visible option. | | Firing Frequency | Once Per Page | Configure the fire frequency of this trigger per page. **Once Per Page**: The trigger will fire only once per page. **Unlimited**: The trigger will fire whenever the event occurs on the page. | | Delay | 0 | Delay trigger in miliseconds. Leave 0 for immediate execution or enter 2000 for 2 seconds delay. If the trigger point is set to onElementHover then this value is used to delay or prevent the accidental firing of the popup and attempts to determine the user's intent. It is recommended to use at least 30 ms. | ## [Use Cases](#use-cases) ### [Open popup once the user has started scrolling over a specific element on your page](#open-popup-once-the-user-has-started-scrolling-over-a-specific-element-on-your-page) A use case for this would be when you have a specific element on your page that you want to display the popup only when your users scroll on your page and find the element you specified on your popup settings which will trigger the popup to appear. As your user keep scrolling, the popup can also be closed automatically. ### [Open popup once the user has scrolled over a specific element on your page](#open-popup-once-the-user-has-scrolled-over-a-specific-element-on-your-page) This use case works the same as the one above but requires the element to be fully visible to your user before the popup can appear. ### [Open popup when the page loads and user is viewing a specific element](#open-popup-when-the-page-loads-and-user-is-viewing-a-specific-element) The "Element Visibility" trigger also displays a popup when you load a page and you are viewing the specified element without trigger a scroll. This will display the popup as soon as the page finishes loading. ## [Frequently Asked Questions](#faq) ### [How to Trigger using JavaScript](#trigger-using-javascript) Using the JavaScript Events API v2, you can configure any popup to be triggered using the "Element Visibility" Trigger. Below you can find a JavaScript snippet: ``` EngageBox.onReady(function() { // Get box instance const box = EngageBox.getInstance(5); box.bindTrigger('onElementVisibility', { trigger_selector: '.myButton', threshold: 0.8 // 80% percent, close_out_viewport: true }); }); ``` You can read more on the JavaScript Events API documentation, [Element Visibility Trigger](https://www.tassos.gr/joomla-extensions/engagebox/docs/engagebox-javascript-api-2#onElementVisibility). Element Visibility Trigger is available in Pro Unlock this and dozens of other powerful features by upgrading to EngageBox Pro. [ Unlock this feature ](https://www.tassos.gr/joomla-extensions/engagebox/subscribe) Last updated on Sep 9th 2025 14:09 ## Schema ```json { "@context": "https://schema.org", "@type": "BreadcrumbList", "itemListElement": [ { "@type": "ListItem", "position": 1, "name": "Home", "item": "https://www.tassos.gr" }, { "@type": "ListItem", "position": 2, "name": "Home", "item": "https://www.tassos.gr/docs" }, { "@type": "ListItem", "position": 3, "name": "EngageBox", "item": "https://www.tassos.gr/docs/engagebox" }, { "@type": "ListItem", "position": 4, "name": "Triggers", "item": "https://www.tassos.gr/docs/engagebox/triggers" }, { "@type": "ListItem", "position": 5, "name": "Element Visibility Trigger", "item": "https://www.tassos.gr/docs/engagebox/triggers/element-visibility" } ] } ``` ```json { "@context": "https://schema.org", "@type": "Article", "mainEntityOfPage": { "@type": "WebPage", "@id": "https://www.tassos.gr/docs/engagebox/triggers/element-visibility" }, "headline": "Element Visibility Trigger", "image": { "@type": "ImageObject", "url": "https://www.tassos.gr/" }, "publisher": { "@type": "Organization", "name": "Tassos", "logo": { "@type": "ImageObject", "url": "https://www.tassos.gr/https://www.tassos.gr/media/brand/logo-text.png" } }, "author": { "@type": "Person", "name": "Stergos Zamagias", "url": "https://www.tassos.gr/docs/engagebox/triggers/element-visibility" }, "datePublished": "2020-05-16T12:23:33+03:00", "dateCreated": "2020-05-23T11:17:54+03:00", "dateModified": "2025-09-09T14:21:47+03:00" } ```