Confetti Effect When Clicking a Divi Button Module

Easy

Javascript

Details

Looking to sprinkle some excitement on your Divi Button Module interactions? Here’s a charming tweak for you!

With this Divi Code Snippet, you can easily integrate a lively confetti effect into your Divi Button Module. Whenever a user clicks on a button labeled with the .confetti-button class, they’re greeted with a vibrant shower of confetti particles. This addition not only brings a burst of color and joy but also significantly enhances user engagement on your Divi-themed website. It’s an ideal way to add an element of fun and create an unforgettable interactive experience for your users!

Just add the code below and the .confetti-button class to your button on the Advanced Tab.

Snippets Demo

Demo of Confetti Effect When Clicking a Divi Button Module

Code

1

Description:
This code loads the confetti.browser.js library.

Language: Javascript

Where to add: Divi Code Module

                        <script src="https://cdn.jsdelivr.net/npm/canvas-confetti@1.6.0/dist/confetti.browser.js"></script>
                    
2

Description:
This code first adds a .confetti-button class to the submit button of the Divi Contact Form Module using Javascript and then listens for a click on the Submit Button. When a click is detected, it then uses the library we loaded to show the confetti when clicked.

Language: Javascript

Where to add: Divi Code Module

                        <script>
// Listens for the 'DOMContentLoaded' event to ensure the HTML is fully loaded before running the script.
document.addEventListener('DOMContentLoaded', function() {

  // Selects the first element with the class '.confetti-button' as the target button.
  const button = document.querySelector('.confetti-button');  // You can change the class, just make sure it is defined in the module also.  

  // Adds an event listener for the 'click' event on the targeted button.
  button.addEventListener('click', function(event) {
    // Retrieves the position and size of the button to calculate where the confetti should appear.
    const rect = button.getBoundingClientRect();

    // Calculates the horizontal (x) center of the button.
    const x = (rect.left + rect.right) / 2;

    // Calculates the vertical (y) center of the button.
    const y = (rect.top + rect.bottom) / 2;

    // Configures the settings for the confetti effect.
    const confettiSettings = {
      particleCount: 100, // Defines the number of confetti particles.
      spread: 70,         // Sets the spread angle of the confetti.
      // Specifies the origin point for the confetti effect based on the button's location.
      origin: { x: x / window.innerWidth, y: y / window.innerHeight }
    };

    // Triggers the confetti effect with the defined settings when the button is clicked.
    confetti(confettiSettings);
  });
});
</script>
                    

Related Snippets

Explore more from Divi Engine