Tassos Marinos Developer of Joomla Extensions

Display a popup when a certain element reaches your browser's viewport

Published in EngageBox
Updated 27 Apr, 2020

In order to display a popup when a certain element of your website appears in your browser's viewport, you will need 2 things. Access to your HTML code and the element's id or class you are going to manipulate.

Where to find the element's class or id?

For the simplicity of this tutorial we are going to assume that you already know what a class or id of an HTML element means. Although, if you feel that you don't really know how to find it then we suggest that you use your browser's developing tools to inspect that certain element and spot something like this

Where is the class?

<div class="here-is-the-class">blah blah</div>

Where is the id?

<div id="here-is-the-id">blah blah</div>

Configure Engage Box

Step 1 - Edit or Create a new Box

EngageBox > Select a Box" />

Step 2 - Type in your class or id

EngageBox > Trigger Box on Scroll by Element" />

Step 3 - Hit "Save" or "Save and Close"

... and you're done!

Common uses

  • When your article's comments appear on screen and you want to guide your visitors on the interaction you'd like between you and them.
  • When a certain paragraph of your article appears on screen which may be sponsored content and you'd like to show a certain advertisement for it.

The possibilities are endless and the flexibility this option gives you is unlimited!