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 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 (window.ply).
- Don't use it on add-to-cart or checkout buttons. The click would be cancelled when the widget shows. Use the Add to cart trigger or Proceeding to checkout trigger 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.