GIF Showing Demo of Confetti Response

Quick Tip: Adding Confetti to HTTP Responses in Power Automate

Power Automate / By

Do you want to add a little excitement to your Power Automate flows? This tutorial will show you how to easily add a confetti effect to your HTTP responses in just a few steps. Follow along, and in no time, you’ll be able to celebrate successful actions in your flows with a burst of confetti!

Prerequisite

Before getting started, ensure you have:

  • Access to an environment for running Power Automate with permission to create flows.
  • Basic knowledge of HTML and JavaScript.

Steps to Add a Confetti Effect to Your HTTP Response

Step 1: Set up the HTTP trigger by configuring the request method to GET (as used in this example). You can leave the rest of the settings as default, and no JSON schema is needed. This is for inspirational purposes.

HTTP Trigger in Power Automate

Step 2: This is where the magic happens! Add a “Response” action to your flow:

  • Set the Status Code to 200 (OK).
  • Add a header with Content-Type set to text/html.

Step 3: Compose the HTML response: In the Body field, insert the HTML and JavaScript code below. This can be changed based on your needs.

<html>

<head>
    <title>Confetti Response</title>
    <script src="https://cdn.jsdelivr.net/npm/@tsparticles/confetti@3.0.3/tsparticles.confetti.bundle.min.js"></script>
</head>
<script>
    const duration = 3 * 1000,  // 3 seconds
        animationEnd = Date.now() + duration,
        defaults = { startVelocity: 30, spread: 360, ticks: 60, zIndex: 0, colors: ['#212121', '#293c5b', '#32373c', '#666666', '#d3d3d3', '#d4d8df', '#f0ba32', '#ff813f'] };

    function randomInRange(min, max) {
        return Math.random() * (max - min) + min;
    }

    const interval = setInterval(function () {
        const timeLeft = animationEnd - Date.now();

        if (timeLeft <= 0) {
            return clearInterval(interval);
        }

        const particleCount = 50 * (timeLeft / duration);

        // since particles fall down, start a bit higher than random
        confetti(
            Object.assign({}, defaults, {
                particleCount,
                origin: { x: randomInRange(0.1, 0.3), y: Math.random() - 0.2 },
            })
        );
        confetti(
            Object.assign({}, defaults, {
                particleCount,
                origin: { x: randomInRange(0.7, 0.9), y: Math.random() - 0.2 },
            })
        );
    }, 250);
</script>

<body>
    <div
        style="font-family: Arial, sans-serif; background-color: #212121; padding: 20px; border: 1px solid #d3d3d3; border-radius: 5px; max-width: 600px; margin: auto; margin-top: 40px;">
        <h1 style="color: #f0ba32;">Congratulations!</h1>
        <p style="font-size: 16px; color: #ffffff;"><br /><br />You've successfully added a confetti effect to your HTTP
            response.</p>
    </div>
</body>

</html>
HTTP response with confetti

Step 4: Save and Test Your Flow:
Save your flow and trigger it by sending a GET request to the provided URL. And, you should see a page with a confetti effect celebrating your success!

Conclusion

And that’s it! You’ve just learned how to spice up your HTTP responses with a confetti effect using Power Automate. This effect can be a fun way to celebrate successful actions or highlight important notifications.

For more information and advanced customization of the confetti effect, check out the official documentation and examples here.

For More Content See the Latest Posts