Recording Media for Interactive Tours

There are several different ways to upload your media into Tourial. Below is an overview of each option and when to utilize them.

Note: The max file size for manual media uploads in Tourial is 99 MB for screenshots, videos, and/or GIFs.

Chrome Extension

Option 1: Workflow Capture

• ​Use this option to show a series of steps or demonstrate a flow/process while automatically capturing each click, scroll, or drag-and-drop motion.

Option 2: Manual Capture

• ​Use this when you want to take a single screenshot or need to edit text on a screen before uploading it (using "edit mode").
• ​You can also take a scrolling screenshot to capture page elements below the fold. Note that scrolling captures may fail depending on how your product is built. If successful, you'll see the screen panning down as it captures the full web page. If not, your app may not support scrolling capture.

Option 3: Video Capture

• ​Use this to capture longer or more complicated workflows in your product. Video capture is also helpful for showing drag-and-drop functionality, data loading, or processing times (such as when demonstrating AI features).

Import Your Media

Option 1: Upload from your computer

• ​Recommended aspect ratio for both image and video uploads is 16:9. The Tourial app will not block uploads that are not 16:9, but images may be cut off at non-recommended aspect ratios.

Option 2: Import from another Tour

How Tourial Responds to Screen Size

Tourials are optimized to work across multiple screen sizes while keeping your tour content fully accessible to potential buyers.

Screenshots will resize to fit within smaller screens so that the tour doesn’t overflow, but the tools on the screen will remain a fixed size to keep them fully legible and interactive.

Best Practices: A Few Do's and Don'ts

DO's

1. Use the Tourial Chrome Extension for Capturing Screenshots & Videos in Media Demos

• ​Do not use cmd+shift+4 on your Mac or any hot keys to capture the image by cropping it. The Tourial Chrome Extension ensures your screenshots and videos are at a 16:9 aspect ratio and automatically resizes your browser for a perfect fit.

2. Use a High Fidelity Device

• ​Pixels Per Inch (PPI) is the most important metric when capturing your product for media demos. Use a device with a minimum PPI of 200.
• ​If unsure of your device's PPI, use an online calculator by inputting the resolution and dimensions of your screen.
• ​Macbooks with retina displays are recommended.
• ​Avoid capturing media from external monitors, as they often have lower PPI, resulting in grainy captures.
• ​If uploading high PPI media manually and tours become "heavy," consider using free image compressors or PNG to JPEG converters:
  • ​Resizing.app
  • ​Optimizilla
  • ​CompressNow
  • ​PNG2JPG
  • ​CloudConvert

3. Edit Some of the Screen Data to Make It Look Nice (Optional)

• ​Use Chrome extensions to blur sensitive data or edit images/text:
  • ​Content Edit & Blur (for blurring sensitive data)
  • ​Site Editor (for editing images)
  • ​Tourial Extension (for editing text; more editing capabilities coming soon)

DON'T's

1. Don't Use CMD + Shift + 4 or Crop the Screen in Order to Grab It

• ​This method results in inconsistent screen transitions and choppy user experiences. Unless you can guarantee perfect dimensions each time, use a Chrome extension.

2. Don't Zoom Out Before Taking the Screenshot

• ​Always take screenshots at 100% zoom from your browser. Zooming out to show more data will result in inconsistent captures.
• ​If you want to capture the whole page, take a full page screenshot and add scrolling effects in Tourial to guide users through the entire page.