--- 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?sv=2026-02-06&spr=https&st=2026-11-12T07%3A41%3A57Z&se=2026-11-12T08%3A41%3A57Z&sr=c&sp=r&sig=tWrCt139jv63goPhyfURcGooVmUFqCl9nF%2F%2BeFih1w0%3D) 2. Click **Flow**. ![Click Flows ](https://cdn.document360.io/a268766e-d74d-4619-9613-e2472f809ffb/Images/Documentation/Studio_Click_Flows.png?sv=2026-02-06&spr=https&st=2026-11-12T07%3A41%3A57Z&se=2026-11-12T08%3A41%3A57Z&sr=c&sp=r&sig=tWrCt139jv63goPhyfURcGooVmUFqCl9nF%2F%2BeFih1w0%3D) 3. In the Studio toolbar, select a capture mode. ![std_toolbar_capture_modes](https://cdn.document360.io/a268766e-d74d-4619-9613-e2472f809ffb/Images/Documentation/std_toolbar_capture_modes.png?sv=2026-02-06&spr=https&st=2026-11-12T07%3A41%3A57Z&se=2026-11-12T08%3A41%3A57Z&sr=c&sp=r&sig=tWrCt139jv63goPhyfURcGooVmUFqCl9nF%2F%2BeFih1w0%3D) Note: - **Free floating step** 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 application page. ![Create_Flow_Leads_Click](https://cdn.document360.io/a268766e-d74d-4619-9613-e2472f809ffb/Images/Documentation/Create_Flow_Leads_Click.png?sv=2026-02-06&spr=https&st=2026-11-12T07%3A41%3A57Z&se=2026-11-12T08%3A41%3A57Z&sr=c&sp=r&sig=tWrCt139jv63goPhyfURcGooVmUFqCl9nF%2F%2BeFih1w0%3D) 2. After you have captured the required steps, click **Done**. ![std_toolbar_done1](https://cdn.document360.io/a268766e-d74d-4619-9613-e2472f809ffb/Images/Documentation/std_toolbar_done%281%29.png?sv=2026-02-06&spr=https&st=2026-11-12T07%3A41%3A57Z&se=2026-11-12T08%3A41%3A57Z&sr=c&sp=r&sig=tWrCt139jv63goPhyfURcGooVmUFqCl9nF%2F%2BeFih1w0%3D) 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?sv=2026-02-06&spr=https&st=2026-11-12T07%3A41%3A57Z&se=2026-11-12T08%3A41%3A57Z&sr=c&sp=r&sig=tWrCt139jv63goPhyfURcGooVmUFqCl9nF%2F%2BeFih1w0%3D) Info: - Whatfix enables you to add a Display Name for your end users. Use the Content Name for internal tracking, such as region, role, module, or release codes. Users then see the Display Name in the Self Help, Task List widgets, Hub, Flow Automation Popups and Exports. For more information, see [Add a Display Name to Whatfix Content](https://support.whatfix.com/docs/add-a-dislay-name-to-whatfix-content). ![The image shows the Flow name and the Display Name field while creating a flow on the Studio.](https://cdn.document360.io/a268766e-d74d-4619-9613-e2472f809ffb/Images/Documentation/FlowDisplayName.png?sv=2026-02-06&spr=https&st=2026-11-12T07%3A41%3A57Z&se=2026-11-12T08%3A41%3A57Z&sr=c&sp=r&sig=tWrCt139jv63goPhyfURcGooVmUFqCl9nF%2F%2BeFih1w0%3D) - To capture additional steps, click **Add Step**. ![Click Add Step](https://cdn.document360.io/a268766e-d74d-4619-9613-e2472f809ffb/Images/Documentation/Click%20Add%20Step.png?sv=2026-02-06&spr=https&st=2026-11-12T07%3A41%3A57Z&se=2026-11-12T08%3A41%3A57Z&sr=c&sp=r&sig=tWrCt139jv63goPhyfURcGooVmUFqCl9nF%2F%2BeFih1w0%3D) 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?sv=2026-02-06&spr=https&st=2026-11-12T07%3A41%3A57Z&se=2026-11-12T08%3A41%3A57Z&sr=c&sp=r&sig=tWrCt139jv63goPhyfURcGooVmUFqCl9nF%2F%2BeFih1w0%3D) 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?sv=2026-02-06&spr=https&st=2026-11-12T07%3A41%3A57Z&se=2026-11-12T08%3A41%3A57Z&sr=c&sp=r&sig=tWrCt139jv63goPhyfURcGooVmUFqCl9nF%2F%2BeFih1w0%3D) 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?sv=2026-02-06&spr=https&st=2026-11-12T07%3A41%3A57Z&se=2026-11-12T08%3A41%3A57Z&sr=c&sp=r&sig=tWrCt139jv63goPhyfURcGooVmUFqCl9nF%2F%2BeFih1w0%3D) 4. Click **Insert**. ![DB_Flowstep_audioURL.png](https://cdn.document360.io/a268766e-d74d-4619-9613-e2472f809ffb/Images/Documentation/DB_Flowstep_audioURL.png?sv=2026-02-06&spr=https&st=2026-11-12T07%3A41%3A57Z&se=2026-11-12T08%3A41%3A57Z&sr=c&sp=r&sig=tWrCt139jv63goPhyfURcGooVmUFqCl9nF%2F%2BeFih1w0%3D) 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?sv=2026-02-06&spr=https&st=2026-11-12T07%3A41%3A57Z&se=2026-11-12T08%3A41%3A57Z&sr=c&sp=r&sig=tWrCt139jv63goPhyfURcGooVmUFqCl9nF%2F%2BeFih1w0%3D) 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?sv=2026-02-06&spr=https&st=2026-11-12T07%3A41%3A57Z&se=2026-11-12T08%3A41%3A57Z&sr=c&sp=r&sig=tWrCt139jv63goPhyfURcGooVmUFqCl9nF%2F%2BeFih1w0%3D) 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?sv=2026-02-06&spr=https&st=2026-11-12T07%3A41%3A57Z&se=2026-11-12T08%3A41%3A57Z&sr=c&sp=r&sig=tWrCt139jv63goPhyfURcGooVmUFqCl9nF%2F%2BeFih1w0%3D) 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?sv=2026-02-06&spr=https&st=2026-11-12T07%3A41%3A57Z&se=2026-11-12T08%3A41%3A57Z&sr=c&sp=r&sig=tWrCt139jv63goPhyfURcGooVmUFqCl9nF%2F%2BeFih1w0%3D) 3. Click **Save Step**. ![Click_Save_step](https://cdn.document360.io/a268766e-d74d-4619-9613-e2472f809ffb/Images/Documentation/Click_Save_step.png?sv=2026-02-06&spr=https&st=2026-11-12T07%3A41%3A57Z&se=2026-11-12T08%3A41%3A57Z&sr=c&sp=r&sig=tWrCt139jv63goPhyfURcGooVmUFqCl9nF%2F%2BeFih1w0%3D) > [!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?sv=2026-02-06&spr=https&st=2026-11-12T07%3A41%3A57Z&se=2026-11-12T08%3A41%3A57Z&sr=c&sp=r&sig=tWrCt139jv63goPhyfURcGooVmUFqCl9nF%2F%2BeFih1w0%3D) 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?sv=2026-02-06&spr=https&st=2026-11-12T07%3A41%3A57Z&se=2026-11-12T08%3A41%3A57Z&sr=c&sp=r&sig=tWrCt139jv63goPhyfURcGooVmUFqCl9nF%2F%2BeFih1w0%3D) > [!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?sv=2026-02-06&spr=https&st=2026-11-12T07%3A41%3A57Z&se=2026-11-12T08%3A41%3A57Z&sr=c&sp=r&sig=tWrCt139jv63goPhyfURcGooVmUFqCl9nF%2F%2BeFih1w0%3D) > > 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?sv=2026-02-06&spr=https&st=2026-11-12T07%3A41%3A57Z&se=2026-11-12T08%3A41%3A57Z&sr=c&sp=r&sig=tWrCt139jv63goPhyfURcGooVmUFqCl9nF%2F%2BeFih1w0%3D) > > 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?sv=2026-02-06&spr=https&st=2026-11-12T07%3A41%3A57Z&se=2026-11-12T08%3A41%3A57Z&sr=c&sp=r&sig=tWrCt139jv63goPhyfURcGooVmUFqCl9nF%2F%2BeFih1w0%3D) > > 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?sv=2026-02-06&spr=https&st=2026-11-12T07%3A41%3A57Z&se=2026-11-12T08%3A41%3A57Z&sr=c&sp=r&sig=tWrCt139jv63goPhyfURcGooVmUFqCl9nF%2F%2BeFih1w0%3D)