Sweet Confirm #holdpressbutton

Demo to preview the settings

Introduction

Introduce an innovative way to secure user confirmations in your Bubble app with the Sweet Confirm #holdpressbutton Plugin. This unique plugin revolutionizes the confirmation process by implementing a hold-and-press mechanism, offering a tactile and interactive alternative to traditional confirmation dialogs. It's designed to minimize accidental confirmations, ensuring that users are making deliberate choices within your application.
The plugin features customizable hold durations and visual indicators, enhancing the user experience by providing clear feedback during the confirmation process. As users press and hold the button, a visual cue displays progress, ensuring the action is intentional. Upon reaching the specified duration, the plugin can trigger workflows, integrating seamlessly with your application's logic.
By incorporating the Sweet Confirm #holdpressbutton Plugin, you elevate user engagement and interaction within your Bubble app. It not only adds an extra layer of security to confirmations but also enriches the user interface with an intuitive and interactive element, making digital interactions more deliberate and meaningful.
Image without caption

How to setup

  1. Install plugin Sweet Confirm #holdpressbutton
Image without caption
  1. Place the Sweet confirm element on the page
Image without caption

Plugin Element Properties

Image without caption
Image without caption
Title
Description
Type
Button ID
The HTML ID of the button you want to enable sweet confirm on. Read documentation for more information.
Text, Required
Hold message
Message during holding mouse/key button on element
Text, Required
Success message
Message after holding complete
Text, Required
Delay (seconds)
The holding time required to trigger the workflow.
Number, Required
Button background
Background color for initial state, usually equal to the "gradient from" color
Color, Required
Button success background
Background color for success state
Color, Required
Gradient start Color
Background end color for holding state
Color, Required
Gradient end Color
Background start color for holding state, usually equal to the "background" color
Color, Required
Animate on load?
Enabled initial transition when page is loaded
Checkbox
Hover cursor
Button hover cursor
Dropdown
Hold cursor
Button cursor when being held
Background Size IN
Size of start background color in percentage; for better effect must be greater than 100%
Number, Required
Background Size OUT
Size of end background color in percentage
Number, Required
Background Position IN
Background position for init animation
Text, Required
Background Position OUT
Background position for end animation
Text, Required
Transition speed IN (s)
A transition speed in seconds
Number, Required
Transition speed OUT (s)
A transition speed in seconds
Number, Required
Gradient angle
Angle of the gradient line's starting point
Number, Required
Gradient hardness (%)
Hardness of the gradient
Number, Required

Element actions

1) Reset

Element events

Title
Description
A Sweet Confirm Button Is Clicked
Triggers when a button is clicked
A Sweet Confirm User Stopped Holding
Triggers when a button stopped being held
A Sweet Confirm User Start Holding
Triggers when a button started being held
Image without caption

Changelogs