Welcome to the guide for integrating the "Sweet Alerts" plugin with your Bubble application. This lightweight and flexible JavaScript package revolutionizes how alerts are displayed, replacing traditional browser alerts with modern, responsive modals. "Sweet Alerts" offers an array of features like text inputs, buttons, animations, and more, making it an excellent tool for boosting user experience through visually appealing notifications.
Types of Alerts Available:
Sweet Alerts
Toast Alerts
Configuration Options for Sweet Alerts:
Icon: Choose from "success," "error," "warning," "info," or "question" to convey the alert's context visually.
Title: Set a prominent title for your alert.
Text: Add descriptive text to communicate the alert message clearly.
Button Text: Customize the label on the alert's button.
Icon Colour: Personalize the icon's color to fit your brand or alert type.
Footer Message: Include a custom message at the bottom of the alert.
Backdrop: Enable a semi-transparent overlay that appears behind the alert, enhancing focus on the alert dialog.
Confirmation Button: Adjust the button's color to match your design scheme.
Alert Position: Specify the alert's placement on the screen—top, center, or bottom.
Close via Escape Key: Allow users to dismiss the alert by pressing the Escape key.
Theme: Tailor the alert's theme to align with your application's aesthetics.
Configuration Options for Toast Alerts:
Message: Input the primary text for the alert.
Icon: Use the same icon options as Sweet Alerts for consistent visual cues.
Timer: Set a duration after which the alert will automatically close.
Mixin Position: Decide where on the screen the toast will appear.
Timerbar: Show a visual indicator of the timer's progress.
Confirm Button Color: Customize the color of the confirmation button.
By leveraging these properties, the "Sweet Alerts" plugin for Bubble allows developers to create rich, engaging alerts that enhance interactions and improve the user experience on their web applications.