Tourial Product Documentation
  • πŸ‘‹Welcome to Tourial!
    • Planning Tours with AI
    • Building Tours with AI
  • 🏁Best Practices & Launching
    • Tour Building Best Practices
    • Before you Launch Check-List
  • πŸ—οΈBuilding
    • Interactive Tours
      • Record
        • Chrome Extension
          • Downloading the Chrome Extension
          • Troubleshooting
            • Full page screenshot not working
        • Importing Media
      • Edit
        • Interactive Tools
          • Advanced Features
        • Timed Tools
        • Video Trimming
      • Branding
      • Mobile-Optimization
      • HTML Demos (Experimental)
        • Chrome Extension (Capture)
        • Building & Editing
    • Tour Centers
      • Interactive Topics
      • Editing Styles
      • Navigation & Format
      • Supported Content in Tour Centers
        • Adding Google Slides to your Tour Center
      • Upfront Prompts
      • Mobile Optimization
  • 🌎Sharing
    • Embedding Demos
      • Embedding Interactive Demos
        • Lightbox Embed
        • Website Embed
      • Embedding Tour Centers
      • Updating your Embed Code when changes are made
    • Tour Link Sharing
    • Tour Center Link Sharing
    • Share Links
      • How to create a share link
  • GIF Generation
  • πŸ”’Analytics
    • Tour Analytics
    • Tour Center Analytics
  • βš™οΈAdmin & Settings
    • Inviting your team
    • Setting your Account Branding
    • Workspaces
      • Create & Add Users to a Workspace
    • User Management
    • White Label Your Account & Content
    • Tourial Forms
      • Form Fails
      • Hyperlinking in Tourial Forms
  • βž•Integrations
    • HubSpot
      • Instant Scheduling with HubSpot Scheduler
      • Tour Engagement Data
        • Slack Notifications with HubSpot
        • Triggering HubSpot Workflows
        • Pushing Engagement Data from HubSpot to SFDC
      • HubSpot Reporting Setup
      • TourPlayer Engagement Data
      • Lead Forms with HubSpot
      • How do I hide the chatbot?
      • How do I hide the Cookie Banner?
      • FAQs
    • Marketo
      • Lead Forms with Marketo
      • Engagement Data with Marketo
        • Slack Notifications with Marketo
        • Approving Marketo Custom Activities
      • Marketo Reporting Setup
    • Partners
      • G2
      • TrustRadius
    • Pardot
      • Lead Forms in Pardot
      • Engagement Data with Pardot
      • How to Create a Pardot Dashboard to Measure Tourial's Impact
    • Salesforce
      • Leads Forms in Salesforce
      • Engagement Data with Salesforce
        • Add Tourial Engagement to record's Lightning page
        • Add Tourial Engagement as Salesforce tab
        • Create an SFDC report using Engagement Data
      • How to Create a Salesforce Dashboard to Measure Tourial's Impact
    • Zapier
    • Calendly
    • Chili Piper
    • Cross-Frame Events
      • Tours
      • Tour Centers
    • Slack
  • Security
    • SSO (Single Sign-on)
    • Uptime Reports
    • Form Compliance
Powered by GitBook
On this page
  • Chrome Extension
  • Import your Media
  • How Tourial responds to screen size
  • Best Practices: A Few Do's and Don'ts
  • DO's
  • 1. Use the Tourial Chrome Extension for Capturing Screenshots & Videos in Media Demos
  • 2. Use a High Fidelity Device
  • 3. Edit some of the screen data to make it look nice (optional)
  • DON'T's
  • 1. Don't use CMD + Shift + 4 or crop the screen in order to grab it
  • 2. Don't zoom out before taking the screenshot

Was this helpful?

  1. Building
  2. Interactive Tours

Record

How to upload your ScreenShots/Media into your Tour(s)

PreviousInteractive ToursNextChrome Extension

Last updated 1 month ago

Was this helpful?

There are several different ways to upload your Media into Tourial. Check out a quick 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

Option 1: Workflow Capture: Utilize this option when you have to show a series of steps or want to show off a flow/process while automatically capturing each click, scroll, or drag-and-drop motion.

Option 2: Manual Capture: Utilize this when you want to take a single screen shot OR you need to Edit text on a screen before uploading it- utilizing the "edit mode". You can also take a scrolling screenshot with manual capture to capture page elements that are below the fold of the page (please note that scrolling captures may fail dependent on the way your product is built. When a scrolling capture is successful, you will see the screen panning down as it captures the full web page - if you do not see this behavior, it is likely your app cannot be captured via scrolling capture.)

Option 3: Video Capture: Utilize this when you want to capture longer or complicated workflows in your product. Video capture is also helpful when showing drag and drop functionality, data loading in, or processing times like when showing AI features

Option 1: Upload from your computer

Note: When manually uploading media from your computer, the 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 note that 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. We even added that as a Don't to make sure you don't forget :)

Using the Tourial Extension, you will never need to resize or crop your media. When building media demos, you'll want your screenshots and videos to all be at a 16:9 aspect ratio and the extension will automatically resize your browser when capturing so that all media is the perfect fit for your demos.

2. Use a High Fidelity Device

Your average Macbook has a retina display, which is Apple's way of saying "very high PPI", and if you've got one of those, we recommend you build on that.

Note that we recommend against capturing media from external monitors. External monitors are typically larger so even if they're a top of the line 4k monitor, the PPI can be relatively small. You will notice "graininess" when capturing on relatively low PPI monitors.

Doing some manual uploads of high PPI media? Tours can get "heavy" when uploading extremely high fidelity files, and if you start to notice that, here are a couple links to some free image compressors and PNG -> JPEG convertors

3. Edit some of the screen data to make it look nice (optional)

Your demo data can be a little messy at times. Luckily there are a few Chrome extensions that help with this.

DON'T's

1. Don't use CMD + Shift + 4 or crop the screen in order to grab it

I know we're beating a dead horse here. But to reiterate, this will give you inconsistent screen transitions, and it will look choppy when users transition between screens.

Unless you're maestro at screen clipping and can guarantee perfect dimensions each time, use a chrome extension.

2. Don't zoom out before taking the screenshot

Zooming out to 90% or 80% because you want to show some data down below? Don't. Take your screenshots at 100% zoom from your browser.

If you want the whole page's data, take a full page screenshot, and then add scrolling effects in Tourial to navigate your user through the entire page. It'll make for an incredible experience too at the end of the day.

When talking about display quality, most folks are familiar with the terms HD, UHD, 4k, etc. Each of those terms refer to the device's resolution, but when making media demos resolution isn't the most important number. Pixels Per Inch, or PPI is the most important metric when capturing your product for media demos. We recommend doing media capture from a device with a minimum ppi of 200. If you're unsure of your device's PPI, to determine your device's PPI by inputting the resolution and dimensions of your screen.

- great for blurring sensitive data

- great for editing images

(duh again) - great for editing text (soon to be adding the rest of those editing capabilities too)

πŸ—οΈ
Click this to install the Tourial Chrome Extension
use this online calculator
Resizing.app
Optimizilla
CompressNow
PNG2JPG
CloudConvert
Content Edit & Blur
Site Editor
Tourial
Chrome Extension
Import your Media