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 and media captures can exist in the same capture collection with an existing collection, choose add to collection and start capturing or upload media files to add new captures web captures 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 close interactive demo site ramp product tour 1\ take captures f ollow 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 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 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 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 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 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 change element appearance blur, hide, or delete elements in your capture to provide the cleanest demo environment replace images replace a profile image or icon to customize your captures you can also use the background feature to replace background images lock element scrolling to limit the scrolling abilities of an element, select the element > scroll > lock vertical or horizontal scroll copy/paste elements within a capture copy and paste a similar element in your capture you can also copy similar elements across different captures media captures navattic makes it easy to create demos of desktop or mobile native apps by uploading any screenshots, videos or gifs you already have 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 duolingo with mobile app screenshots and video captures 1\ upload media 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 you can add media capture to your demo using any of the below methods to add media captures from your local storage, visit product demos > create demo to begin select uploading media then click browse to upload an image, short mp4 video, or gif from your local device you may upload one or multiple items at a time to take screenshots or videos directly from the navattic chrome extension, visit your app > click the navattic chrome extension > start capturing > use the arrows on the blue capture button to select screenshot , click to screenshot , or video you can also launch a media capture session within an existing demo by selecting new collection > start capturing > use the arrows on the blue capture button to choose screenshot , click to screenshot , or video alternatively, click upload media files to upload files directly from your local storage for optimal results, we suggest adjusting your window to either 16 10 or 16 9 before capturing screenshots, as most laptops use this screen aspect ratio additionally, consider adding a background color to your capture (as shown in this tutorial at 1 00) to seamlessly blend with the screenshot and create a more polished, professional appearance 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) lock vertical or horizontal scroll 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 1 1 video captures video captures can be uploaded as a mp4 or mov file that is up to 125mb once a video capture is captures docid\ iskr1 x2jmjgzmv2cpz 7 , 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 1 2 image and gif captures 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 2\ add a device frame (optional) 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 3 add captures to a flow 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 https //chrome google com/webstore/detail/gofullpage full page scre/fdpohaocaechififmbbbbbknoalclacl to take a full page screenshot that allows for scrolling this creates a more dynamic screenshot that blends in with your html captures use these steps to incorporate captures from different collections in the same flow once you have published your flow and created a project, use the scale width responsiveness strategy to ensure consistent sizing between steps captures faqs web captures how do i capture a dropdown or popup menu? if you are having trouble capturing an onscreen element, try using the keyboard command ctrl+c (or command+c for mac) to take the capture 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? 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? 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? 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 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 media captures 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? 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 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? 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? 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? we recommend using images that are greater than 1200px in width as smaller images will appear blurry in navattic 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 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