How to trigger a popup on button or image click using a CSS Selector
This trigger is intended for advanced users.
Want your popup to display when a custom HTML element is clicked? With 1Click Popups, you can set it up in just 2 minutes.
Open Google Chrome.
Open the webpage where you want the popup to appear. Navigate to the webpage where you want the popup to appear. For example,
we’ll demonstrate it using the View All button.
Right-click mouse on the button/image you want to target, then select Inspect.
You’ll see the HTML of your element highlighted.
Right-click the highlighted element, select Copy, then choose Copy selector.
Open 1Click Popups.
Go to the Campaigns page, find the campaign you want to edit, then click Edit campaign.
In the Settings tab, find the Triggers section, then check the box for Show on CSS selector click.
Paste your CSS selector.
In the Settings tab, set the Campaign status to Active, then click Save.
Want your popup to display when a custom HTML element is clicked? With 1Click Popups, you can set it up in just 2 minutes.
1. Find CSS selector in Google Chrome
Open Google Chrome.
Open the webpage where you want the popup to appear. Navigate to the webpage where you want the popup to appear. For example,
we’ll demonstrate it using the View All button.
Right-click mouse on the button/image you want to target, then select Inspect.
You’ll see the HTML of your element highlighted.
Right-click the highlighted element, select Copy, then choose Copy selector.
2. Setup trigger in 1ClickPopup
Open 1Click Popups.
Go to the Campaigns page, find the campaign you want to edit, then click Edit campaign.
In the Settings tab, find the Triggers section, then check the box for Show on CSS selector click.
Paste your CSS selector.
In the Settings tab, set the Campaign status to Active, then click Save.
Updated on: 21/05/2025
Thank you!