Demo to preview the plugin:
Live Demo: http://confettidemo.bubbleapps.io/index
Introduction
The Confetti plugin allows you to add various visually appealing confetti effects to your Bubble application. You can easily incorporate different confetti animations such as realistic confetti guns, fireworks, school pride effects, snow, stars, and even custom emoji confetti. This plugin enhances the user experience by adding celebratory visual elements to mark achievements, special moments, or simply to add a fun interactive element to your application.
How to setup
- Install the “Confetti - Add Confetti To Your App” plugin from the Bubble plugin marketplace.
- Add the ‘Confetti’ element to your page by dragging it from the Elements panel into your page.
- Create a workflow (for example on button click), navigate to ‘Elements’ and under the plugin element you will find the different confetti workflow actions.
- Select the desired confetti effect and configure its parameters according to your preferences.
Plugin Element Properties
The plugin contains a visual element called “Confetti” that should be added to your page.
Confetti
Element Actions
The plugin contains various actions that can be triggered to display different types of confetti effects. Each action has configurable parameters to customize the visual appearance.
1. Confetti gun (realistic)
2. Fireworks
3. School pride
4. Confetti gun (random direction)
5. Snow
6. Stars
7. Emoji
Workflow example
Here’s a simple example of how to use the Confetti plugin in your Bubble application:
- Add the Confetti element to your page.
- Create a button with the text “Celebrate!”
- Add a workflow to the button’s click event:
- Go to “Element Actions”
- Select the Confetti element you added
- Choose “Fireworks” action
- Configure the duration to 5000 milliseconds and set your preferred colors
- Now when a user clicks the “Celebrate!” button, a colorful firework effect will display on the screen
Another example:
- Add the Confetti element to your page.
- Create a workflow that triggers when a user completes a specific action (e.g., completes a purchase):
- Go to “Element Actions”
- Select the Confetti element
- Choose “Emoji” action
- Set the emoji parameter to “🎉, 💰, 🛍️, 🎁”
- When the user completes the purchase, celebratory emojis will appear on the screen.
