Captures
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:
Follow the in-app prompt to install the Navattic chrome extension if needed. Visit Product Demos > + Create demo. Select Capture with Chrome extension and enter your App URL. Click Start Capturing.
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.
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
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.
View a 3-minute tutorial here.
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.
The Navattic Capture Editor is used to make no-code adjustments to HTML-based captures. You may launch the Editor in two ways:
- 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"
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.
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.
Blur, Hide, or Remove elements in your Capture to provide the cleanest demo environment.
Replace a profile image, icon, or background image to customize your Captures.
To limit the scrolling abilities of an element, select the element > Scroll > lock Vertical or Horizontal scroll.
Navattic makes it easy to create demos of Desktop or Mobile native apps by uploading any screenshots, videos or GIFS 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 Type = Media > Submit. Then click Add to collection 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.
Video Captures can be uploaded as a .MP4 file that is up to 25MB. Once a Video Capture is added to a flow, you can click Advanced to set it to Auto play, show video playback controls, automatically loop the video, and enable or disable the Audio.
Try out the Video Step to easily incorporate videos from your local storage, YouTube, Vimeo, Loom, Wistia, or Vidyard into your demo experiences.
Supported image and GIF formats include .PNG, .JPEG, and .GIF, with a maximum file size of 25 MB. Once a Media Capture is uploaded, you can use the Capture Editor to add a device frame, lock scrolling, and set a background color.
To add a device frame, open the media capture > Device > Use device frame > Select Mobile, Desktop, or Tablet. From here you can either choose "None" as the Device Frame to use custom dimensions or add a Device Frame using the dropdown menu.
To save these customized dimensions for all media captures in the collection select "Apply across collection" after altering the dimensions of one of the captures.
From your Capture collection, click Generate 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 flow to move into the Flow Builder. 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 Scale Width Responsiveness Strategy to ensure consistent sizing between steps.
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.
