---
title: Click trigger
slug: click-trigger
description: How the Click trigger works in Personizely: CSS selectors, elements added later, why a click that opens the widget doesn't follow the link, and reopening.
docTags: 
createdAt: 2026-10-16T20:14:01.876Z
---

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

1. You list one or more CSS selectors, such as `#size-guide` or `.open-quiz`.
2. 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.
3. 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.
4. If the widget doesn't show, for example because the [Frequency rule](docId\:hmqkmmX7AxOR2P7e07VaF) 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)](docId\:d64TegyOiwNA2GFG1eXPm).
- **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](docId\:qdwUdzaAMzzhosIGxAo0F) or [Proceeding to checkout trigger](docId\:koaltSSSSGNdWpOg3L20H) 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.

## Related

- [Widget triggers](docId:2xConiUT5V1g5SuzgMAuW)
- [Hover trigger](docId\:I46bY-GhdBzB8xJS17GIB)
- [JavaScript API (window.ply)](docId\:d64TegyOiwNA2GFG1eXPm)
- [Show widget automation](docId:99my6mX0nl_rL1spuuy-O)