Cursor Activity Detector

Description

Mahad Haqqi

Last Update 2 年前

Demo Link: https://chakor-plugin-demo-6.bubbleapps.io/version-test/cursor_activity_detector

Editor Link: https://bubble.io/page?id=chakor-plugin-demo-6&test_plugin=1736500281997x201982622535516160_current&tab=Design&name=cursor_activity_detector&type=page

This plugin enables you to detect user interactions based on mouse movements and page behavior. It triggers the following events:

  • User Leaving Page: Detects when the user moves the cursor to exit the page (e.g., towards the top of the screen).
  • Corner Detection: Triggers events when the mouse moves to one of the four screen corners:
    • Top Left
    • Top Right
    • Bottom Left
    • Bottom Right

Includes a configurable minimum movement threshold to ensure events are triggered only for significant cursor movements, reducing noise from minor displacements.

Perfect for creating engaging user experiences like exit-intent popups, targeted interactions, or analytics tracking.

Instructions

  • Add the Plugin to Your App

    • Install the plugin in your Bubble.io application from the plugin marketplace or your plugin development panel.

  • Place the Element on the Page

    • Drag and drop the plugin element onto your page from the editor.
    • The element is non-visual, so it doesn’t appear on the page but powers the functionality.

  • Configure Workflow Events

    • Use the following events to define custom workflows in your app:
      • User Leaving Page: Triggered when the mouse moves to exit the page (e.g., towards the top edge of the screen).
      • Mouse in Top Left: Triggered when the cursor enters the top-left corner.
      • Mouse in Top Right: Triggered when the cursor enters the top-right corner.
      • Mouse in Bottom Left: Triggered when the cursor enters the bottom-left corner.
      • Mouse in Bottom Right: Triggered when the cursor enters the bottom-right corner.

    • Was this article helpful?

    0 out of 0 liked this article