Capture
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.
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:
Visit Product Demos > Create new to begin. From the Captures tab, click Start capturing and follow the in-app prompt to install the Navattic chrome extension if needed.
Tip: For best results, resize your browser window to about 1440 x 900px (approximately a 13" laptop window size) when taking Captures. This ensures that the interactive elements on your page appear comfortably for viewers on different devices.
Enter your App URL and click Create. This will open a new tab containing your application as well as the Navattic extension.
Take Captures using these three steps or view a tutorial:
- Click Capture to save the contents onscreen
- Once a green checkmark appears, navigate to the next page and repeat the process
- Click Finish to return to view your completed Capture Collection
Captures within your Collection appear like this. Now you are ready to create a Flow!
Tip: Navattic recently 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.
View a 3-minute tutorial here and contact [email protected] for early access.
Flows combine Captures with dialog boxes to tell a story about your product. From your Capture collection, click Create flow. This will automatically arrange Captures in the order in which they were taken.
This video demonstrates how to customize steps within the Flow builder.
You may choose to edit Web Captures using Navattic's no-code Capture Editor. From your Capture Collection, locate the Capture you would like to edit > click the 3-dots to the right of this Capture > select "Edit Capture".
The tutorial below demonstrates a few common edits
- Edit text
- Replace an image
- Remove elements
- Blur distracting background elements
- Freeze the scroll position on a larger report or dashboard
Navattic makes it easy to create demos of Desktop or Mobile native apps by uploading any screenshots you already have (up to 25MB). This is also a great option for creating demos using .PNGs exported from Figma (tutorial). These demos were built with this method:
Slack Mobile App Demo with mobile app screenshots
Soda.io Product Tour with files exported from Figma
NYT Cooking App with web and mobile app videos
SwipedOn Employee App with web captures and mobile app screenshots
Tip: Use a tool like GoFullPage to take screenshots of desktop content, or these tips by Apple and Android to take screenshots or recordings of mobile apps.
Visit Product Demos > Create new to begin. From the Captures tab, click Start Capturing and select App Type = Media. This will prompt you to upload an image, short .MP4 video, or .GIF from your local device. You may upload one or multiple items at a time.
Once uploaded, use Navattic to customize the appearance further. Explore the options to:
- Add a mobile device border (landscape and portrait mode borders are included)
- Allow or disallow scrolling
- Set a background color
Your media will now appear within a Capture Collection. You may add to the collection at any time, proceed to create a Flow, copy this Collection to other demos, and mix and match Captures between Collections.
To create a custom frame size select the capture you want to add a custom dimension to > select Edit > Device > Desktop, Mobile, or Tablet > Settings ⚙️ > Edit the Width and Height. Custom frame sizes can be created for Tablets, Desktops, and Mobile devices.
To saves these customized dimensions for all media captures in the collection select "Add to theme" after altering the dimensions of one of the captures.
From your Capture collection, click Create flow. This will generate a step to correspond with each Capture. Here you can determine if the steps in this Flow should default to Modals, Tooltips, or Invisible steps.
Click Generate to move into the Flow Builder (pictured below). Use the Flow Builder to:
- Add custom text for each step
- Duplicate steps
- Switch up step types: Click the current step type (ex. Tooltip in the example below) to change this to a Modal, Form, or Invisible step.
- Add Beacons and Triggers to boost interactivity in your demo
When selecting anchor elements for Tooltips, Beacons, and Triggers, a resizable element selector will appear to help you create clickable elements. Use this to select the precise area you would like to anchor your Tooltip, Beacon, or Trigger to.
Tip: If you plan to use Web Captures and Screenshots together to demo a desktop application, use these tips to ensure seamless step transitions:
- Take HTML Captures and Screenshots of your application at a consistent resolution. This Window Resizer extension can help quickly resize your browser window. We recommend taking all Captures and screenshots at 1440x900px.
- Use a tool like this to take a full-page screenshot that allows for scrolling. This creates a more dynamic screenshot that blends in with your HTML Captures.
- Once you have published your Flow and created a Project, use the Fit Width Responsiveness Strategy to ensure consistent sizing between steps.