> ## Documentation Index
> Fetch the complete documentation index at: https://docs.navattic.com/llms.txt
> Use this file to discover all available pages before exploring further.

# Creating flows

> Demos are composed of step-by-step flows.

export const MediaCard = ({title = '', url, type = 'demo'}) => {
  const attributes = type === 'demo' ? {
    'data-navattic-open': url,
    'data-navattic-title': title
  } : {
    'data-video': url
  };
  return <div {...attributes} className="hidden w-auto cursor-pointer overflow-hidden rounded-lg border border-gray-200 shadow-sm md:inline-block dark:border-gray-700">
  <div className="flex items-center gap-3 bg-white px-3 py-2 dark:bg-gray-800">
    <div className={`flex h-7 w-7 items-center justify-center rounded-md ${type === 'video' ? 'bg-blue-100 dark:bg-blue-900' : 'bg-orange-100 dark:bg-orange-900'}`} style={{
    backgroundColor: type === 'video' ? 'var(--video-bg)' : 'var(--demo-bg)'
  }}>
      <Icon icon={type === 'video' ? 'circle-play' : 'square-mouse-pointer'} color={type === 'video' ? 'var(--video-icon)' : 'var(--demo-icon)'} />
    </div>
    <div>
      <div className="text-sm font-medium text-gray-900 dark:text-gray-100">
        {type === 'video' ? 'Watch video' : 'Try a demo'}
      </div>
      <div className="text-sm text-gray-500 dark:text-gray-400">{title}</div>
    </div>
  </div>
  <style jsx>{`
    :root {
      --video-bg: #dbeafe;
      --video-icon: #2563eb;
      --demo-bg: #ffedd5;
      --demo-icon: #ea580c;
    }
    :global(.dark) {
      --video-bg: #1e3a8a;
      --video-icon: #60a5fa;
      --demo-bg: #7c2d12;
      --demo-icon: #fb923c;
    }
  `}</style>
</div>;
};

<Frame>
  <img className="overflow-hidden rounded-xl border" src="https://mintcdn.com/navattic-app/nBcURPbxfeqKXMDI/images/demo-builder.png?fit=max&auto=format&n=nBcURPbxfeqKXMDI&q=85&s=ab478b1172a68319120400615e0b2a52" alt="Demo builder" width="2912" height="1600" data-path="images/demo-builder.png" />
</Frame>

A flow is a sequence of steps within a demo, a single guided path a viewer clicks through, built from captures of your product. A demo can contain multiple flows (for example, different feature paths or personas), and flows can be reused, duplicated, or combined into share links.

Top-performing flows are concise (8-15 steps) and include one or more conversion opportunities. Before building, consider:

