# Popup Triggers

Popup Triggers are actions or conditions that decide when a popup is displayed to visitors. Setting triggers ensures the popup appears at the right moment, enhancing user experience and driving conversions.\
\
Triggers can be based on user behavior, such as when they show intent to leave the site, scroll through the page, or add an item to their cart.

## Types of Trigger Conditions

* <mark style="color:orange;">**Exit-Intent**</mark>
* <mark style="color:orange;">**Scroll**</mark>
* <mark style="color:orange;">**Add to Cart**</mark>
* <mark style="color:orange;">**Time-Based**</mark>
* <mark style="color:orange;">**Click**</mark>
* <mark style="color:orange;">**Idle Timeout**</mark>

### **Exit-Intent**

Trigger the popup when a visitor shows intent to leave your site, such as moving the cursor toward the browser's address bar or closing the tab.

<figure><img src="https://837552055-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2F-MDdKRAW4KzC-CNNbvnH%2Fuploads%2FSge2WH5bshYzaFzhQXMT%2FScreenshot%202024-11-30%20at%204.46.18%20PM.png?alt=media&#x26;token=cf95b071-61e4-4857-b4cb-c7c8d57c5c55" alt=""><figcaption><p>Exit-Intent</p></figcaption></figure>

### Scroll

Shows a popup when the user scrolls down a specified percentage of the page, ensuring it targets engaged visitors.

* **Adjust Scroll Percentage**: Set the percentage in the settings. The popup activates once the threshold is crossed.

<figure><img src="https://837552055-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2F-MDdKRAW4KzC-CNNbvnH%2Fuploads%2Fbxu8tgW44dDv4I5x3wFQ%2FScreenshot%202024-11-30%20at%204.48.30%20PM.png?alt=media&#x26;token=954040a8-5005-4f71-8b41-40980d2f9e53" alt="" width="563"><figcaption><p>Adjusting Scroll Percentage</p></figcaption></figure>

After saving, it will be automatically enabled.

<figure><img src="https://837552055-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2F-MDdKRAW4KzC-CNNbvnH%2Fuploads%2FfGJrSGCKd6CX6Nn8swg8%2FScreenshot%202024-11-30%20at%204.49.28%20PM.png?alt=media&#x26;token=21393fed-eb66-4212-bed7-eb5dbe0d4247" alt=""><figcaption><p>Scroll</p></figcaption></figure>

### **Add to Cart**

You can trigger the Add to Cart popup by specifying the ID or Class of the button or element the visitor clicks on. The popup will appear after the visitor clicks on any of the following IDs or Classes

* **CLASS**: `single_add_to_cart_button`
* **CLASS**: `add_to_cart_button`
* **CLASS**: `ajax_add_to_cart`
* **CLASS**: `elementor-widget-wc-add-to-cart`

<figure><img src="https://837552055-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2F-MDdKRAW4KzC-CNNbvnH%2Fuploads%2FJQVhEHnTAqjOXcRFuJVv%2FScreenshot%202024-11-30%20at%204.54.31%20PM.png?alt=media&#x26;token=467da5d9-665c-4b2a-9529-e4149e0f11b5" alt="" width="563"><figcaption><p>Add to Cart - Classes</p></figcaption></figure>

After saving, it will be automatically enabled.

<figure><img src="https://837552055-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2F-MDdKRAW4KzC-CNNbvnH%2Fuploads%2FUeT4KXR6j7WMik2RB9IK%2FScreenshot%202024-11-30%20at%204.55.43%20PM.png?alt=media&#x26;token=faef6d85-5eb0-4bc0-8b98-5cedf79f33e3" alt=""><figcaption><p>Add to Cart</p></figcaption></figure>

{% hint style="info" %}
**How to find the class name of the "Add to Cart" button in your e-commerce store?**<br>

1. Go to any product page on your website.
2. Click on the product to navigate to its details page.
3. Click on the "**Add to Cart**" button.
4. Right-click on the page and select "**Inspect**".
5. Locate the HTML code for the "**Add to Cart**" button within the opened Developer Tools.
6. Right-click on the highlighted code, representing the button, and choose "**Copy**" to copy the class name.\
   \
   To know more watch a video\
   **How to find the class name of the Add to Cart Button**<br>
   {% endhint %}

### Time-Based

Trigger the popup after X seconds of page engagement. This helps target users who have spent time on the page and may be interested in offers.

