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.
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.
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:
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: https://popupmaker.com/index.php?myfulllink=url
This will make the element with this URL will become clickable and will open the 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: https://popupmaker.com/index.php?myfulllink=url
So the popup will appear when someone clicks on any button, containing the "popup" element.
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: https://popupmaker.com/index.php?myfulllink=url
So, the popup will open up on all the buttons/elements, having URLs which start with your mentioned element.
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: https://popupmaker.com/index.php?myfulllink=url
So the popup will open when clicking on every element having the URL which ends up with your mentioned part.
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:
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.
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.
Custom
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:
Link: Exact Match
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: https://popupmaker.com/index.php?myfulllink=url
This will make the element with this URL will become clickable and will open the popup.
Link: Contains
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: https://popupmaker.com/index.php?myfulllink=url
So the popup will appear when someone clicks on any button, containing the "popup" element.
Link: Starts With
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: https://popupmaker.com/index.php?myfulllink=url
So, the popup will open up on all the buttons/elements, having URLs which start with your mentioned element.
Link: Ends With
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: https://popupmaker.com/index.php?myfulllink=url
So the popup will open when clicking on every element having the URL which ends up with your mentioned part.
On Hover
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
Thank you!