1. Is your goal to create a high-level overview or to showcase a detailed portion of your product?
2. How do you want users to interact with your product during the demo? (for example, click a button, type text, or explore a dashboard)
3. This [storyboard template](https://docs.google.com/spreadsheets/d/1-TUqe5KsVgxMtUxopdXq-2r6bwhLix2TxwF0t3sKtmg/copy) may help plan the steps for your flow.

## Step Appearance

The Flow Builder contains different step types to help create an engaging demo. To change step types, click the description on your desired step and select an option from the right-hand menu that appears.

<Tabs>
  <Tab title="Modal">
    Best used for welcome or closing messages, a Modal is a dialog box that appears on top of your Capture. Modals include a button to help viewers move to the next step. Modals can be positioned in the center or corners of the screen and encourage the end user to explore on their own.

    **Custom Modal Position**

    To change the positioning of your Modal, select **Modal** > **Custom position**. You can then select where you would like the modal to appear on the screen.
  </Tab>

  <Tab title="Tooltip">
    Best used to promote interactivity with your product, a Tooltip is small dialog box that anchors to a specific onscreen element. Clicking the selected element will automatically advance users to the next step.

    Tooltips can be positioned Above/Below/Right/Left of the selected element and combined with a backdrop (e.g., a light shadow on unselected elements) to best highlight your selected element.

    ### Anchor your Tooltip

    After adding the capture to your step, click **Select element** > Use your mouse to select an element > Use arrows to span element > **Save anchor.**

    ### Custom Tooltip Position

    To change the positioning of your Tooltip, open the position dropdown in the step toolbar. Select where the Tooltip should appear (Above, Below, Left, or Right) and use the fit-mode options in the same dropdown to control placement behavior when space is limited.

    <Tip>
      Use the fit-mode options to control how the Tooltip behaves when its selected position doesn't have enough space:

      * **Best-fit**: Default. The Tooltip tries all other sides (top, bottom, left, right) to find the best available space and stay on screen.
      * **Main axis**: The Tooltip shifts along the main axis (the direction it is placed) to stay on screen without flipping to the opposite side.
      * **Don't Flip**: Prevents the Tooltip from moving from its selected position, even if it is cut off at the screen edge.
    </Tip>

    ### Add a Backdrop with your Tooltip

    Adding a backdrop with your Tooltip can help highlight important elements, even on a smaller mobile screen. To add a backdrop open the **Step Settings** > **Tooltip**> toggle on **Backdrop** > select **Light, Medium** or **Heavy**

    <img src="https://mintcdn.com/navattic-app/eD69r1FtqxHvjQao/images/creating-flows-3.png?fit=max&auto=format&n=eD69r1FtqxHvjQao&q=85&s=cacf7d76da2326a50a27dc70daba961b" alt="" width="1002" height="286" data-path="images/creating-flows-3.png" />

    ### Customize Tooltip Width

    To customize the tooltip width, you can resize the tooltip directly in the flow builder by clicking and dragging the edges of the tooltip.

    You can also set default widths by going to **Themes** > Select **Theme** > **Tooltip** > Use the arrows to set the Width for **Small**, **Medium** and **Large** Tooltips. You can also edit the tooltip pointer size here.

    Once you have set your custom tooltip widths, go to your Product Demo > open the **Step Settings** > toggle on **Custom dimensions** > Select **Small**, **Medium**, or **Large.**

    <img src="https://mintcdn.com/navattic-app/eD69r1FtqxHvjQao/images/creating-flows-13.png?fit=max&auto=format&n=eD69r1FtqxHvjQao&q=85&s=fd7c26c152ba5cb688651a1e09596854" size="60" width="784" height="246" position="center" caption="Set Custom tooltip width in demo" alt={true} data-path="images/creating-flows-13.png" />

    ### Customize Tooltip Height

    To set a custom height for your Tooltip, open the **Step Settings** > toggle on **Custom dimensions** > Select **Set specific height.**

    ### Show Tooltip on Hover

    To make the Tooltip hidden by default and show it only when the Visitor hovers over the anchor element, open **Step Settings** > toggle on **Show on hover**.
  </Tab>

  <Tab title="Capture only">
    **Capture only** steps are used when you don't want any dialog boxes present on a particular step. These are combined with Triggers or Beacons to support the [live presentation / sales enablement use case](/use-cases/sales-enablement), but rarely used for marketing demos.

    *Demos with capture only steps are not recommended for sharing directly with viewers as they are a mostly unguided experience.*
  </Tab>

  <Tab title="Form">
    <CardGroup cols={2}>
      <Card title="Navattic Forms" icon="file-text" horizontal href="/tracking/forms">
        Capture and track visitor information through forms in your demos.
      </Card>
    </CardGroup>
  </Tab>

  <Tab title="Embed">
    <CardGroup cols={2}>
      <Card title="Embedded forms" icon="square-code" horizontal href="/tracking/forms/embedded">
        Integrate third-party forms and scheduling tools directly in your demo.
      </Card>
    </CardGroup>
  </Tab>

  <Tab title="Video">
    The **Video Step** feature lets you incorporate videos into your demo experiences. Teams use this to showcase customer case studies, highlight key use cases, and present branded content.

    To add a video step, select **Video** from the Step type dropdown in the Flow Builder. Once you've added a Video step, you can click **+ Select video** and select how you want to add your video:

    * **Upload**: Upload a video file directly from your computer.
    * **Insert Link**: Add a video from an external platform by pasting its URL. We support links from YouTube, Vimeo, Loom, Wistia, Vidyard, and Highspot.
    * **Record**: Create a new video right from Navattic using your webcam.
    * **Recently Used**: Quickly find and reuse a video you've already added to another demo.

    Uploaded videos, as well as videos from YouTube, Vimeo, or Wistia, use our themeable video player that includes playback analytics. This new player is on by default for uploaded videos and can be enabled for other providers under **Advanced** settings in the Video step. Once your demo is published, you can see playback analytics for your videos on the [demo analyze tab](/analyze#product-demo-analyze-tab).
  </Tab>
</Tabs>

## Interactive Elements

Interactive elements provide additional ways for users to interact with your product. To add one, navigate to the desired step in the flow builder and click **Element** at the bottom of the step.

Each interactive element has one or more **click actions** that determine what happens when a visitor engages with it. By default, the click action advances to the next step. To view or update click actions, open the element's settings panel. See the [Actions](#actions) reference below for a full list of available options.

<Tabs>
  <Tab title="Beacon">
    A Beacon is a small pulsing dot next to an element within your capture. A step may contain multiple Beacons.

    To add a Beacon, click **Element** at the bottom of the desired step and select **Beacon**. Select the onscreen element you would like to highlight. From the Beacon settings panel, you can assign a position, custom size, and click actions.

    Anchor highlights (a pulsing element border visual) can also be enabled from the Beacon settings panel. Anchor highlights can be used with or without Beacons. Anchor highlight opacity can be set at the Theme.
  </Tab>

  <Tab title="Input Trigger">
    **Text input** - this will require users to enter a string of text to progress. This is applicable to Web Captures with HTML text input fields (ex. a search bar) and contenteditable elements.

    To add a Trigger, locate your desired step and click **Element**. Select your Trigger Condition and Click Action(s).

    <Note>
      Tip: By default, Tooltips include a "progress on click" click action. This advances to the next step when the element is clicked. When using an Input Trigger and Tooltip on the same step, **deactivate** the Tooltip's **Progress on click** action by clicking **Advanced** under the Tooltip anchor > toggle off **Progress on click**.
    </Note>
  </Tab>

  <Tab title="Timer Trigger">
    **Timer trigger** - this will automatically trigger the click action after a specified amount of time.

    To add a Trigger, locate your desired step and click **Element**. Select your Trigger Condition and Click Action(s).
  </Tab>

  <Tab title="Element Trigger">
    **Element trigger** - this will wait until an element has been clicked to progress. This can be used on any Capture or step type.

    To add a Trigger, locate your desired step and click **Element**. Select your Trigger Condition and Click Action(s).
  </Tab>

  <Tab title="Voiceover">
    Enhance your demos with dynamic narration through various options, including reading from the individual steps, custom text-to-speech, or uploaded audio.

    To add voiceover to specific steps in your demo, in the Flow Builder click **Element** > **Voiceover**. From here, use the dropdown to select the option you want to use:

    1. **Read from text**: Add in custom text to read from (tip: use this with a [*Capture only step*](/build/flows))
    2. **Read from step**: Read directly from the text in the Modal or Tooltip
    3. **Upload audio**: Upload audio files from your local storage. Supported formats include MP3, M4A, WAV, and MIDI files.

    <Note>
      If you select **Read from text** or **Read from step**, use the dropdown to select your preferred Voice.
    </Note>
  </Tab>

  <Tab title="Avatar">
    Avatars can be added to your demos to provide a personalized touch. Configure avatars in your demo settings to display a virtual guide throughout the experience.

    Once you add an Avatar to a step follow these instructions:

    1. Choose your preferred method to create the video:
       * **AI Avatar**: Generate a video from text.
       * **Recording**: Record a new video of yourself directly in Navattic.
       * **Upload**: Select a pre-existing video.
    2. Customize the avatar's appearance and behavior:
       * **Position**: Place the bubble in various locations on the screen (e.g., bottom-left).
       * **Avatar Size**: Adjust the size of the bubble.
       * **Autoplay**: Have the video play automatically when the step loads.
       * **When video finishes**: Configure actions that trigger after the video completes, such as automatically advancing to the next step.
  </Tab>

  <Tab title="Zoom">
    Zoom magnifies part of the capture when a viewer reaches the step, so a small detail reads clearly without cropping the screen. On desktop screen sizes, viewers also get a zoom button in the bottom corner of the capture, opposite the checklist launcher, so they can zoom out and back in themselves.

    To add Zoom, click **Element** at the bottom of the desired step and select **Zoom**. A step can hold one Zoom, and Zoom is unavailable on Video steps.

    From the Zoom settings panel:

    * **Zoom mode**: **Auto** zooms in on the tooltip anchor, so the step needs to be a Tooltip step. **Manual** zooms in on an element you pick: click **Select anchor**, choose the element, and use **Reselect element** to change it later.
    * **Zoom level**: **Low**, **Medium**, or **High**, controlling how close the step zooms in on the target. The preview above the setting shows how close each level gets.
    * **Start zoomed out**: zooms out to the entire capture first, then back in on this step. Use it when the previous step was already zoomed in and you want the viewer to see where they are.

    To add or adjust Zoom on several steps at once, select the steps in the Flow Builder and use **Zoom** in the bulk edit menu.
  </Tab>

  <Tab title="Hover tooltip">
    A Hover tooltip appears only when a visitor hovers over a specific element on the capture. Use Hover tooltips to annotate complex screens without interrupting the main flow. Visitors see the extra context only when they explore that element.

    A single step can hold multiple Hover tooltips, so you can label several elements on the same screen without splitting them across multiple steps.

    To add a Hover tooltip, click **Element** at the bottom of the desired step and select **Hover tooltip**. Then click the element you want to anchor it to and enter the tooltip text.
  </Tab>
</Tabs>

<Expandable title="Actions">
  | **Click action** | **Description** |
  | :- | :- |
  | Continue | Takes the visitor to the next step in this flow. If it is the last step, uses the "Last step continue behavior" set in flow settings. |
  | Go back a step | Takes the visitor to the previous step in this flow. |
  | Jump to a step | Lets visitors jump to any step in the demo. |
  | Start a flow | Begins a new flow. Select from any flows within your workspace. |
  | Open Checklist | Prompts a Checklist to open at a specific point in the demo. |
  | Complete Flow | Launches a Checklist if one is present in the demo. |
  | Navigate to URL | Takes the visitor to an external link (for example, a Book Demo page). |
  | Mark as Converted | For reporting purposes only (not visible to visitors). Marks that a visitor engaged with a specific CTA. Automatically added to CTA buttons within [Escape View](https://navattic-website.navattic.com/ojbv0zpp). |
</Expandable>

## Editing Rich Text

The **Rich Text** editor allows you to format the content inside of the Dialog. You can add headings, lists, links, and use **Copilot** to improve writing, fix grammar, or adjust length.

<Tabs>
  <Tab title="Button">
    Add additional buttons to your Dialog to present additional options such as a CTA or an option to continue the demo.

    If you'd like to enable `Next` and `Back` buttons to every step, you can enable this within settings.
  </Tab>

  <Tab title="Image">
    Add images to your Dialog to provide visual context or to illustrate a point.
  </Tab>

  <Tab title="Video">
    Add videos inline in your Dialog.
  </Tab>

  <Tab title="Personalization">
    <CardGroup cols={2}>
      <Card title="Personalized demos" icon="user-pen" horizontal href="/demos/personalized">
        Make demos personalized by adding user and account properties.
      </Card>
    </CardGroup>
  </Tab>
</Tabs>

## Flow settings

From the flow builder, click the **gear icon** to open flow settings. Settings here apply to the current flow only.

<Tabs>
  <Tab title="Next + Back buttons">
    Enable **Next** and **Back** buttons on every step so viewers can navigate through the demo freely. You can also add buttons to individual steps using the **+** button in the step's dialog box, or add them from the [Button tab](#editing-rich-text) in the rich text editor.
  </Tab>

  <Tab title="Show step progress">
    Display a step progress indicator so viewers can see how far along they are in the flow.
  </Tab>

  <Tab title="Escape view">
    Show an **X** button on modals and tooltips so viewers can exit the demo at any step and land on a CTA. To customize the CTA that appears, edit the **Escape** step at the bottom of the flow builder.
  </Tab>

  <Tab title="Sound controls">
    Show mute and replay controls in the top-left corner of steps that include voiceover. This setting is only available when a flow has one or more voiceover steps.
  </Tab>

  <Tab title="Keyboard navigation">
    When keyboard navigation is enabled at the demo level (see [Demo settings](#demo-settings) below), you can disable it for a specific flow using the **Disable keyboard navigation** toggle.
  </Tab>

  <Tab title="Last step behavior">
    On the last step of a flow, configure what happens when a viewer reaches the end: continue to the next flow or expand a [checklist](/build/checklist).
  </Tab>
</Tabs>

## Demo settings

Demo settings apply across all flows in the demo. Access them from the same **gear icon** in the flow builder, under the **Demo settings** section.

### Keyboard navigation

Enable keyboard navigation to let viewers use the left and right arrow keys to move through the demo. This setting applies to all flows. Once enabled, you can disable it for individual flows using the per-flow [Keyboard navigation](#flow-settings) toggle.

### Presenting

The **Presenting** section contains settings for live presentation use cases. These require a Growth plan or above.

| Setting | Keyboard shortcut | Description |
| - | - | - |
| **Presenter mode** | Ctrl + P | Enter a focused presentation view. |
| **Presenter notes** | Ctrl + N | Show speaker notes visible only to the presenter. |
| **Hide/reveal beacons** | Ctrl + B | Toggle beacon visibility during a live presentation. |
| **Enable sandbox** | | Allow viewers to click through your live product within the demo. |

## Capturing multiple flows at once

During a capture session, you can record screens for multiple flows without stopping and restarting. Click **New flow** in the capture bar to start recording a new flow while the session is still active. Each flow gets its own name and captures.

When you're done, click **Complete session** to review all recorded flows and create them at once.

See [capturing multiple flows in one session](/build/captures/web#capturing-multiple-flows-in-one-session) in the web captures guide for full step-by-step instructions.

## FAQs

<AccordionGroup>
  <Accordion title="How do I add additional media files to a Flow?">
    You can add images, videos, and audio clips in Modals and Tooltips. From the Flow Builder, navigate to your desired step > click the dialog box > click "+" in the dialog header that appears > select and upload your media.

    Images and audio recordings will be uploaded directly from your device. Videos will require a link to a public video on Youtube, Vimeo, Loom, Wistia or Vidyard. We recommend keeping media attachments short to encourage users to explore your product on their own.
  </Accordion>

  <Accordion title="How should I end my Flow?">
    We recommend adding dual CTAs to the last step of your Flow. You may click "+" to add a Button to
    the Modal or Tooltip, or [hide Navigation
    Buttons](https://www.loom.com/share/dde828c52d4e4e4e820ddf64b2db5550) on the last step if needed.
    This will make it clear to your end user that they have completed the demo and encourage them to
    convert!
  </Accordion>

  <Accordion title="How do I use Navigation Buttons and CTA Buttons together?">
    To hide Navigation Buttons, click your step heading (ex. "Modal" or "Tooltip") > toggle on **Hide navigation** in the right-hand menu. Now that the navigation buttons aren't visible on this step, click the + button in the step and select **Button**. If you want to add more than one button, repeat this step.

    <img src="https://mintcdn.com/navattic-app/eD69r1FtqxHvjQao/images/creating-flows-20.png?fit=max&auto=format&n=eD69r1FtqxHvjQao&q=85&s=fe69070413fe3b17dc46a2f92519feac" size="50" width="394" height="392" position="center" caption="Hide navigation for one step" alt={true} data-path="images/creating-flows-20.png" />
  </Accordion>

  <Accordion title="How can I highlight multiple elements in a single step?">
    While each step can only include one Tooltip or Modal, **Beacons** can be used to highlight
    multiple elements at once. To do this, find your Step in the Flow Builder and simply [add
    Beacons](/flows#YRzY6) . We recommend including a Tooltip on this Step to communicate the intended
    workflow with users.
  </Accordion>

  <Accordion title="How do I fix a Tooltip that appears to run offscreen?">
    Tooltips may run off screen if the selected anchor element is too large and does not leave enough room to display the Tooltip fully. You can [change the tooltip position](/flows#2WZL5), [edit the tooltip height](/flows#AASb1) and/or [edit the tooltip width](/flows#_T4ZM) to try and get the Tooltip to fit.

    If these edits do not solve the problem, please select a smaller anchor element for this step.

    <img src="https://mintcdn.com/navattic-app/eD69r1FtqxHvjQao/images/creating-flows-9.png?fit=max&auto=format&n=eD69r1FtqxHvjQao&q=85&s=4661e929058f84f31bb9b215df89169e" alt="" width="2594" height="1386" data-path="images/creating-flows-9.png" />

    <img src="https://mintcdn.com/navattic-app/QNOHztjorxprHO7d/images/creating-flows-10.png?fit=max&auto=format&n=QNOHztjorxprHO7d&q=85&s=ceab08e7594a27b6b585bacf20725ec5" alt="" width="2592" height="1374" data-path="images/creating-flows-10.png" />
  </Accordion>

  <Accordion title="How do I replace Captures within a Flow?">
    From the Flow Builder, locate the step where you want to switch the Capture and click on **Replace Capture**. This will open a dropdown menu where you can select a Capture from the current Collection, Add to the Collection, or select Captures from a different Collection in your workspace. If the new Capture has similar elements to the old Capture, the anchor element will automatically be updated.

    <img src="https://mintcdn.com/navattic-app/eD69r1FtqxHvjQao/images/creating-flows-21.png?fit=max&auto=format&n=eD69r1FtqxHvjQao&q=85&s=495d1d1ba5b44016bb0eca7cff2e6ded" size="62" width="940" height="660" position="center" caption={true} data-path="images/creating-flows-21.png" />
  </Accordion>

  <Accordion title="How will the Escape View appear in a Flow?">
    Escape View will match the Escape step that can be found at the end of your flow builder. To turn on [Escape view](https://navattic-website.navattic.com/ojbv0zpp), click settings > toggle on Escape view.

    <img src="https://mintcdn.com/navattic-app/eD69r1FtqxHvjQao/images/creating-flows-22.png?fit=max&auto=format&n=eD69r1FtqxHvjQao&q=85&s=c1aad6d076d72e7af36a90fc2e480eec" size="50" width="396" height="190" position="center" caption={true} data-path="images/creating-flows-22.png" />
  </Accordion>

  <Accordion title="When should I include a Form in my demo?">
    Forms are used to gather user information such as name, email, company, and more. If the goal of your demo is to directly generate leads, a Form may be helpful for gathering information. Typically, about 20% of demo Visitors will fill out a Form on the first step.

    If using a Form, we recommend introducing this early in your demo and keeping it brief (**1-2 fields if possible**). Remember, your demo likely also includes other CTAs and conversion points that help high-intent viewers make their interest known.
  </Accordion>

  <Accordion title="I am unable to select elements within the Flow builder.">
    The [Navattic Chrome
    Extension](https://chrome.google.com/webstore/detail/navattic/lbecioncobbndebbfdopnpinnibemoon) is
    required in order to select elements within the Flow builder. Be sure to install this extension
    first. If it is already installed, please remove and re-add it to update it.
  </Accordion>

  <Accordion title="How do I enable a text input trigger?">
    [Text input has value condition](/flows#JJQON) can be used to have viewers engage with the capture
    by adding a text string to a text input field. If a text input condition is used in conjunction
    with a tooltip on the same step, you will also want to toggle off the **Progress on click** option
    on the step (found by clicking on the Anchor > Advnaced) so that the demo does not move to the
    next step when the element is clicked.
  </Accordion>

  <Accordion title="Can I highlight elements without using Tooltips?">
    While most Navattic demos benefit from dialog boxes that tell a story about your product,' '
    [Beacons](/flows#YRzY6) can be used to highlight standalone elements in your Captures. From your
    Flow > add a Beacon. By default, a Beacon is a blinking dot next to an element.
  </Accordion>

  <Accordion title="Can I make edits across multiple steps at once?">
    With the Bulk Editor, you can apply edits across multiple steps at once. Bulk edits include:

    * Updating all beacons to triggers
    * Turning multiple modals into tooltips
    * Changing all beacons to have a highlight appearance instead of pulse
    * Deleting multiple beacons or triggers at the same time
    * Copying or Moving Steps to other Flows within your demo or to other Demos
    * Deleting multiple steps at the same time
    * and more!
  </Accordion>

  <Accordion title="Can I copy or move steps into another Flow?">
    With the Bulk Editor, you can copy or move steps into another Flow within the same demo or to another Demo in your Workspace.

    To do this, check off the steps you want to move or copy and then select the **Copy to...** or **Move to...** icon at the bottom of your screen. From here, you'll be prompted to select whether you want to copy the steps into a Flow within this demo or in another demo. Once you select the Flow you want to move it to, click **Copy # step.**

    [View a 2-minute tutorial here](https://www.loom.com/share/b844f27c6f444054afa5790c65adfa7c?sid=b4e95e64-3e59-47cd-9d2b-3083d04ef645) .

    <img src="https://mintcdn.com/navattic-app/eD69r1FtqxHvjQao/images/creating-flows-23.png?fit=max&auto=format&n=eD69r1FtqxHvjQao&q=85&s=abb2cb4157671f4e5670cb7f723c41a1" size="52" width="1114" height="1036" position="center" caption="Copy steps to another flow" alt={true} data-path="images/creating-flows-23.png" />
  </Accordion>

  <Accordion title="How do I copy or move a flow to another Demo?">
    With Product Demos, you can copy over Flows from existing Product Demos. To do this, visit **Flows** > **+ Create Flow** > **Copy**. Select the target Product Demo and desired Flow to copy into your new Product Demo.

    You can also copy or move multiple Flows at once by selecting the Flows you want to Copy and then selecting the **Copy to...** or **Move to...** icon at the bottom of the screen. From here, you'll be prompted to select which Demo you want to add the Flows to.

    [View a 2-minute tutorial here](https://www.loom.com/share/b844f27c6f444054afa5790c65adfa7c?sid=b4e95e64-3e59-47cd-9d2b-3083d04ef645) .

    <img src="https://mintcdn.com/navattic-app/eD69r1FtqxHvjQao/images/creating-flows-24.png?fit=max&auto=format&n=eD69r1FtqxHvjQao&q=85&s=2f73295be585a0065d0272df9d4e7bcc" size="50" width="1122" height="942" position="center" caption={true} data-path="images/creating-flows-24.png" />

    ### Can I add navigation buttons to my demo without using a Modal or Tooltip?

    Yes, you can add navigation buttons without using a modal or tooltip by creating a Theme with a transparent dialog box and border.

    To create a Theme, visit **Themes** > **+ Create theme**. From here, select **Dialog** > **Dialog Background Color** > use the opacity slider under the color picker to make the dialog box transparent. Repeat this step with the **Dialog border color**.

    Learn more about [Themes](/build/themes).
  </Accordion>

  <Accordion title="Can I add navigation buttons to my demo without using a Modal or Tooltip?">
    Yes, you can add navigation buttons without using a modal or tooltip by creating a Theme with a transparent dialog box and border.

    To create a Theme, visit **Themes** > **+ Create theme**. From here, select **Dialog** > **Dialog Background Color** > use the opacity slider under the color picker to make the dialog box transparent. Repeat this step with the **Dialog border color**.

    Learn more about [Themes](/build/themes).
  </Accordion>

  <Accordion title="Can I include superscript formatting in a Modal or Tooltip?">
    Yes, to add superscript formatting to a Modal or Tooltip follow the instructions below:

    1. Use [https://lingojam.com/SuperscriptGenerator](https://lingojam.com/SuperscriptGenerator) to generate the superscript.
    2. Copy/paste it into the Tooltip or Modal directly. No additional formatting is needed.
  </Accordion>
</AccordionGroup>


This documentation is built and hosted on [Mintlify](https://mintlify.com), a developer documentation platform.