<figure><img src="https://837552055-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2F-MDdKRAW4KzC-CNNbvnH%2Fuploads%2Ft7W5DVQfNTPA55GixmNW%2FScreenshot%202024-11-30%20at%204.58.08%20PM.png?alt=media&#x26;token=c3963637-bdfa-4c06-b45a-a7a910296010" alt="" width="563"><figcaption><p>Setting Up Seconds</p></figcaption></figure>

After saving, it will be automatically enabled.

<figure><img src="https://837552055-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2F-MDdKRAW4KzC-CNNbvnH%2Fuploads%2FQXAKaBjvgq1ZRJhz2yYq%2FScreenshot%202024-11-30%20at%204.58.30%20PM.png?alt=media&#x26;token=20083b96-5fc2-4a55-8e25-bbc842cf5fc3" alt=""><figcaption><p>Time Based</p></figcaption></figure>

### Click

Trigger the popup with a click on specific elements using their class or ID. This allows for more targeted popups based on user interaction.

<figure><img src="https://837552055-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2F-MDdKRAW4KzC-CNNbvnH%2Fuploads%2FCsAiKJmg7irDPjaoc6dE%2FScreenshot%202024-11-30%20at%205.05.06%20PM.png?alt=media&#x26;token=4a458d33-aae6-4e39-bf41-dbf083aedab4" alt="" width="563"><figcaption><p>Class or ID in Click</p></figcaption></figure>

After saving, it will be automatically enabled.

<figure><img src="https://837552055-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2F-MDdKRAW4KzC-CNNbvnH%2Fuploads%2FrDmAlRHAt7dJ5we3QFoi%2FScreenshot%202024-11-30%20at%205.05.40%20PM.png?alt=media&#x26;token=376a6cb4-825f-44e8-ab2d-1f661d4f32d7" alt=""><figcaption><p>Click</p></figcaption></figure>

{% hint style="warning" %}
**How to capture class names for multiple products:**

1. Visit the product main page on your website.
2. For each product, click on the "Add to Cart" button.
3. Right-click on the button and select **Inspect**.
4. In the Developer Tools, locate the HTML code for the "Add to Cart" button.
5. Right-click on the highlighted code and choose **Copy** to copy the class name.
   {% endhint %}

## Idle Timeout

Displays a popup after a period of inactivity, engaging visitors who aren’t interacting with the page.

* **Set Idle Time**: Define the timeout duration in seconds

<figure><img src="https://837552055-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2F-MDdKRAW4KzC-CNNbvnH%2Fuploads%2FlweVjmCk3YQqESinjDZk%2FScreenshot%202024-11-30%20at%205.08.59%20PM.png?alt=media&#x26;token=7563d026-51be-4285-a73f-db491f2c828c" alt="" width="563"><figcaption><p>Add Seconds - Idle Timeout</p></figcaption></figure>

After saving, it will be automatically enabled.

<figure><img src="https://837552055-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2F-MDdKRAW4KzC-CNNbvnH%2Fuploads%2FJEj0SAJVHGKDD21Dd9kJ%2FScreenshot%202024-11-30%20at%205.09.15%20PM.png?alt=media&#x26;token=f11fb530-e532-4518-b57d-6ccfa08fde9c" alt=""><figcaption><p>Idle Timeout</p></figcaption></figure>

{% hint style="info" %}

### Best Practices for Using Triggers

* **Combine Triggers**: Use multiple conditions to make popups more relevant.
* **Avoid Overuse**: Too many popups can overwhelm visitors and reduce engagement.
* **Test Trigger Effectiveness**: Use A/B testing to determine the best timing and conditions.
  {% endhint %}

### Conclusion

Popup Triggers are essential for delivering the right message at the right time. By leveraging triggers like Exit-Intent, Scroll, Add to Cart, Time-Based, Click, and Idle Timeout, you can create personalized experiences that engage users and improve conversion rates. Set triggers thoughtfully to ensure your popups provide value without disrupting the user journey.

{% hint style="success" %}
**Need More Help?**&#x20;

We’re here to make things easier for you!

* Email Us: Reach out anytime at <support@retainful.com>.
* Schedule a Call: Still stuck or need a hands-on walkthrough? Book a quick session with our support team, and we’ll guide you step-by-step.

[**Schedule a call with us**](https://zcal.co/retainful/onboarding)**.**
{% endhint %}