--- title: "Insert an Audio Clip in a Flow Step" slug: "inserting-an-audio-clip-in-a-flow-step" updated: 2026-08-11T08:05:41Z published: 2026-08-11T08:05:41Z canonical: "support.whatfix.com/inserting-an-audio-clip-in-a-flow-step" --- > ## 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. > [!WARNING] > Note: > > Google Drive no longer supports file hosting due to updated Google policies. > [!NOTE] > 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**. ![Click Flows ](https://cdn.document360.io/a268766e-d74d-4619-9613-e2472f809ffb/Images/Documentation/Studio_Click_Flows.png) 3. Enter the name of the Flow. ![Editor_flow_name6](https://cdn.document360.io/a268766e-d74d-4619-9613-e2472f809ffb/Images/Documentation/Editor_flow_name%286%29.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. In the Studio toolbar, select a capture mode. ![image](https://cdn.document360.io/a268766e-d74d-4619-9613-e2472f809ffb/Images/Documentation/image-D9HF0KC1.png) Note: - 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. - For more information on different capture modes, see [Quick Capture Modes](https://support.whatfix.com/docs/what-are-quick-capture-flows#quick-capture-modes). 1. Click the desired elements 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) > [!WARNING] > 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) > [!WARNING] > 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)