Media Capture Editor
Navattic makes it easy to create demos of Desktop or Mobile native apps by uploading any screenshots, videos or GIFS you already have.

​
Taking Media Captures

Follow these instructions for taking media captures across different platforms:
The Navattic Capture Extension can be used to Capture screenshots and video of any application that can be opened in a browser. When capturing with the extension, select Screenshot or Video.

​
Edit Media Captures

Media Captures can be edited to tell the perfect story for your demo. Open a Media Capture and click Edit to open the Media Capture Editor. The Media Capture Editor gives you controls for editing any of the following:
Display your demo inside a realistic Device frame, such as a Mobile, Desktop, or Tablet, to match the application’s platform. This helps visitors imagine using your product on their own device and adds visual polish. You can also switch orientations and device types to best suit the flow of your demo.

​
Video capture controls

Video captures can be a good option for showcasing dynamic content, such as animations or user interactions like drag-and-drop. Select Advanced on a Video capture in the Flow builder to control the following settings:
Auto play your video capture when a viewer lands on the step. This creates a smooth, immediate viewing experience without requiring the user to click play.
If the video capture is on the first step, audio will not play until the visitor has interacted with the demo (such as clicking or scrolling) due to browser restrictions.

​
Example Media capture demos

captures-19

Slack Mobile App Demo

captures-20

Soda.io Product Tour

captures-22

SwipedOn Employee App

captures-23

Duolingo

​
FAQ

Navattic includes mobile, tablet, and desktop borders for Apple and non-Apple devices. Adding a device border helps end users best visualize your desktop or mobile application. Learn more about’ ’ adding a device border to a media capture.
Yes, to add a PDF to your demo, you’ll have to convert the file to a .PNG or .JPEG file before uploading it as a Media Capture. We recommend using this free online converter: https://www.freeconvert.com/pdf-converter/download.Watch a 1-minute tutorial on converting and uploading PDFs in Navattic.
Using device mode in Google Chrome paired with a tool like this , you are able to take screenshots that better fit with the device borders.
No. Navattic does not currently support image editing. We recommend using a tool like Figma or Adobe to make modifications prior to uploading.
To avoid the need to scroll, find the ratio of the device border and ensure your image has the same ratio before uploading it to Navattic.
  • The ratio for the Desktop border within Navattic is 3:2.
An easy way to get the correct ratio is to set up a Google Slides deck with this same ratio as the device border you want to use. Then, fill the slides with your images before downloading each individual Slide.