--- title: "Insert an Audio Clip in a Flow Step" slug: "inserting-an-audio-clip-in-a-flow-step" updated: 2025-12-01T16:35:22Z published: 2026-02-05T14:19:55Z --- > ## 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. # Insert an Audio Clip in a Flow Step ## Overview Whatfix enables you to add audio to a Flow step where you need to provide detailed explanations for the selected element. Use audio in Flows to explain an action that your users need to perform on the application. --- ## Prerequisite If you want to insert any audio clip in a Flow step, you must first host the audio on an online file-hosting website such as Dropbox or OneDrive. Note: Google Drive no longer supports file hosting due to updated Google policies. Info: The audio file formats supported by Whatfix are .mp3, .AAC, .m4a, and .ogg. --- ## Insert an audio clip in a Flow Step Use the following steps to insert an audio clip in a Flow step: 1. Log in to the application where you want to create content, and then launch the **Whatfix Studio**. ![CLM_editor plug in2](https://cdn.document360.io/a268766e-d74d-4619-9613-e2472f809ffb/Images/Documentation/CLM_editor%20plug%20in%282%29.png) 2. Click **Flow**. ![Studio_Click_Flow](https://cdn.document360.io/a268766e-d74d-4619-9613-e2472f809ffb/Images/Documentation/Click_Flow%281%29.png) 3. Enter the name of the Flow as you want it displayed to the users. ![Studio_Enter_Flow_Name](https://cdn.document360.io/a268766e-d74d-4619-9613-e2472f809ffb/Images/Documentation/Enter_Flow_Name.png) 4. Click **Add Step**. ![Studio_Click_Add_Step](https://cdn.document360.io/a268766e-d74d-4619-9613-e2472f809ffb/Images/Documentation/Click_Add_Step.png) 5. Under **Choose step type**, select the Flow step type. ![Switch over to the Flow step types from the dialog box that appears ](https://cdn.document360.io/a268766e-d74d-4619-9613-e2472f809ffb/Images/Documentation/Studio_Flow_Step%20Types_Switch.png) Note: - With the Flow enhancement feature, you have the option to select two types of Flow steps, and not just element latching Flows. A dialog box appears on the application to highlight the two types of Flows. Under **Choose step type**, select a Flow step based on your requirements: either **Attached to element** or **Free-floating**. ![Studio switcher enables you to switch between 2 flow types: element-attached flow types and free-floating flow types](https://cdn.document360.io/a268766e-d74d-4619-9613-e2472f809ffb/Images/Documentation/Studio_Switcher_Flow_Types.png) | Attached to element | Free-floating | | --- | --- | | When you select this type of Flow step, it remains attached to an element on your application. | When you select this type of Flow step, it remains flexibly positioned devoid of any element attachment. | - You also have the option to select a default template by clicking **Set as Default** for all the subsequent steps in a Flow. If you change the default step at an enterprise (ENT) level, it appears the same for all the users using that ENT. - For more information, see [Free-floating Flows](/studio/docs/free-floating-flows) and [Create a Free-floating Flow step](/studio/docs/create-free-floating-flows). - Free-floating Flows is currently Beta. Contact [support@whatfix.com](http://mailto:support@whatfix.com?subject=Enable%20Free-floating%20Flow%20step%20&body=Hi%0A%0AI%20would%20like%20to%20explore%20the%20new%20Free-floating%20Flow%20step%20type.%20Kindly%20enable%20it%20on%20my%20ENT%0A%0AThanks) for more information. 1. Click the desired element on the page that the user needs to select. ![Create_Flow_Leads_Click](https://cdn.document360.io/a268766e-d74d-4619-9613-e2472f809ffb/Images/Documentation/Create_Flow_Leads_Click.png) 1. Review or edit the auto-generated action text on the step. ![SF_Click_Leads](https://cdn.document360.io/a268766e-d74d-4619-9613-e2472f809ffb/Images/Documentation/SF_Click_Leads.png) 2. Click the **Description** section of the tooltip and select the **Insert Audio** icon from the **Rich Text Editor**. ![Click_Insertaudio.png](https://cdn.document360.io/a268766e-d74d-4619-9613-e2472f809ffb/Images/Documentation/Click_Insertaudio.png) 3. Copy the audio URL from the online file sharing website and paste the URL. ![DB_FlowStep_CopyURL.png](https://cdn.document360.io/a268766e-d74d-4619-9613-e2472f809ffb/Images/Documentation/DB_FlowStep_CopyURL.png) 4. Click **Insert**. ![DB_Flowstep_audioURL.png](https://cdn.document360.io/a268766e-d74d-4619-9613-e2472f809ffb/Images/Documentation/DB_Flowstep_audioURL.png) 5. Under **Configurations**, expand **Appearance**. ![Change the appearance of the Flow steps ](https://cdn.document360.io/a268766e-d74d-4619-9613-e2472f809ffb/Images/Documentation/Studio_Flows_Configurations_Appearance.png) Make the following configurations: - Select a Tool tip theme from the available options. - Select the tip **Color** from the existing color palette or enter the hex code of the desired color. - Select the **Close (X) color** from the existing color palette or enter the hex code of the desired color. ![Choose_Flow_Theme.png](https://cdn.document360.io/a268766e-d74d-4619-9613-e2472f809ffb/Images/Documentation/Choose_Flow_Theme.png) 1. Expand **Position** and select the desired position of the tooltip. ![Choose_Position_Flow.png](https://cdn.document360.io/a268766e-d74d-4619-9613-e2472f809ffb/Images/Documentation/Choose_Position_Flow.png) 2. Under the **Step Completion Rules** section, select the desired rule. For more information on the Step Completion Rules, see [Define step completion rules](/studio/docs/defining-step-completion-rules) ![Define_step_completion rules.png](https://cdn.document360.io/a268766e-d74d-4619-9613-e2472f809ffb/Images/Documentation/Define_step_completion%20rules.png) 3. Click **Save Step**. ![Click_Save_step](https://cdn.document360.io/a268766e-d74d-4619-9613-e2472f809ffb/Images/Documentation/Click_Save_step.png) Note: Click **Preview** to preview the Flow during the Flow creation on Studio. The Flow opens in a new tab and displays the steps that are created on the application. ![Click_Previewflow](https://cdn.document360.io/a268766e-d74d-4619-9613-e2472f809ffb/Images/Documentation/Click_Previewflow.png) 1. Click **Add Step** to add the next step. ![Click Add Step](https://cdn.document360.io/a268766e-d74d-4619-9613-e2472f809ffb/Images/Documentation/Click%20Add%20Step.png) Note: [Display Rules](/studio/docs/visibility-and-display-rule-conditions-1) enable you to configure Flows to display the tooltip only when pre-determined conditions are met. Use the following steps to add Display Rules to Flow steps: a. Click **Advanced Options**. ![Click Advanced options on Flow steps ](https://cdn.document360.io/a268766e-d74d-4619-9613-e2472f809ffb/Images/Documentation/Studio_FlowSteps_Advancedoptions.png) b. Expand the **Display Rules** section and then click **Add Rule**. Display Rules enable you to configure Flows to display the tooltip only when pre-determined conditions are met. ![Add display rules to Flow steps under Advanced Options](https://cdn.document360.io/a268766e-d74d-4619-9613-e2472f809ffb/Images/Documentation/Studio_Flows_Advancedoptions_Display%20Rules.png) c. Set the desired conditions. For more information on the different conditions that can be used in Display Rules, see [Visibility and Display Rule Conditions](/studio/docs/visibility-and-display-rule-conditions-1) ![Add_Rule.png](https://cdn.document360.io/a268766e-d74d-4619-9613-e2472f809ffb/Images/Documentation/Add_Rule.png) d. Click **Add Rule** to add more conditions, if needed. 1. Click **Save Flow**. ![Click_Saveflow](https://cdn.document360.io/a268766e-d74d-4619-9613-e2472f809ffb/Images/Documentation/Click_Saveflow.png)