Articles on: Popup Opening Events

How to open a popup On Click or On Hover?

Before starting the setup of the opening events for your popup, it is assumed that you have already embedded the popup into your website, or attached via the plugin you are using connected to Popup Maker service.

In the left side of the page you can see Events section of the Popup Maker editor you can select the events on which your popup will open on your site.

Popup Maker events section

On Click

Open popup on click

By Id

You can take the Id of your HTML element, and add in the Id field of your popup editor, so the popup will be triggered on the HTML element with the certain Id value.

By Class
Simply add the CSS class of the button/element, which will open your onclick popup and add in the Class field of your onclick popup options.
We've added the class of our "Get started" button for the popup, as an example.

Open popup by ID


You have the ability to use any custom selector to open a popup when clicked on it.
To get the custom selector on your site you should go to the page where you want to copy the selector and right click (inside your browser) on the selector of the element which you want to use.
Now, if you add the custom selector in the Custom field of your popup editor, you'll have the onclick popup on the custom element on your site.
Here's an example with Chrome browser:

Open a popup by custom

Exact match popup filter

For the Exact Match filter you need to insert the full URL of the element which you want to make clickable. We have highlighted the URL that we need to insert into the Exact Match filter, with red color in the following example:
This will make the element with this URL will become clickable and will open the popup.

Contains filter popup

With the Contains filter, you can open an onclick popup, when the users click on a URL which contains a certain element (word) you mention in the Link: Contains field of your onclick popup.
Like, you can take the word "popup" from your button URL:
So the popup will appear when someone clicks on any button, containing the "popup" element.

Starts with filter popup

This Starts With filter allows you to open an onclick popup from a URL, using the start element of the link. Simply copy the first part of the link of your onclick button, and use it in the Link: Starts field of your onclick popup. We have highlighted the first part of the URL with red color.
Like this:
So, the popup will open up on all the buttons/elements, having URLs which start with your mentioned element.

Ends with filter popup

The Ends With filter is the opposite of the "Starts With". You pick the end of the link, and use it in the Link: Ends With field of your onclick popup.
We've highlighted the end of the URL with red color.
Like this:
So the popup will open when clicking on every element having the URL which ends up with your mentioned part.

On Hover

On hover selector popup

All the options are for the On Hover triggering event. The popup will appear on the element you select with the options provided (Id, Class, Custom, Links) when someone hovers on a certain element on the site.

Please, refer to more detailed instructions in the following video tutorial:

Updated on: 09/12/2020

Was this article helpful?

Share your feedback


Thank you!