---
title: "Add Fireworks to your app screen"
slug: "add-fireworks-to-your-app-screen"
updated: 2026-08-06T15:35:55Z
published: 2026-08-06T15:35:55Z
canonical: "support.whatfix.com/add-fireworks-to-your-app-screen"
---

> ## Documentation Index
> Fetch the complete documentation index at: https://support.whatfix.com/llms.txt
> Use this file to discover all available pages before exploring further.

# Add Fireworks to your app screen

The Fireworks effect can be added when your end users go to the Homepage of your app for the first time.

Use the following steps to add the Fireworks Delight effect to your app screen:

[Step 1: Create a Fireworks project](/mobile/docs/add-fireworks-to-your-app-screen#create-fireworks) [Step 2: Capture your Mobile app screens](/mobile/docs/add-fireworks-to-your-app-screen#connect-capture) [Step 3: Identify the screen](/mobile/docs/add-fireworks-to-your-app-screen#identify-screen) [Step 4: Design the effect](/mobile/docs/add-fireworks-to-your-app-screen#design-fireworks)

## Step 1: Create a Fireworks project

1. On the Whatfix Mobile Dashboard, click the app in which you want to create your project. ![Mobile_Db_Select_App.png](https://cdn.document360.io/a268766e-d74d-4619-9613-e2472f809ffb/Images/Documentation/Mobile_Db_Select_App.png?sv=2026-02-06&spr=https&st=2026-10-29T18%3A58%3A07Z&se=2026-10-29T19%3A58%3A07Z&sr=c&sp=r&sig=PEq%2BYKYrNHc2CnCkllIhVoK0wWPClR1ssiCDStc%2FSA4%3D)
2. To create a new project, click **+ New**. ![Mobile_new_Project.png](https://cdn.document360.io/a268766e-d74d-4619-9613-e2472f809ffb/Images/Documentation/Mobile_new_Project.png?sv=2026-02-06&spr=https&st=2026-10-29T18%3A58%3A07Z&se=2026-10-29T19%3A58%3A07Z&sr=c&sp=r&sig=PEq%2BYKYrNHc2CnCkllIhVoK0wWPClR1ssiCDStc%2FSA4%3D)

1. In the **DELIGHT** section, click **Fireworks**.  

![delight_firework](https://cdn.document360.io/a268766e-d74d-4619-9613-e2472f809ffb/Images/Documentation/delight_firework.png?sv=2026-02-06&spr=https&st=2026-10-29T18%3A58%3A07Z&se=2026-10-29T19%3A58%3A07Z&sr=c&sp=r&sig=PEq%2BYKYrNHc2CnCkllIhVoK0wWPClR1ssiCDStc%2FSA4%3D)

1. Enter a name for your project. ![Mobile_New_Project_Name.png](https://cdn.document360.io/a268766e-d74d-4619-9613-e2472f809ffb/Images/Documentation/Mobile_New_Project_Name.png?sv=2026-02-06&spr=https&st=2026-10-29T18%3A58%3A07Z&se=2026-10-29T19%3A58%3A07Z&sr=c&sp=r&sig=PEq%2BYKYrNHc2CnCkllIhVoK0wWPClR1ssiCDStc%2FSA4%3D)
2. Enter the **App Version** or select the **App Version** using the dropdown. ![Mobile_app_version.png](https://cdn.document360.io/a268766e-d74d-4619-9613-e2472f809ffb/Images/Documentation/Mobile_app_version.png?sv=2026-02-06&spr=https&st=2026-10-29T18%3A58%3A07Z&se=2026-10-29T19%3A58%3A07Z&sr=c&sp=r&sig=PEq%2BYKYrNHc2CnCkllIhVoK0wWPClR1ssiCDStc%2FSA4%3D)

          Info:

          

  - Use the latest version of your app to create Whatfix Mobile content. For more information on app version, see [What is an App Version?](/mobile/docs/app-version)
  - Ensure that you add the correct app version from the app build that was integrated with the Whatfix Mobile SDK.
3. Click **Create**. ![Mobile_Click_Create.png](https://cdn.document360.io/a268766e-d74d-4619-9613-e2472f809ffb/Images/Documentation/Mobile_Click_Create.png?sv=2026-02-06&spr=https&st=2026-10-29T18%3A58%3A07Z&se=2026-10-29T19%3A58%3A07Z&sr=c&sp=r&sig=PEq%2BYKYrNHc2CnCkllIhVoK0wWPClR1ssiCDStc%2FSA4%3D)

1. Your Fireworks project gets created and you are redirected to the Whatfix Mobile Studio.  

![fireworks_studio](https://cdn.document360.io/a268766e-d74d-4619-9613-e2472f809ffb/Images/Documentation/fireworks_studio.png?sv=2026-02-06&spr=https&st=2026-10-29T18%3A58%3A07Z&se=2026-10-29T19%3A58%3A07Z&sr=c&sp=r&sig=PEq%2BYKYrNHc2CnCkllIhVoK0wWPClR1ssiCDStc%2FSA4%3D)

---

## Step 2: Capture your Mobile app screens

Capture screens as a one-time step using the Whatfix Creator widget. The widget enables you to capture app screens as screenshots and saves them to your Whatfix Mobile Dashboard to create in-app guidance content. It also enables you to preview your projects and test them before publishing.

For more information on how to capture and add app screens, see [Capture Mobile app screens](/mobile/docs/capture-your-app-screen-using-new-screen-capture-experience).

Use the following steps to add a screen:

1. On the **Identify Screen** window, click **+ Add screen**. ![new_add_screen.png](https://cdn.document360.io/a268766e-d74d-4619-9613-e2472f809ffb/Images/Documentation/new_add_screen.png?sv=2026-02-06&spr=https&st=2026-10-29T18%3A58%3A07Z&se=2026-10-29T19%3A58%3A07Z&sr=c&sp=r&sig=PEq%2BYKYrNHc2CnCkllIhVoK0wWPClR1ssiCDStc%2FSA4%3D)
2. Select the screen where you want to create the content and click **Add Screen**. ![select_screen_add_screen.png](https://cdn.document360.io/a268766e-d74d-4619-9613-e2472f809ffb/Images/Documentation/select_screen_add_screen.png?sv=2026-02-06&spr=https&st=2026-10-29T18%3A58%3A07Z&se=2026-10-29T19%3A58%3A07Z&sr=c&sp=r&sig=PEq%2BYKYrNHc2CnCkllIhVoK0wWPClR1ssiCDStc%2FSA4%3D)

## Step 3: Identify the screen

After capturing the screen, you need to identify the unique elements on the screen and tag the screen so that the in-app experience you create appears on the right page.

1. To identify the unique elements on the screen and to tag the right screen, click **+ Add Identifier**. ![Mobile_Add_Identifier.png](https://cdn.document360.io/a268766e-d74d-4619-9613-e2472f809ffb/Images/Documentation/Mobile_Add_Identifier.png?sv=2026-02-06&spr=https&st=2026-10-29T18%3A58%3A07Z&se=2026-10-29T19%3A58%3A07Z&sr=c&sp=r&sig=PEq%2BYKYrNHc2CnCkllIhVoK0wWPClR1ssiCDStc%2FSA4%3D)
2. Click the desired element on the page. ![Mobile_identifier_Home.png](https://cdn.document360.io/a268766e-d74d-4619-9613-e2472f809ffb/Images/Documentation/Mobile_identifier_Home.png?sv=2026-02-06&spr=https&st=2026-10-29T18%3A58%3A07Z&se=2026-10-29T19%3A58%3A07Z&sr=c&sp=r&sig=PEq%2BYKYrNHc2CnCkllIhVoK0wWPClR1ssiCDStc%2FSA4%3D)

Example: If you want to add the Fireworks effect on the Home screen, you can choose the title Fireworks, which can uniquely identify the screen and show the Fireworks effect on the correct screen.

          Info

          

Click **Add More** to select more elements on the page and then repeat step 2. ![add_more_identifier](https://cdn.document360.io/a268766e-d74d-4619-9613-e2472f809ffb/Images/Documentation/add_more_identifier.png?sv=2026-02-06&spr=https&st=2026-10-29T18%3A58%3A07Z&se=2026-10-29T19%3A58%3A07Z&sr=c&sp=r&sig=PEq%2BYKYrNHc2CnCkllIhVoK0wWPClR1ssiCDStc%2FSA4%3D)

## Step 4: Design the effect

Use the following steps to design your Fireworks effect:

1. On the Whatfix Mobile Studio, in the navigation panel, select **Design**. ![element_design ](https://cdn.document360.io/a268766e-d74d-4619-9613-e2472f809ffb/Images/Documentation/element_design%20.png?sv=2026-02-06&spr=https&st=2026-10-29T18%3A58%3A07Z&se=2026-10-29T19%3A58%3A07Z&sr=c&sp=r&sig=PEq%2BYKYrNHc2CnCkllIhVoK0wWPClR1ssiCDStc%2FSA4%3D)

          Info

          

The Fireworks effect appears on the Studio.

 ![](https://cdn.document360.io/a268766e-d74d-4619-9613-e2472f809ffb/Images/Documentation/Mobile_Fireworks.gif?sv=2026-02-06&spr=https&st=2026-10-29T18%3A58%3A07Z&se=2026-10-29T19%3A58%3A07Z&sr=c&sp=r&sig=PEq%2BYKYrNHc2CnCkllIhVoK0wWPClR1ssiCDStc%2FSA4%3D)
2. Configure the following options for the Fireworks effect: ![fireworks_config](https://cdn.document360.io/a268766e-d74d-4619-9613-e2472f809ffb/Images/Documentation/fireworks_config.png?sv=2026-02-06&spr=https&st=2026-10-29T18%3A58%3A07Z&se=2026-10-29T19%3A58%3A07Z&sr=c&sp=r&sig=PEq%2BYKYrNHc2CnCkllIhVoK0wWPClR1ssiCDStc%2FSA4%3D)
  - **AUTO DISMISS:** Enabling the **AUTO DISMISS** toggle helps you to automatically dismiss the Fireworks effect without your end users' intervention after a delay of a few seconds which you can set. ![auto_dismiss_snowfall](https://cdn.document360.io/a268766e-d74d-4619-9613-e2472f809ffb/Images/Documentation/auto_dismiss_snowfall.png?sv=2026-02-06&spr=https&st=2026-10-29T18%3A58%3A07Z&se=2026-10-29T19%3A58%3A07Z&sr=c&sp=r&sig=PEq%2BYKYrNHc2CnCkllIhVoK0wWPClR1ssiCDStc%2FSA4%3D)
  - **ELEMENT TRIGGER:** Set the following conditions to trigger the Fireworks effect:

**Screen detection - instant** makes the Fireworks appear instantly on the app's screen as soon as the user navigates to that screen. ![element_trigger_instant](https://cdn.document360.io/a268766e-d74d-4619-9613-e2472f809ffb/Images/Documentation/element_trigger_instant.png?sv=2026-02-06&spr=https&st=2026-10-29T18%3A58%3A07Z&se=2026-10-29T19%3A58%3A07Z&sr=c&sp=r&sig=PEq%2BYKYrNHc2CnCkllIhVoK0wWPClR1ssiCDStc%2FSA4%3D)

**Screen detection - After delay** makes the Fireworks effect appear on the app's screen after a delay. You can set the delay in seconds. ![screen_detection_delay](https://cdn.document360.io/a268766e-d74d-4619-9613-e2472f809ffb/Images/Documentation/screen_detection_delay.png?sv=2026-02-06&spr=https&st=2026-10-29T18%3A58%3A07Z&se=2026-10-29T19%3A58%3A07Z&sr=c&sp=r&sig=PEq%2BYKYrNHc2CnCkllIhVoK0wWPClR1ssiCDStc%2FSA4%3D)
  - **ELEMENT TERMINATION:** Set the following conditions to terminate the Fireworks effect: **Never**: When you set this condition, the Fireworks show up every time your user opens the app and navigates to the particular app screen. ![element_termination_never](https://cdn.document360.io/a268766e-d74d-4619-9613-e2472f809ffb/Images/Documentation/element_termination_never.png?sv=2026-02-06&spr=https&st=2026-10-29T18%3A58%3A07Z&se=2026-10-29T19%3A58%3A07Z&sr=c&sp=r&sig=PEq%2BYKYrNHc2CnCkllIhVoK0wWPClR1ssiCDStc%2FSA4%3D)

**After 'n' sessions**: When you set this condition, you can make the Fireworks disappear from the app's screen after your end user has closed the app, opened it, and then navigated to the particular app screen for a set number of times. Set the number of sessions after which the Fireworks must stop appearing. ![element_termination_n_sessions](https://cdn.document360.io/a268766e-d74d-4619-9613-e2472f809ffb/Images/Documentation/element_termination_n_sessions.png?sv=2026-02-06&spr=https&st=2026-10-29T18%3A58%3A07Z&se=2026-10-29T19%3A58%3A07Z&sr=c&sp=r&sig=PEq%2BYKYrNHc2CnCkllIhVoK0wWPClR1ssiCDStc%2FSA4%3D)
  - A session is defined as every time your end user closes the app and opens it again.

The Fireworks you add is automatically saved.

          Info

          

- [Preview projects on a device](/mobile/docs/preview-projects-on-a-device) before making it live for your end users.
- After creating and designing your Project, click **Publish** to make it live for your end users. For more information on publishing Whatfix Mobile content, see [Publish Whatfix Mobile content](https://support.whatfix.com/mobile/docs/publishing-whatfix-content).