Click trigger
The Click trigger shows a widget when the visitor clicks an element on your page that matches one of your CSS selectors. Use it to open a size guide, a quiz, a lead form or a "notify me" popup from a link or button in your theme.
Available on: all platforms.
How it works
- You list one or more CSS selectors, such as #size-guide or .open-quiz.
- When the visitor clicks an element that matches any of them, or anything inside such an element, the trigger checks its conditions and the trigger-time rules.
- If they pass, the widget is shown, and the click's normal action is cancelled: a link isn't followed and a submit button doesn't submit its form.
- If the widget doesn't show, for example because the Frequency rule blocks it, the click works as usual.
Elements that appear after the page has loaded, such as items in a cart drawer or a menu built with JavaScript, are matched too.
Configuration
Option | What it does | Values / default |
|---|---|---|
CSS Selectors | The elements that open the widget. Add several to match any of them | One or more selectors; required |
Conditions: Time spent on current page | Only fire if the visitor has been on the page more (or less) than N seconds; optionally the total time on your site in this session, including the current page | Optional |
Conditions: Max scroll reached | Only fire if the deepest scroll on this page is more (or less) than N% | Optional |
Behavior details and limitations
- A click that shows the widget doesn't follow the link. Point the selector at a link only if you want the widget instead of the navigation. Whenever the widget doesn't show, the link works normally.
- It opens the widget once per page. After the widget has been shown, the trigger stops until the next page load, so a second click on the same page no longer opens it (a link is then followed as usual). For a button that should open the widget every time, call ply.showWidget(id, true) from your own click handler. See the JavaScript API.
- Don't use it on add-to-cart or checkout buttons. The click would be cancelled when the widget shows. Use the Adding to cart or Proceeding to checkout trigger, which continue the action for you.
- Widgets that load data first. If the widget has to load products before it can appear, the link may already be followed by then. Use an element that isn't a link, or a link to #, as the trigger.
- No selector, no trigger. Without a selector the trigger never fires, and the browser console shows "No selectors specified." An invalid selector also stops the trigger from working.
- Focus. When the widget closes, keyboard focus returns to the element that was clicked.
Examples
- Size guide: a[href="/pages/size-guide"] opens a popup with the size chart instead of a separate page.
- Quiz from the menu: .menu-item--quiz opens a multi-step survey popup.
- Back-in-stock form: .notify-me on sold-out product pages opens an email form.
Troubleshooting
- Clicking does nothing → the selector doesn't match the element. Test it in the browser console with document.querySelectorAll('your-selector').
- The link stopped working → expected while the widget can show. Turn the trigger off for that element, or use a different element.
- Second click doesn't reopen the widget → expected. Use ply.showWidget for elements that should always reopen it.