Creating flows
Media captures
Images, videos, and GIFs of your desktop or mobile app.
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 clickEdit 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. SelectAdvanced 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
FAQ
Can I add device borders to a screenshot?
Can I add device borders to a screenshot?
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.
Can I use a PDF in my demo?
Can I use a PDF in my demo?
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.
How can I get my screenshot to better fit the device borders?
How can I get my screenshot to better fit the device borders?
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.
Can I edit a media capture using the Capture Editor?
Can I edit a media capture using the Capture Editor?
No. Navattic does not currently support image editing. We recommend using a tool like Figma or
Adobe to make modifications prior to uploading.
What is the recommended resolution for screenshots in Navattic?
What is the recommended resolution for screenshots in Navattic?
How do I avoid the need to scroll when using a device border?
How do I avoid the need to scroll when using a device border?
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.