Rage Click Demo for Userback

by danielrae

HTML

<script src="https://static.userback.io/widget/v1.js"></script>
<!DOCTYPE html>
<html>

  <head>
    <title>Rage Click Detection</title>
    <link rel="stylesheet" type="text/css" href="styles.css">
    <script src="https://static.userback.io/widget/v1.js"></script>
  </head>

  <body>
    <div class="container">
      <h1>😠 Rage click demo.</h1>
      <p>Click <span style="padding:3px 5px;background:#DDD;border-radius:5px;cursor:crosshair;">here</span> 5 times in quick succession</p>
    </div>
  </body>

</html>

CSS

::selection {
    background-color: transparent;
}

body {
  font-family: Arial, sans-serif;
}

.container {
  text-align: center;
  margin-top: 50px;
}

p {
  font-size: 30px !important;
  ;
}

JavaScript

// Initializing Userback Widget
 Userback.init('1|74920|IjXmeq4nrQRoPlmr84Tm7x2dDZUdpW08fYuuoyRQpIef3AHcFB');

 Userback.widget_settings = {
   trigger_type: "api"
 }

 // Rage Click Snippet
 let clickArray = [];
 const timeFrame = 2000; // 2 seconds
 const clickThreshold = 4; // Minimum of 5 clicks
 const pixelRange = 100; // 50 pixels

 document.addEventListener('click', function(event) {
   const currentTime = new Date().getTime();
   clickArray.push({
     time: currentTime,
     x: event.clientX,
     y: event.clientY
   });

   // Log the click with a timestamp
   console.log(`Click detected at ${new Date(currentTime).toISOString()}`);

   // Remove clicks that are out of the current time frame
   clickArray = clickArray.filter(click => currentTime - click.time <= timeFrame);

   if (clickArray.length >= clickThreshold) {
     const firstClick = clickArray[0];
     const withinPixelRange = clickArray.every(click =>
       Math.abs(firstClick.x - click.x) <= pixelRange &&
       Math.abs(firstClick.y - click.y) <= pixelRange
     );

     if (withinPixelRange) {
       Userback.setData({
         action_name: 'Rage Click Detected',
         clicks: clickArray.length
       });
       Userback.open('bug', 'form');
       clickArray = [];
     }
   }
 });