Chrome Extension (Capture)
The Chrome Extension's HTML Capture feature enables users to copy frontend code with preserved hover states and scrollability by initiating a timed capture for each screen, after which the captured pages can be saved and viewed within a Tourial project alongside an automatically created intro screen.
Using HTML Capture
- 1.
HTML capture allows you to copy the frontend code of your product and preserves hover states and scrollability so that users feel like they are inside your application (even though the buttons don’t work).
- 2.
Click HTML capture on the right. A 3-second countdown will appear, and after the countdown, a capture will take place. Repeat this for every screen you want to capture.
- 3.
Once you're done, click the extension icon to see the pages captured, then select Save & complete.
- 4.
When you go to your Tourial project, you'll see your pages at the bottom and an intro screen that's automatically created.
Troubleshooting the Chrome Extension
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.
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.
Full page screenshot not working | Navless Product Documentation
The Navless Product Documentation advises that full page screenshots may be unreliable on some apps and pages, recommends using alternative Chrome extensions like Awesome Screenshot for better results, and emphasizes keeping the window size consistent with when the Tourial Chrome extension was used.
Tour Building Best Practices | Navless Product Documentation
The Navless Product Documentation outlines best practices for creating effective product tours by recommending concise, linear tours of 10-15 clicks with clear, action-oriented copy, consistent branding, minimal filler steps, and strategic embedding of "take a tour" CTAs to maximize user engagement, pipeline generation, deal acceleration, and onboarding efficiency.
Advanced Features
The content explains how to enhance Tours using Tourial's advanced features, including adding zoom effects by creating new steps and customizing interactive tools by selecting elements, configuring click or hover interactions, and choosing from various destination options like jumping to pages, toggling tooltips, or linking externally.
Lead Forms with Marketo
This guide explains how to create and customize a Tourial form integrated with an existing Marketo form by importing fields (including hidden UTM parameters), styling the form and confirmation modal, ensuring field matching to avoid data issues, and testing lead submission to confirm successful data transfer into Marketo, with additional tips on using Tourial engagement data for advanced Marketo features.