--- title: "Add Audio to your app screen" slug: "add-audio-to-your-app-screen" updated: 2026-08-06T15:35:43Z published: 2026-08-06T15:35:43Z canonical: "support.whatfix.com/add-audio-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 Audio to your app screen Add a congratulatory audio message to your gaming app when your end users complete a mission in the game. Use the following steps to add audio to your app screens: [Step 1: Create an Audio project](/mobile/docs/add-audio-to-your-app-screen#create-audio) [Step 2: Capture your Mobile app screens](/mobile/docs/add-audio-to-your-app-screen#connect-capture) [Step 3: Identify the screen](/mobile/docs/add-audio-to-your-app-screen#identify-screen) [Step 4: Design the Audio](/mobile/docs/add-audio-to-your-app-screen#design-audio) ## Step 1: Create an Audio 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%3A57%3A57Z&se=2026-10-29T19%3A57%3A57Z&sr=c&sp=r&sig=Q7MpCLxlJO0C5L22KEYso2Mbda36kRTUDmg7JSK%2FKLg%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%3A57%3A57Z&se=2026-10-29T19%3A57%3A57Z&sr=c&sp=r&sig=Q7MpCLxlJO0C5L22KEYso2Mbda36kRTUDmg7JSK%2FKLg%3D) 1. In the **DELIGHT** section, click **Audio**. ![delight_audio](https://cdn.document360.io/a268766e-d74d-4619-9613-e2472f809ffb/Images/Documentation/delight_audio.png?sv=2026-02-06&spr=https&st=2026-10-29T18%3A57%3A57Z&se=2026-10-29T19%3A57%3A57Z&sr=c&sp=r&sig=Q7MpCLxlJO0C5L22KEYso2Mbda36kRTUDmg7JSK%2FKLg%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%3A57%3A57Z&se=2026-10-29T19%3A57%3A57Z&sr=c&sp=r&sig=Q7MpCLxlJO0C5L22KEYso2Mbda36kRTUDmg7JSK%2FKLg%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%3A57%3A57Z&se=2026-10-29T19%3A57%3A57Z&sr=c&sp=r&sig=Q7MpCLxlJO0C5L22KEYso2Mbda36kRTUDmg7JSK%2FKLg%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%3A57%3A57Z&se=2026-10-29T19%3A57%3A57Z&sr=c&sp=r&sig=Q7MpCLxlJO0C5L22KEYso2Mbda36kRTUDmg7JSK%2FKLg%3D) 1. Your Audio project gets created and you are redirected to the Whatfix Mobile Studio. ![audio_](https://cdn.document360.io/a268766e-d74d-4619-9613-e2472f809ffb/Images/Documentation/audio_.png?sv=2026-02-06&spr=https&st=2026-10-29T18%3A57%3A57Z&se=2026-10-29T19%3A57%3A57Z&sr=c&sp=r&sig=Q7MpCLxlJO0C5L22KEYso2Mbda36kRTUDmg7JSK%2FKLg%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%3A57%3A57Z&se=2026-10-29T19%3A57%3A57Z&sr=c&sp=r&sig=Q7MpCLxlJO0C5L22KEYso2Mbda36kRTUDmg7JSK%2FKLg%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%3A57%3A57Z&se=2026-10-29T19%3A57%3A57Z&sr=c&sp=r&sig=Q7MpCLxlJO0C5L22KEYso2Mbda36kRTUDmg7JSK%2FKLg%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%3A57%3A57Z&se=2026-10-29T19%3A57%3A57Z&sr=c&sp=r&sig=Q7MpCLxlJO0C5L22KEYso2Mbda36kRTUDmg7JSK%2FKLg%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%3A57%3A57Z&se=2026-10-29T19%3A57%3A57Z&sr=c&sp=r&sig=Q7MpCLxlJO0C5L22KEYso2Mbda36kRTUDmg7JSK%2FKLg%3D) Example: If you want to add Audio on the Home screen, choose the title Home, which can uniquely identify the screen and play the Audio 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%3A57%3A57Z&se=2026-10-29T19%3A57%3A57Z&sr=c&sp=r&sig=Q7MpCLxlJO0C5L22KEYso2Mbda36kRTUDmg7JSK%2FKLg%3D) ## Step 4: Design the Audio Use the following steps to design the Audio: 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%3A57%3A57Z&se=2026-10-29T19%3A57%3A57Z&sr=c&sp=r&sig=Q7MpCLxlJO0C5L22KEYso2Mbda36kRTUDmg7JSK%2FKLg%3D) 2. Configure the following options for your Audio: ![audio_config](https://cdn.document360.io/a268766e-d74d-4619-9613-e2472f809ffb/Images/Documentation/audio_config.png?sv=2026-02-06&spr=https&st=2026-10-29T18%3A57%3A57Z&se=2026-10-29T19%3A57%3A57Z&sr=c&sp=r&sig=Q7MpCLxlJO0C5L22KEYso2Mbda36kRTUDmg7JSK%2FKLg%3D) - **AUTO DISMISS:** Enabling the **AUTO DISMISS** toggle enables you to automatically dismiss the Audio 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%3A57%3A57Z&se=2026-10-29T19%3A57%3A57Z&sr=c&sp=r&sig=Q7MpCLxlJO0C5L22KEYso2Mbda36kRTUDmg7JSK%2FKLg%3D) - **ELEMENT TRIGGER:** Set the following conditions to trigger the Audio: **Screen detection - instant** plays the Audio 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%3A57%3A57Z&se=2026-10-29T19%3A57%3A57Z&sr=c&sp=r&sig=Q7MpCLxlJO0C5L22KEYso2Mbda36kRTUDmg7JSK%2FKLg%3D) **Screen detection - After delay** plays the Audio on the app's screen after a delay. 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%3A57%3A57Z&se=2026-10-29T19%3A57%3A57Z&sr=c&sp=r&sig=Q7MpCLxlJO0C5L22KEYso2Mbda36kRTUDmg7JSK%2FKLg%3D) - **ELEMENT TERMINATION:** Set the following conditions to terminate the Audio: **Never**: When you set this condition, the Audio plays 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%3A57%3A57Z&se=2026-10-29T19%3A57%3A57Z&sr=c&sp=r&sig=Q7MpCLxlJO0C5L22KEYso2Mbda36kRTUDmg7JSK%2FKLg%3D) **After 'n' sessions**: When you set this condition, make the Audio stop playing 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 Audio must stop playing. ![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%3A57%3A57Z&se=2026-10-29T19%3A57%3A57Z&sr=c&sp=r&sig=Q7MpCLxlJO0C5L22KEYso2Mbda36kRTUDmg7JSK%2FKLg%3D) - A session is defined as every time your end user closes the app and opens it again. The Audio 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).