Add Fireworks to your app screen

The Fireworks effect can be added when your end users navigate 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
Step 2: Connect your mobile app and capture the app screen
Step 3: Identify the screen
Step 4: Design the effect

Step 1: Create a Fireworks project

1. On the Whatfix Mobile Dashboard, select the App on which you want to create a Fireworks project.
   

2. To create a new project, click New.
   

3. In the DELIGHT section, click Fireworks.
   

4. Enter a name for your project.
   

5. Enter the App Version or select the App Version using the dropdown.
   

6. Click Create.
   

Step 2: Connect your mobile app and capture the app screen

You need to connect your mobile app to the Whatfix Mobile Studio before you can start creating your in-app experience. This can be done by scanning the QR code available on the Whatfix Mobile Studio using your mobile app integrated to Whatfix Mobile.

1. Open your app integrated to Whatfix Mobile on your mobile phone and then enable the Creator mode.

2. Navigate to the Whatfix Mobile Studio on your browser and scan the QR code using your mobile app.
   

3. To capture the screen on which you want to create your Fireworks, click Capture.
   

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 to tag the right screen, click Add Identifier.
   

2. Click the desired element on the page.
   

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.

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.
   

your title goes here

The Fireworks effect appears on the Studio.

2. You can configure the following options for the Fireworks effect,
   

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

• ELEMENT TRIGGER: You can 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
  

  Screen detection - After delay makes the Fireworks effect appear on the app's screen after a delay. You can set the delay in seconds.
  

• ELEMENT TERMINATION: You can 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
  

  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. You can set the number of sessions after which the Fireworks must stop appearing.
  

• A session is defined as every time your end user closes the app and opens it again.

The Fireworks you add is automatically saved.