# 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

* You must have [Avonni Components installed](https://appexchange.salesforce.com/listingDetail?listingId=a0N4V00000IDsfbUAD\&tab=e) in your Salesforce organization.
* Familiarity with Salesforce Flow Builder.

## Step-by-Step Guide

{% @arcade/embed flowId="7vLt1QqxVLB6AX2ct4X5" url="<https://app.arcade.software/share/7vLt1QqxVLB6AX2ct4X5>" %}

### 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](/flow/flow-components/delay-interaction.md)."
2. Drag and drop the "Avonni Delay Interaction" component onto the screen.

<figure><img src="/files/XJNACtaxmpn8bgdyO2f0" alt=""><figcaption></figcaption></figure>

### 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.

<figure><img src="/files/dulKyPE5jCqxItAEuHyC" alt=""><figcaption></figcaption></figure>

### 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.

<figure><img src="/files/CyCMIGxXLkPSx2dvtGAM" alt=""><figcaption></figcaption></figure>

### 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.

<figure><img src="/files/RHW61DvrOpodrxme3jNo" alt=""><figcaption></figcaption></figure>

{% hint style="info" %}
Adding the **`Avonni Interaction Service`**&#x63;omponent is required to ensure the confetti fires.&#x20;
{% endhint %}

### 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.


---

# Agent Instructions: Querying This Documentation

If you need additional information that is not directly available in this page, you can query the documentation dynamically by asking a question.

Perform an HTTP GET request on the current page URL with the `ask` query parameter:

```
GET https://docs.avonnicomponents.com/flow/tutorials/components/delay-interaction/creating-a-confetti-celebration-on-the-final-screen.md?ask=<question>
```

The question should be specific, self-contained, and written in natural language.
The response will contain a direct answer to the question and relevant excerpts and sources from the documentation.

Use this mechanism when the answer is not explicitly present in the current page, you need clarification or additional context, or you want to retrieve related documentation sections.
