Creating flows
Web captures
Interactive copies of your application.
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:
- 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.
- 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
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:
This will open a new tab containing your application as well as the Navattic extension.Take Captures using these three steps:- Click Capture to save the contents onscreen
- Once the Capture finishes loading, navigate to the next page and repeat the process
- Click Finish > Begin building demo to return to view your completed Capture Collection
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: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.
- From within a Capture Collection, click on any Capture and select “Edit”
- From the Flow Builder, click on any Capture as it appears in a Step and select “Edit”
Try a demo
Editing captures
Show preview
Show preview
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.Show preview
Show preview
Change Element Appearance
Blur, Hide, or Delete elements in your Capture to provide the cleanest demo environment.Show preview
Show preview
Replace Images
Replace a profile image or icon to customize your Captures. You can also use the Background feature to replace background images.Show preview
Show preview
Lock Element Scrolling
To limit the scrolling abilities of an element, select the element > Scroll > lock Vertical or Horizontal scroll.Show preview
Show preview
Copy/Paste Elements within a Capture
Copy and paste a similar element in your Capture. You can also copy similar elements across different Captures.Show preview
Show preview
FAQs
How do I capture a dropdown or popup menu?
How do I capture a dropdown or popup menu?
How do I edit a Capture after adding it to a Flow?
How do I edit a Capture after adding it to a Flow?
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).
How do I edit the background of a Capture when a popup message or modal is present?
How do I edit the background of a Capture when a popup message or modal is present?
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.
How do I edit text in my Captures?
How do I edit text in my Captures?
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.
How can I add an image as the background of a captured element?
How can I add an image as the background of a captured element?
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.
I am unable to load the Chrome Extension.
I am unable to load the Chrome Extension.
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:
- 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).
- Open the tab “This Can Read and Change Site Data”
- Select the appropriate sites
-
Refresh app.navattic.com and any pages that you have open where you want to run the extension.
