Building & Editing | Navless Product Documentation
The Navless Product Documentation explains how to edit an HTML tour by using the Chrome extension to capture pages, customizing the intro overlay text, adjusting global tour styles like tooltip placement and overlay colors, and modifying page elements through an edit screen mode that allows hiding, removing, or blurring elements before saving the changes.
Editing your HTML tour
After you capture HTML using the Chrome extension and create your Tour, you'll see your pages at the bottom and an intro overlay added.
- 1.
With the intro selected, the right menu under Intro overlay allows you to edit the headline, body, and button text for the intro.
- 2.
Under Tour styles you'll see four sections: Tooltip, Overlays, Buttons, and Progress.
- You can change the overlay color, button styles, and the progress bar that appears when you hover at the bottom of the page.
- Note: The style changes made under Tour styles are applied to all tools in the tour.
- 3.
With an HTML page selected, you can edit tooltip placement and add your text.
- 4.
Under the HTML tab, turn on edit screen mode to edit text, hide, remove, or blur selected elements.
- Hiding an element will keep surrounding elements in the same position.
- Removing an element will remove the HTML from that section and surrounding elements will adjust.
- Blurring an element keeps everything in place.
- 5.
Once you're done with edits, toggle off the edit screen mode and select Save.
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.
Embedding Interactive Demos | Navless Product Documentation
The Navless product documentation provides detailed instructions and best practices for embedding interactive Tourial demos into websites either directly or as lightbox overlays, recommending a minimum embed size of 888 x 500px and an optimal size of 1080 x 607.5px to prevent tooltip overflow.
TrustRadius Integration Instructions
The instructions detail how to add an interactive Tourial demo to a TrustRadius product listing by logging into the TrustRadius Vendor Portal, editing the product listing to add a product demo, copying and adjusting the Tourial URL (removing "/pages" and updating the domain if white-labeled), entering a title and selecting "Interactive Demo" as the type, then saving or submitting the changes so the demo appears under the listing's Product Demos section.
Instant Scheduling with HubSpot Scheduler
The guide explains how to integrate HubSpot Scheduler with Tourial by connecting your HubSpot account, adding HubSpot Meeting Links, and then embedding these meeting schedulers as clickable CTA buttons either on individual Tour Pages or the Tour Center, enabling users to book meetings via a calendar popup, with a note that when embedded on external websites, the scheduler may open in a new tab which can affect analytics tracking.
Embedding a Tourial Product Tour on Your Website
To embed a Tourial product tour on your website, you copy the iframe embed code from your Tourial account, then paste it into an HTML element within your CMS or page builder (like WordPress, HubSpot, Wix, etc.), adjust the container size as needed to ensure proper display, and preview the page to confirm the tour appears correctly.
Embedding Tour Centers | Navless Product Documentation
The Navless product documentation explains how to embed a Tour Center by logging into Tourial, selecting the desired Tour Center and its overview, choosing whether to retain the main navigation, and copying the embed code, noting that the upper right CTA shifts position when embedded.