Learning Exitget

Get to know everything about the Exitget platform.

Selector Detection

A selector in HTML is a tool used to find specific elements on an HTML page. The most popular types of selectors are defined using the id or class attributes of an HTML tag.


<h1 id=”myHeading” class=”myData”>Heading 1</h1>
<h2 id=”myHeading2” class=”myData anotherClassName”>Heading 2</h2>

The above example was written to demonstrate the main differences between class and id attributes. In the example you see two tags named h1 and h2. They come in pairs of two, the first representing the opening of the tag and the second the closing. Closing tags always contain a / (forward slash) in them. It’s important to note that closing tags never contain attributes. Opening tags shown in the example with an id and class attribute are where we get to define our elements attributes.

The main difference between id and class attributes are, ids must be unique, meaning no other element in your HTML should contain the same id name. On the other hand classes may contain the same name and when they are called on your selection will contain both elements. Likewise the class attribute may contain multiple classes, which are separated by spaces.

Lets say we only wanted to select the Heading 1 element. We could call on it using its id attribute. Id selectors are always written starting with a hash tag.



Or lets say we want to select both Heading 1 and Heading 2 of the first example we could call on it using the class myData. Classes are always called on using a . (period).



Selectors can also be strung together using , (commas) so that you can define multiple at the at time. The following example will select both headings 1 and 2 in the above example.


#myHeading, .anotherClassName

Defining Scroll Position

Using selectors we can define the scroll position that a popup should be triggered. They may perform superior than defining the scroll position as a percentage depending on the application. Exigets algorithms will detect if the user has scroll to the point where the object is on screen before the trigger is set off.

Magic Selectors

Exitget also uses a magic selector to help keep things a little simpler on your end. You can enable it by making sure to turn on the Detect class ‘exitgetTriggerOn’ option in your campaign settings. You can simply add the class exitgetTriggerOn to any element in your HTML to set off the campaign trigger.