Nelio Popups makes it easy to show popups based on an HTML element in the page the popup is loading on.
In this article, you’ll learn how to use the HTML Element trigger to show a popup based on an HTML element.
Using HTML Element Trigger
When you are ready to use the HTML element trigger, follow these steps:
- Go to Nelio Popups » All Popups and edit the one you want.
- In the editor sidebar, go to the Settings panel, and open the Triggers tab.
- Add or modify a trigger by selecting ‘HTML Element’.
The following options are available for HTML Element:
- Exists
- Has Class
- Is Completely Visible
- Is Partially Visible
Let’s review each option.
HTML Element Exists
Nelio Popups allows you to trigger a popup when an HTML element exists in the page where the popup is loading on. Select the ‘Exists’ condition and then the popup will open once a specific HTML element exists.
Then you must set the element of your page that will trigger the popup. Note that you need to type a valid CSS selector.
If after the page load the HTML element does not exist, the popup will not be triggered until the element is created and added to the HTML document. This behavior is specially useful for HTML elements that are dynamically created.
HTML Element Has Class
Nelio Popups allows you to trigger a popup when an HTML element has a specific classname in the page where the popup is loading on. Select the ‘Has Class’ condition and then the popup will open once a specific HTML element has a classname.
Then you must set the element of your page that will trigger the popup. Note that you need to type a valid CSS selector. In addition to it, you need to set the classname you want Nelio Popups to check for that element in order to trigger the popup.
If after the page load the HTML element does not has the classname, the popup will not be triggered until the element has that classname. This behavior is specially useful for HTML elements that are dynamically modified with a classname.
HTML Element is Completely Visible
Nelio Popups allows you to trigger a popup when an HTML element is completely visible in the page where the popup is loading on. Select the ‘Is Completely Visible’ condition and then the popup will open once a specific HTML element is completely visible.
Then you must set the element of your page that will trigger the popup. Note that you need to type a valid CSS selector. Nelio Popups will then determine if the element is visible to the visitor.
If the element is hidden, or the visitor hasn’t scrolled down to see it yet, the popup will not display.
Once the visitor has scrolled to the targeted element, or the targeted element otherwise becomes completely visible in the visitor’s viewport, the popup will display.
HTML Element is Partially Visible
Nelio Popups allows you to trigger a popup when an HTML element is visible in the page where the popup is loading on. Select the ‘Is Partially Visible’ condition and then the popup will open once a specific HTML element appears in the visitor’s viewport.
Then you must set the element of your page that will trigger the popup. Note that you need to type a valid CSS selector. Nelio Popups will then determine if the element is visible to the visitor.
If the element is hidden, or the visitor hasn’t scrolled down enough to see it yet, the popup will not display.
Once the visitor has scrolled to the targeted element, or the targeted element otherwise becomes partially visible in the visitor’s viewport, the popup will display.
The difference with the ‘Is Completely Visible’ condition is that with the ‘Is Partially Visible’ condition, the popup will display once it starts to become visible to the visitor. There is no need to view the complete element to open the popup.
After setting the trigger condition, save the popup and then it will open when the trigger condition is met.