Follow the same target Group setup as the Free version, then configure the additional Pro controls.
1. Enable dragging

Use drag_enabled to enable sheet dragging.

With drag_area, choose whether dragging can begin from:

• The entire sheet
• The drag handle only

If you choose Handle only, make sure drag_handle is also enabled. Without a visible handle, there will be no draggable area.

2. Define your snap points

Enter the heights where the sheet should stop in snap_points.

Examples:

40%, 90%

or

300px, 90%

Numbers without a unit are treated as percentages.

Use initial_snap to choose which snap point is used when the sheet opens.

⚠️ Snap indexes follow the order you entered.

For example:

90%, 40%

means:

• index 0 = 90%
• index 1 = 40%

When users drag the sheet, movement still follows the actual height order regardless of input order.

3. Structure scrollable content correctly

When snap_points is set, the plugin controls the sheet height.

The Bubble Group's own height setting is ignored.

Place your sheet content inside a scrollable Group so content does not appear clipped at lower snap positions.

If snap_points is left empty, the plugin uses the Group's original Bubble height just like the Free version.

Dragging can still be enabled, but it will only be useful for dragging the sheet downward to dismiss it.

4. Configure the drag handle

Available settings:

• drag_handle
• handle_width
• handle_height
• handle_color
• handle_top_margin

The handle is drawn inside the top of the sheet, so leave enough top spacing in your Group to prevent overlap with your content.

5. Fine-tune drag behavior

Use:

• dismiss_on_drag_down
• velocity_threshold

Enable drag-to-dismiss if users should be able to close the sheet by pulling below the lowest snap point.

The velocity threshold determines when a gesture is treated as a fast flick.

6. Customize the backdrop

Pro gives you control over:

• backdrop
• backdrop_color
• backdrop_opacity
• backdrop_close

⚠️ Hiding the visible backdrop does not make the page behind the sheet clickable.

A transparent interaction layer remains in place while the sheet is open.

7. Enable the iOS bounce fix when needed

Use ios_bounce_fix to prevent overscroll at the edge of sheet content from pulling the page behind it.

8. Connect the sheet to Bubble workflows

States:

• is_open
• current_snap
• drag_progress

Events:

• opened
• closed
• snap_changed
• drag_started

Actions:

• open
• close
• snap_to(index)

drag_progress returns how much of the sheet is currently visible from 0 to 1 and updates at roughly 1% intervals.