Puppr
This demo utilizes Toast notifications and Crisp chat to highlight how Puppr can be used to detect user engagement signals and behavioral patterns that indicate confusion or frustration, and then engage with the user to help them resolve the issue.
Check out the GitHub repository to set this up for your own website.
📊 Real-time Statistics
🔥 Rage Click Detection
Detects when users click rapidly in the same area, indicating frustration.
Product Search
Try searching for a product that might not exist or have issues:
💡 Tip: Try searching for something like "broken item" or "error product" and click the search button multiple times quickly to simulate user frustration.
🖱️ Erratic Mouse Detection
Detects erratic mouse movements that indicate user confusion.
Form Filling
Fill out this form with some confusing fields:
💡 Tip: Move your mouse erratically between form fields or hover over confusing elements to trigger detection.
📜 Scroll Thrash Detection
Detects rapid scrolling up and down, indicating content confusion.
Product Catalog
Browse through this product catalog:
Product 1 - Wireless Headphones
High-quality wireless headphones with noise cancellation.
$199.99Product 2 - Smart Watch
Fitness tracking smartwatch with heart rate monitor.
$299.99Product 3 - Laptop Stand
Adjustable laptop stand for ergonomic workspace.
$49.99Product 4 - USB-C Hub
Multi-port USB-C hub for laptop connectivity.
$79.99Product 5 - Wireless Mouse
Ergonomic wireless mouse with precision tracking.
$39.99💡 Tip: Scroll up and down rapidly through the product list to simulate user confusion while browsing.
🚀 Rapid Navigation Detection
Detects when users navigate between pages very quickly.
Help & Support
Navigate through help articles to find what you need:
Getting Started
Welcome to our platform! This guide will help you get started with the basics.
💡 Tip: Click through the help sections rapidly to simulate a user quickly searching for information.
🔄 Revisiting Detection
Detects when users repeatedly visit the same pages.
Settings & Preferences
Configure your account settings:
Profile Settings
Manage your profile information, avatar, and personal details.
💡 Tip: Click the same settings section multiple times to simulate a user repeatedly checking the same information.
💬 Custom Engagement Trigger
Enter a value between 1-100. Values outside this range will trigger support chat.
Value Validator
Enter a value from 1 to 100:
💡 Tip: Enter a value less than 1 or greater than 100 to trigger the support chat window.
⚙️ Cooldown Configuration
Configure cooldowns and deduplication settings to control event frequency.