Components for Experience Cloud Get It on the AppExchange

Creating a Confetti Celebration on the Final Screen

Overview

Celebrate user accomplishments in style by firing confetti on the last screen of your Salesforce Flow! This tutorial will walk you through setting up the confetti interaction using the Avonni Delay Interaction and Avonni Interaction Service components.

Prerequisites

Step-by-Step Guide

Step 1: Open Your Salesforce Flow

Navigate to the Salesforce Flow where you want the confetti interaction to occur and open it in Flow Builder.

Step 2: Go to the Last Screen

Navigate to the last screen of the Flow where you want the confetti to fire.

Step 3: Add Avonni Delay Interaction Component

  1. In the edit screen interface, search for the custom component "Avonni Delay Interaction."

  2. Drag and drop the "Avonni Delay Interaction" component onto the screen.

Step 4: Assign an API Name

  1. Click on the "Avonni Delay Interaction" component you just added.

  2. In the right panel, you'll find an input field for the API Name. Enter a name that makes sense, like Confetti_Delay_Interaction.

Step 5: Open Component Builder

  1. While still selected on the "Avonni Delay Interaction" component, look for an option that says "Open Component Builder" and click it.

Step 6: Navigate to Interaction Tab

  1. Inside the Component Builder, you will see multiple tabs at the top.

  2. Click on the tab that says "Interaction."

Step 7: Create Confetti Interaction

  1. In the "Interaction" tab, you'll find an option to create a new interaction.

  2. Select "Fire Confetti" from the list of available interactions.

Step 8: Save Your Interaction

  1. After configuring your interaction, click on the "Save" button at the bottom to save your changes.

Step 9: Add Avonni Interaction Service Component

  1. Back in the Flow Builder, search for the "Avonni Interaction Service" in the toolbox.

  2. Drag and drop it onto the same screen where you added the "Avonni Delay Interaction" component.

Adding the Avonni Interaction Servicecomponent is required to ensure the confetti fires.

Step 10: Assign an API Name to Avonni Interaction Service

  1. Click on the "Avonni Interaction Service" component you just added.

  2. In the right panel, enter an API Name for this component, like Confetti_Interaction_Service.

Step 11: Save and Close

  1. After adding both components and setting up the interaction, save your changes in the Flow Builder.

  2. Once saved, you can close the Flow Builder.

Test Your Flow

After completing these steps, test your Flow thoroughly to see the confetti fire on the last screen.

Congratulations, you've successfully added a confetti interaction to your Salesforce Flow using Avonni Components! Feel free to reach out if you have further questions or issues.

Last updated