In the settings of onsite elements such as Pop Up or Web layer banner, you can select the "Click" action and then adjust the element of website on which, when clicked, your onsite will be displayed. To properly set the element that, when clicked, will display it, you need to find its CSS selector.
To select the appropriate element selector to trigger the display of your Pop-Up upon clicking, follow these steps:
Inspecting the Element:
Open Developer Tools:
Open your browser’s developer tools (usually accessible by right-clicking on the page and selecting “Inspect” or pressing F12).
Find the Trigger Element:
Locate the element that should trigger the Pop-Up when clicked. This could be a button, link, or another interactive element.
Analyzing the Element’s HTML:
Examine HTML and Attributes:
Once the element is highlighted in the developer tools, look at its HTML and attributes such as ID (id) and classes (class).
Use the ID or Class:
Use either the ID or class to create the selector.
Example:
Let’s assume you have a button that you want to trigger the Pop-Up, and its HTML looks like this:
<button id="openPopup" class="btn btn-primary popup-trigger">Show Pop-Up</button>
ID Selector
By design, an element's ID is unique on a webpage, but due to improper construction of the page, this may not always be the case. However, if an element does have an ID, you can use the ID selector: #openPopup
In this form, you should paste the selector into edrone. If you want to use the element’s ID, you must use the # symbol before the actual text.
Class Selector
If the element doesn’t have an ID but has a class, you can use the class selector. Note that a class may be used multiple times for various elements on the page, so it’s essential to ensure that the class for the specific element is unique. If you have access to the source code and the ability to edit it, you can always add a unique class to the specific element in the HTML: .popup-trigger
In this form, you should paste the selector into edrone. If you want to use the element’s class, you must use the . symbol before the actual text.
Attributes and Nesting
In some cases, you may need to use more complex selectors that account for attributes or the nesting of the element. This requires a greater knowledge of HTML and CSS.
Example: “button[aria-haspopup="true"]” or “.container .popup-trigger.”
Need extra help?
If you have any additional questions about selecting a CSS element, please contact us at hello@edrone.me