Captures are interactive copies of your application that set the foundation for your demo. Navattic supports two types of Captures to help you demo any app:
  1. Web Captures are HTML-based copies of any application that is accessed on a browser. This provides an interactive experience that looks and feels just like your app, including scrolling abilities, hover states, and more. Web App captures may be edited using Navattic’s no-code HTML editor.
  2. Media Captures are most often used to create demos of Mobile or Desktop native apps. Images, .GIFs, or Videos can be used for just a few steps or your entire demo.
Try a demo
Web and Media Captures example
Web Captures are HTML-based copies of any application that is accessed on a browser. This provides an interactive experience that includes scrolling abilities, hover states, and more. Web App captures may be edited using Navattic’s no-code HTML editor. These demos were built using this method:
captures-17

Close Interactive Demo Site

captures-18

Ramp Product Tour

1

Take Captures

Follow the in-app prompt to install the Navattic chrome extension if needed. Visit Product Demos > + Create demo. Select Taking new captures and enter your App URL. Click Start Capturing.If you are working in an existing demo, visit the Captures tab > click New Collection > select Start Capturing > Enter in the name for the collection and add your App URL > click Start capturing.This will open a new tab containing your application as well as the Navattic extension.Take Captures using these three steps:
  1. Click Capture to save the contents onscreen
  2. Once the Capture finishes loading, navigate to the next page and repeat the process
  3. Click Finish > Begin building demo to return to view your completed Capture Collection
Captures within your Collection appear like this. Now you are ready to generate a Flow!
Tip: Navattic introduced the ability to Click to Capture. This is an option to automatically Capture the content on each screen, in order to save time while building your Flow. Click to Capture is best used for demos that primarily use Tooltips, Beacons, or Triggers.
2

Add Captures to a Flow

Flows combine Captures with dialog boxes to tell a story about your product. From your Capture collection, click Generate flow. This will automatically arrange Captures in the order in which they were taken.This video demonstrates how to create a flow and the different step types within the Flow builder.
Watch video
Captures
3

Edit Captures (optional)

The Navattic Capture Editor is used to make no-code adjustments to HTML-based captures. You may launch the Editor in two ways:
  1. From within a Capture Collection, click on any Capture and select “Edit”
  2. From the Flow Builder, click on any Capture as it appears in a Step and select “Edit”
Try a demo
Editing captures
When the Capture Editor launches, select any element to view the various editing options in the sidebar. Use the element traversal arrows demonstrated below to select elements with precision.
While the Capture Editor is an effective way to change the visual appearance of captures, please be careful not to include sensitive information when taking captures.

​
Edit Text

Replace or reformat text anywhere in your Captures. From the Capture Editor > select any text field > type within the Text / HTML container in the upper right or directly in the Capture.

​
Change Element Appearance

Blur, Hide, or Delete elements in your Capture to provide the cleanest demo environment.

​
Replace Images

Replace a profile image or icon to customize your Captures. You can also use the Background feature to replace background images.

​
Lock Element Scrolling

To limit the scrolling abilities of an element, select the element > Scroll > lock Vertical or Horizontal scroll.

​
Copy/Paste Elements within a Capture

Copy and paste a similar element in your Capture. You can also copy similar elements across different Captures.

​
FAQs

If you are having trouble capturing an onscreen element, try using the keyboard command Ctrl+C (or Command+C for Mac) to take the capture.
From the Flow Builder, locate the Capture you would like to edit > click the arrows icon to expand the Capture > click “Edit”. Save & Exit when complete. Keep in mind that your edits will be applied to every step that references this Capture (to avoid applying edits to every step with this Capture, first duplicate the Capture you are editing).
In the capture editor, use the up and down arrows to select the background element > open Magic Editors > Overlay > Ignore Overlay. You may have to remove the Overlay on a few different layers before being able to access the element you are hoping to edit.
First, please never capture sensitive data. While the Capture Editor can be used to quickly replace simple strings of text or to alter the appearance of distracting elements, we ask our customers to avoid capturing sensitive data altogether.To edit non-sensitive text, open the Capture Editor > select your text field > and type something new in the Text / HTML box. Most text fields are easily accessible in the Editor; this tutorial shows you a workaround if you are having trouble selecting a given “text” field.
To add an image to the background of a captured element (a DIV, NAV, or other non-IMG element type), open the Capture Editor > Select the element where you want to add the image > Background > Upload image > Upload the image from your local storage. Use the Position, Size, and **Repeat **dropdowns to adjust the image if needed.
If you’re having trouble loading the Navattic Chrome Extension, it’s possible that the extension does not have the correct permissions. If you want to use the application on any domain the chrome extension needs to have the permission “On all sites”. If you just want it to work on specific applications, it should have the permissions for “navattic.com” and any other domains you want.To update permissions:
  1. Click on the Navattic icon in the Chrome extension bar. If it’s not visible click the puzzle icon and select it from the dropdown menu (click the pin to add it to the extension bar).
  2. Open the tab “This Can Read and Change Site Data”
  3. Select the appropriate sites
  4. Refresh app.navattic.com and any pages that you have open where you want to run the extension.