NavTour User Manual

Introduction

This manual is written for everyone who will touch NavTour: the AE who drops demos into outbound sequences, the PM who captures launch flows from staging, the admin who configures SSO, and the developer who wires our REST API into a self-hosted workflow. Every chapter is cross-linked and every code sample is copy-pastable.

Quickstart — 5 minutes

The fastest path from zero to a published interactive demo:

1. Install the extension. Go to Chrome Web Store → NavTour and click Add to Chrome. The NavTour icon appears in your toolbar.

2. Open your product. Navigate to the page or flow you want to capture. Log in as a demo user (not your production account).

3. Click Capture. Press the NavTour icon and choose Capture this page. Navigate through the flow, pressing Cmd/Ctrl+Shift+C to capture each step. Press Done when finished.

4. Add a tooltip. In the editor, click any element and choose Add tooltip. Type the annotation text. Drag the tooltip handle to reposition.

5. Publish. Click Publish in the top-right. Copy the share link and paste it anywhere — email, Notion, Slack, LinkedIn.

Core concepts

Demo — a sequence of captured frames with guided annotations. The top-level entity in NavTour.

Frame — a single HTML/CSS snapshot of a page state. Frames are replayable and editable. A demo typically has 5–25 frames.

Step — an annotation layer on top of a frame: tooltip, hotspot, modal, spotlight, blur, or CTA button.

Hub — a curated collection of demos, published as a standalone page with its own URL and branding.

Showcase — a single demo sent via a personalized share link, trackable per-recipient.

Workspace — a shared environment for a team: all demos, hubs, and analytics live inside a workspace. One workspace per subscription.

Accounts & workspaces

Each NavTour account belongs to exactly one workspace. Workspaces are isolated: demos, frames, analytics, and integrations are never shared across workspaces.

Roles within a workspace: Owner (full access, billing), Admin (all ops except billing), Editor (create/edit demos, no admin), Viewer (read-only, no publishing). See Roles & permissions.

Chrome extension

The NavTour Chrome extension is a Manifest V3 extension that captures page state as a complete HTML/CSS bundle — not a flat screenshot. This means the captured frame is interactive: you can click, hover, and scroll inside it, and you can still edit text and swap images later in the editor.

Permissions requested

The extension requests activeTab, scripting, and storage. It does not request history, bookmarks, or persistent background access. All captured content is sent directly to your NavTour workspace over HTTPS — nothing is stored locally beyond session state.

Keyboard shortcut

