1. Drag the Connection Detector element onto your page   (it is invisible - purely a utility element)

2. Set debounce_ms field (default 500ms recommended)
  This prevents false triggers on flaky connections

3. Use conditions on any element based on these states:

STATES:
  • is_online       → yes / no
    Tells you if user is currently connected

  • connection_type → 4g / 3g / 2g / slow-2g / online
    Tells you connection quality (Chrome/Edge only - shows "online" generically on Safari/Firefox)

  • just_changed    → online / offline
    Tells you what just happened - use this to trigger
    a one-time action exactly when status flips

HOW TO USE:
  • Group example:
    Add a Group element with text "No internet connection"
    Condition: Connection Detector's is_online = no
    → Group is visible
   
    Default state of the Group → not visible

  • One-time toast example:
    Workflow trigger: when just_changed = offline
    → Show Toast Notification "Connection lost!"
   
    Workflow trigger: when just_changed = online
    → Show Toast Notification "Back online!"

  • Slow connection warning:
    Condition: connection_type = slow-2g or 2g
    → Show "Your connection is slow" Group

HOW TO TEST:
  • Open Chrome DevTools (F12) → Network tab
  • Change dropdown from "No throttling" to "Offline"
  • is_online should change to "no" within 500ms

NOTE:
  connection_type provides detailed network speed only on Chrome and Edge browsers due to browser API limitations. On Safari and Firefox it will show "online" as a general status. The is_online state works reliably on all browsers.

Bubble editor link: https://bubble.io/page?id=mbbuilds5&test_plugin=1781851200617x735040051250462700_current&tab=Design&name=internet_connection_detector&type=page&elements=bTGkB