With the “Element Click” feature, you will be able to choose an element from your website, copy its code, and allow it to activate your Common Ninja widget when clicked on by the user.
To use this feature, navigate to the "Display Rules" tab, scroll down, and click on the "Advanced display rules" button to access the "Advanced rules" section.
In the opened section, toggle the “Element Click” on, where you will see a “Enter a selector” option.
To locate the needed selector follow these steps:
- Go to your website and right-click anywhere on the page. From the options that appear, select the "Inspect" or "Inspect Element" option. This should open a new window at the bottom or side of your screen.
- In this new window, you will see two icons at the top left. Click on the left icon and then click on the button or link that you want to use as a trigger for your popup.
- You should now see some highlighted lines in the newly opened window. Right-click on the highlighted lines and select the "Edit as HTML" option.
- Search through the highlighted lines for the word "id" or "class". These are the identifiers that help you locate the specific element on the page.
- When you are looking for the identifier (either "id" or "class") to use as the selector for your button or link, you may find that the text you need to copy contains spaces. If there are spaces in the text, make sure to only copy the text before the first space that you see.
- Go back to Common Ninja’s widget editor and paste the copied text into the "Selector" field. Before the pasted text, add either a "class indicator" (".class_name" for example) or "id indicator" ("#id_name" for example), depending on what identifier you copied:
- id: If you copied the text, for example, "example_id", paste this text in the "Selector" field and add a hash (#) to the beginning.
- class: If you copied the text, for example, "class_example", paste this text in the "Selector" field and add a dot (.) to the beginning.