Want to trigger a popup exactly when a user clicks a specific element? With PopupKit’s カスタムセレクタークリック feature, you can turn any button, menu item, or text link into a trigger.

How to Show a Popup on Click (Custom Selector) #

Follow these four simple steps to set it up.

Step 1: Set the Trigger Event to Custom Selector #

First, you need to tell PopupKit that this specific popup should only appear when a user performs a click action.

• Open your PopupKit campaign editor.
• に移動します。 Display Options tab on the left sidebar.
• を見つけます。 Open Event ドロップダウンメニュー。
• 選択する カスタムセレクタークリック リストから。

• の中に セレクタクラス field, enter a unique class name (e.g., subscribe-popup or promo-click).
  • Note: Do not include a period (.) before the name here. Just use the plain text.

Step 2: Define Where the Popup Should Load #

Even though the popup triggers on a click, you must define which pages are allowed to load the popup scripts.

• に行きます 表示条件 タブ。
• クリック + 条件を追加 ボタン。

• 下 含む section, choose your target location:
  • サイト全体: To make the click trigger work on every page.
  • 特異： To target a specific Page or Post (e.g., Select “Page” then choose “Wpmet Tutorial”).
• Complete your design in the editor and ensure the Activate Campaign toggle is ON.
• クリック 保存.

Step 3: Link the Class to Your Website Element #

Now, you need to “connect” your website button to the popup by adding the CSS class you created in Step 1.

For Gutenberg (Block Editor): #

1. Edit the page where you want the trigger to appear.
2. クリックしてください ボタン (or image/text) you want users to click.
3. In the right-hand settings panel, expand the 高度な タブ。

1. を見つけます。 追加の CSS クラス 分野。
2. Type in the exact class name you used in Step 1 (e.g., subscribe-popup).
3. アップデート または 公開 your page.

For Elementor or Other Builders: #

• Select your widget > 
• に行く 高度な > CSS クラス > Enter your class name.

Step 4: Verify and Test Popup  on Click #

Once saved, it’s time to see the trigger in action.

• Visit the live URL of the page you just edited.
• Click the button or element where you added the CSS class.
• The popup should appear instantly.

Pro Tip: If the popup doesn’t appear, ensure that the spelling of the CSS class in your Page Editor matches the “Selector Class” in PopupKit exactly.

By mastering the PopupKit Custom Selector Click, you can create a seamless, high-intent user experience that triggers engagement exactly when your audience is ready. You’re now ready to turn any element on your site into a powerful conversion tool!