Custom Confetti in Salesforce refers to the celebratory animations that appear when a user completes an action, such as saving a record.
Custom confetti allows us to personalize the animation to match our company’s branding or provide the user with additional information.
So, in our Salesforce tutorial today, we will explain how to create Custom confetti by building a reusable Lightning Web component that will generate Custom Confetti.
So, without any further ado, let’s start.
Foreword: Custom JavaScript File
As we will be using custom confetti from a custom javascript file, we must add the javascript file to the static resource and use it in our lightning component.
Copy the below code and save it as confetti.js file.
Confetti.js
Steps to Create Custom Confetti in LWC
Create a new Lightning Web Component
i) Update Your HTML file i) Update Your HTML file
The HTML file should have the elements that you want to use as confetti. You can use any HTML element such as a div or span, and style it as desired.
ii)Update a JavaScript file and Import it into the LWC
The JavaScript file should have the logic to randomly generate the confetti and add it to the page.
Code
iii)Update a CSS file
Create a CSS file to add the styles for the confetti. The CSS file should have the animation properties to animate the confetti and make it look like it is falling.
Code
iv) Update XML file:
Finally, add the customConfetti component to the desired page using the component in your Lightning page. You can check out the custom confetti created by this newly created LWC component by visiting the link here.
Wrap Up
So, there it is! Go ahead and create your custom confetti using the solution and do not forget to share your experiences with us. If you wish to receive more such interesting Salesforce development solutions, stay tuned to our blogs! Happy learning!
