Recording Media for Interactive Tours in Tourial
The document outlines various methods for uploading media into Tourial, including using a Chrome Extension with options for workflow capture, manual capture, and video capture, as well as importing media from a computer or another Tour, while emphasizing a 99 MB file size limit, recommended 16:9 aspect ratio, responsive screen size adjustments, and best practices such as preferring the Chrome Extension over manual screenshot tools for optimal interactive tour creation.
There are several different ways to upload your media into Tourial. Below is an overview of each option and when to utilize them.
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.
Option 3: Video Capture
- Use this to capture longer or more complicated workflows in your product. Video capture is 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 Chrome Extension ensures all media is 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.
- Avoid capturing media from external monitors, as they often have lower PPI, resulting in grainy images.
- If uploading high PPI media manually, consider compressing images if tours become "heavy." Some free tools include:
- 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)
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. Use a Chrome extension to ensure consistent dimensions.
2. Don't Zoom Out Before Taking the Screenshot
- Always take screenshots at 100% zoom from your browser. 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.
Related
Chrome Extension | Navless Product Documentation
The Navless product documentation details how to add and use Tourial's Chrome Extension, including steps for installation, logging in, creating or adding to Tours, and capturing workflows through automatic media capture—which records user interactions like clicks, scrolling, and drag-and-drop with specific triggers and termination conditions—and saving the captured media to Tours with auto-generated tooltips for easy editing.
How to Create a Salesforce Dashboard to Measure Tourial's Impact
The guide explains how to create a Salesforce dashboard to measure Tourial's impact by first setting up a custom report type with Tourial engagement fields linked to Contacts or Leads, then building detailed reports—such as tracking Tourial views by lifecycle stage—to analyze user interaction and influence on the sales pipeline.
Tour Engagement Data | Navless Product Documentation
After setting up the HubSpot Integration, Tourial engagement data—including detailed metrics like time spent, clicks, form interactions, and metadata such as Tourial name, URL, and visitor IDs—is sent via HubSpot cookies to populate contact record activity feeds, enabling users to create targeted lists, workflows, and reports based on visitor interactions with Tourials within HubSpot.
Engagement Data with Marketo
After setting up the Marketo Integration, Tourial engagement data—including detailed metrics like time spent, clicks, CTA interactions, form submissions, and Tourial metadata such as name, URL, IDs, and UTM parameters—will appear as custom activities in lead or person activity logs, enabling users to create targeted Smart Lists and workflows based on specific Tourial engagement criteria within Marketo.
Engagement Data with Salesforce | Navless Product Documentation
The documentation explains how Salesforce administrators and Tourial admins can install the Tourial Salesforce package to create a custom object called "Tourial Content View," enabling the flow of detailed engagement data—such as content name, type, view date, URL, total time spent, CTA clicks, and first session date—from Tourial experiences to Salesforce Lead, Contact, and Account records, provided the visitor has submitted a form with an email address.
How to Create a Pardot Dashboard to Measure Tourial's Impact
The guide explains how to create a Pardot dashboard to measure Tourial's impact by first setting up a dynamic list that segments contacts who engaged with Tourials using specific filters (e.g., last Tourial viewed, company exclusion, session date, lifecycle stage), and then building reports such as a bar chart showing Tourial views by lifecycle stage over time to analyze engagement across marketing and sales stages.