Default capture shortcut: Cmd+Shift+C (Mac) / Ctrl+Shift+C (Windows/Linux). Configurable in Chrome’s extension shortcuts page (chrome://extensions/shortcuts).

Capture modes

NavTour supports three capture modes:

Frames & screenshots

Each captured frame is stored as compressed HTML/CSS with inlined assets. Average frame size is 180 KB. The editor renders frames in a sandboxed iframe: JavaScript from the original page is stripped, but CSS and layout are pixel-perfect.

You can reorder frames by drag-and-drop in the editor sidebar. You can delete, duplicate, or replace a frame without affecting the rest of the demo.

Selectors & drift

Hotspots and tooltips are anchored to a CSS selector path, not a pixel coordinate. If the page UI updates and the selector path breaks, NavTour shows a Drift alert in the editor — click to re-anchor the annotation to the correct element in the new capture.

Editor overview

The NavTour editor is a split-pane interface: frame list on the left, canvas in the center, properties panel on the right. All edits are non-destructive and versioned — you can roll back any frame to its original capture.

Keyboard shortcuts in the editor: Cmd+Z undo, Cmd+Y redo, T add tooltip, H add hotspot, B add blur, Esc deselect, Space+drag pan.

Hotspots & tooltips

A hotspot is a pulsing orange dot anchored to an element. Clicking it advances the demo to the next step. A tooltip is a text card that appears on hover or click, with configurable position (top, right, bottom, left) and action buttons.

Tooltip variants: Standard (floating card), Modal (centered overlay with backdrop), Spotlight (dims everything except the target element), Banner (top or bottom strip).

Text & image edits

Double-click any text node in the canvas to edit it inline. Swap images by clicking the image and selecting Replace — upload a file or paste a URL. Text and image edits are stored as overlays on top of the original frame capture and do not affect the source HTML.

Branching logic

Add a Branch step to send viewers down different paths based on a button click. Common patterns: persona selector (AE view vs. CFO view), feature toggle (show feature A vs. feature B), language selector.

Each branch is a separate sequence of frames. Analytics tracks completion rates per branch. You can set a default path for viewers who don’t interact with the branch selector.

Personalization tokens

Use double-brace tokens anywhere in text or image alt-text: {{company}}, {{first_name}}, {{use_case}}. Tokens are resolved at share time:

• Via URL params: ?company=Acme&first_name=Ana
• Via API: Pass values in the POST /v1/demos/:id/share payload
• Via Hub form: Lead capture fields can map to tokens automatically

Themes & branding

Apply a Theme to set global colors, fonts, tooltip radius, and button styles across all demos in a workspace. Themes are stored as a JSON spec and can be exported/imported. Enterprise workspaces can set a default theme that all new demos inherit.

AI drafting

NavTour AI Copilot is powered by Anthropic Claude. It reads your captured frames and suggests tooltip copy, headline text, and CTA labels.

To use AI drafting: select a frame, open the tooltip panel, and click Draft with AI. The AI generates 3 variants; you pick one and edit. All AI output is editable — it’s a starting point, not a final answer.

AI review

Before publishing, run AI Review from the toolbar. The AI checks for: missing annotations on key interactive elements, copy that’s too long for the tooltip format, personalization token typos, and broken branching paths.

Brand voice training (Enterprise)

Enterprise workspaces can train the AI Copilot on your brand voice by uploading approved copy samples, style guides, and terminology lists. Once trained, every AI draft — tooltip copy, modal headlines, CTA labels — reflects your tone without manual editing.

To enable: Settings → AI → Brand Voice → Upload samples. Training runs overnight; the model is scoped to your workspace and never shared.

Translation — EN / ES / PT

NavTour demos are bilingual-native. Every demo can be published in English, Spanish, and Portuguese from the same capture — no separate recording needed. The AI translates tooltip copy, modal text, and CTA labels; you review and approve each language before publishing.

To set languages: Demo Settings → Languages → toggle the languages to publish. Viewers see the demo in their browser’s preferred language automatically, or you can force a language via the share URL parameter ?lang=es.

All three languages are included on every paid plan. Free plans are English-only.

Share links

Every published demo gets a unique share link: https://navtour.cloud/s/{slug}. Links are permanent by default; you can revoke or reset them from the demo settings.

Tracking is opt-in per-link. When tracking is on, NavTour logs viewer identity (if known from CRM sync or lead form), per-step engagement, and completion events.

Embed iframe & SDK

Embed a demo anywhere that allows HTML:

<iframe
  src="https://navtour.cloud/e/{demo-id}"
  width="100%"
  height="600"
  frameborder="0"
  allow="fullscreen"
  title="NavTour demo"
></iframe>

For programmatic control (auto-advance, listen for completion events), use the JavaScript SDK:

import NavTour from '@navtour/sdk';
const nt = new NavTour({ demoId: 'demo-abc123' });
nt.on('complete', (e) => trackConversion(e.viewerId));

Demo hubs & showcases

A Hub is a branded collection of demos at its own URL (navtour.cloud/hub/{slug}). Hubs support: filtering by tag or persona, optional lead gate (email required to enter), custom logo and color scheme.

A Showcase is a single-link bundle: one or more demos + optional files (PDF, pricing sheet) sent to a specific prospect. Showcases track per-recipient engagement.

Custom domains

Growth and Enterprise plans can host hubs and share links on your own domain (e.g., demos.acme.com). Set up a CNAME record pointing to custom.navtour.cloud, then add the domain in workspace settings → Publishing.

Events & metrics

NavTour logs the following events per demo session: view_started, frame_viewed, step_completed, branch_chosen, cta_clicked, form_submitted, view_ended. Events are available in the Analytics dashboard, CSV export, and webhook payloads.

Intent scoring

NavTour scores demo sessions 0–100 based on: time spent per frame, number of revisits, CTA clicks, form submissions, and branch depth. Scores above 70 trigger configurable Slack/email alerts.

CSV exports

Export all session data from Analytics → Export. Columns: session_id, demo_id, viewer_email (if known), started_at, ended_at, frames_viewed, steps_completed, intent_score, country, device_type. Data is available for the last 12 months on paid plans.

CRM — Salesforce & HubSpot

NavTour syncs demo engagement as activity records on the Contact or Lead. Configure in Settings → Integrations → CRM. Sync fields: demo name, completion %, intent score, CTA clicked, timestamp.

Salesforce requires OAuth + the NavTour managed package (free on AppExchange). HubSpot uses OAuth only — no package required.

Slack

Post intent alerts to any channel. Configure triggers: demo viewed (any), demo completed, intent score above threshold, CTA clicked. Message includes: viewer identity (if known), demo name, intent score, and a direct link to the analytics view.

Webhooks

NavTour sends HTTPS POST requests to your endpoint on each event. Payload is JSON (see REST API for schema). Webhooks are signed with HMAC-SHA256; verify the X-NavTour-Signature header.

POST https://your-endpoint.com/navtour-hook
X-NavTour-Signature: sha256=abc123...
Content-Type: application/json

{
  "event": "step_completed",
  "demo_id": "demo-abc123",
  "session_id": "sess-xyz",
  "step": 3,
  "intent_score": 72,
  "timestamp": "2026-04-18T14:32:00Z"
}

Zapier & Make

NavTour has a native Zapier integration (search "NavTour" in the Zap editor). Triggers available: Demo Completed, Intent Alert, Lead Captured. Actions available: Create Demo from Template, Update Personalization Token.

Make (formerly Integromat) uses the REST API module. Authentication: API key in the Authorization: Bearer header.

REST API reference

Base URL: https://navtour.cloud/api/v1/. All endpoints require Authorization: Bearer {api_key}. Rate limit: 1,000 req/min on Growth, 10,000 req/min on Enterprise.

Full OpenAPI spec available at /api/v1/openapi.json.

JavaScript SDK

Install: npm install @navtour/sdk. The SDK wraps the embed iframe and exposes an event API.

import NavTour from '@navtour/sdk';

const nt = new NavTour({
  demoId: 'demo-abc123',
  container: '#demo-container',
  tokens: { company: 'Acme', first_name: 'Ana' }
});

nt.on('step_completed', (e) => console.log('Step', e.step));
nt.on('complete', () => document.querySelector('#cta').style.display = 'block');

CLI (ntour)

Install: npm install -g @navtour/cli. Authenticate: ntour auth login.

ntour demos list                      # list all demos
ntour demos publish demo-abc123       # publish a draft demo
ntour share create demo-abc123 \
  --company Acme --first-name Ana     # personalized share link
ntour export sessions demo-abc123     # CSV export

Authentication

NavTour uses API keys for server-side integrations and OAuth 2.0 for user-facing integrations (CRM, Zapier). API keys are workspace-scoped and rotatable from Settings → Developer.

Player access (public demos) uses a separate API key type with read-only scope. Never expose workspace API keys client-side.

Roles & permissions

SSO / SAML

Enterprise workspaces support SAML 2.0 SSO with any compatible IdP (Okta, Azure AD, Google Workspace, OneLogin). Configure in Settings → Security → SSO. Entity ID: https://navtour.cloud/saml/metadata. ACS URL: https://navtour.cloud/saml/acs.

Audit logs

Growth and Enterprise plans get a 90-day audit log of all workspace events: logins, demo creates/deletes, settings changes, API key rotations, and export requests. Export as CSV from Settings → Security → Audit Log.

Billing & seats

NavTour bills per creator seat — anyone who captures, edits, or publishes demos. Viewers (analytics-only) and demo viewers (public) are always unlimited and free. Mid-cycle upgrades are prorated. Downgrade at the end of any billing period.

Security & compliance

NavTour is SOC 2 Type II certified and ISO 27001 compliant. Data is hosted in AWS us-east-1 with a LATAM failover in sa-east-1 (São Paulo). All data at rest is AES-256 encrypted; in transit uses TLS 1.3.

Enterprise customers may request a Data Processing Agreement (DPA), a pre-filled Security Questionnaire from our security team, and access to the audit log export API.

For security questions or vulnerability disclosures: security@navtour.cloud.

Keyboard shortcuts

Troubleshooting

Extension not capturing

Check that the extension is enabled for the domain under Site access in the extension popup. Some enterprise SSO portals block extension scripting — capture on a demo/staging environment instead.

Fonts look wrong in capture

NavTour resets some CSS variables to prevent style bleed. If brand fonts are missing, add them to the workspace font allowlist in Settings → Editor → Fonts.

Share link not working

Check that the demo is Published (not Draft) and that the link hasn’t been revoked. If the demo uses a custom domain, verify the CNAME is propagated.

Glossary