# Welcome to Navless! ## Introduction AI has permanently changed how people expect to find information. And that shift happened fast. Millions of people now turn to tools like ChatGPT for instant answers instead of digging through websites, clicking through menus, or hunting for the “right” page. People have become conditioned to ask a question and get the information they need immediately — in a format that feels natural, conversational, and fast. The same pattern exists in everyday content consumption. Platforms like Netflix, YouTube, Spotify, and even social media have trained people to expect intelligent recommendations, not long searches. Content surfaces for them — personalized, relevant, and sequenced — without any work required to find not just a single piece of content but also the next-best relevant content. This is how people learn today. This is how they explore new topics. This is how they decide what to pay attention to. But most B2B software websites were built for a buyer that no longer exists. Traditional site structures assume visitors are willing to navigate drop-downs, dig through resource hubs, and piece together the story themselves. They’re not. AI has raised expectations across the board. Buyers now expect instant clarity, personalized content, and answers that match their intent — all in one place, without friction. If finding relevant information requires effort, buyers bounce. And they’re not bouncing because your product is weak. They’re bouncing because your website wasn’t built for the way people learn today. Navless exists to close that gap. ### What is Navless? Navless is an AI Guide for websites and beyond. You can embed it in seconds layered on top of any CMS so prospects have a place to get instant answers to any questions and consume hyper personalized content from a smart recommendation engine. It’s like if Netflix & ChatGPT had a baby with all your marketing and sales collateral inside. ### Core Use Cases **Navless for websites:** Instead of static webpages housed in complex menus and drop-downs or using an outdated Chatbot that sucks. You can embed your Navless AI Guide on your site in seconds. It’s as easy as copying & pasting an embed code. Navless is the shortest most efficient path to guide top of funnel prospects from curiosity to conversion on your website. **Customer Stats: 30% reduction in website bounce rate, 129% increase in average website session time, 3x more website conversions from the same traffic.** **Navless for Social & Email Outreach:**The AI Guide is not limited to your website. Marketers and sellers can share Navless “playlists” in emails, LinkedIn messages, at events, and more. Instead of sending a prospect one piece of content and hoping they put in the work to find more, you send one AI powered experience that adapts in seconds as they click and consume content making it as easy as possible to capitalize on attention with “next-best” content recommendations. Buyers get a hyper personalized content journey. You get content intelligence into what they watched, read, chatted about, and shared with their team. **Navless for ABM and Paid Campaigns:** For Paid Campaigns and ABM, Navless turns static landing pages into dynamically personalized destinations. When someone clicks an ad, they land in an AI-Guided experience tailored to who they are and what they care about. The result is simple. More of your campaign budget turns into qualified demand instead of one-and-done visits and a high bounce rate. #### Can Navless replace my Chatbot? Traditional chatbots suck. They are built to capture high-intent buyers who already want to talk to sales. They can’t answer most questions, and can’t surface recommended content. They are also expensive, a pain to maintain, and don’t actually guide prospects through an educational experience for better understanding your product. **AI Guides are different:** Goes live in 1 day with a single embed code. Guides, educates, and persuades, not just qualifies. Serves relevant content in context, instead of canned flows. Works on your website, and any other GTM channels. Behind every AI Guide is robust content intelligence. You see which assets actually perform most, which guided journeys keep people engaged, and which topics correlate with conversion. You also get a **Content Gap Matrix** which tells you what types of content and topics to prioritize and which you can de-prioritize based on data. Instead of guessing what to promote, you double down on what your buyers are already telling you with their AI Guide engagement. #### How easy is it to get started? You can go-live with Navless in one day. AI will ingest and tag your content inside of our content hub and all you need to do is copy and paste the embed code. #### FAQs **Can we embed forms and other CTA’s outside of “Book a Demo” into Navless?** Yes. You can embed multiple forms which the AI Guide will surface at the right time to increase conversions. **Can we integrate Navless with our Marketing Automation platform and CRM?** Yes. You can integrate Navless with Hubspot, Marketo, Salesforce, and Pardot to push contact level Navless engagement intelligence into your current tools. **Will our content be AISEO/GEO and SEO optimized?** Yes. Navelss automatically adds metadata and schema to each individual piece of content and generates robots.txt and llms.txt files so you don’t have to do it manually or hire an AISEO agency. **Can prospects like and save content for later?** Yes and it is a great way to capture leads. Visitors can enter their email to like and save content that way whenever they come back to your AI Guide they can see their content history.Micro Tours are more than just interactive demos—they’re the most effective way to drive revenue and move prospects through the marketing funnel. Unlike traditional Interactive Demos or marketing videos, Micro Tours are built for engagement, conversion, and storytelling. They introduce prospects to key product moments with explainer screens that highlight value and differentiation, while allowing users to experience the product firsthand through interactive demo screens. Micro Tours are short, impactful, and action-driven, designed to meet the needs of today’s distracted, time-strapped prospects—helping them learn, explore, and convert faster than ever. ## How to Contact Us Need additional help? Our support team is here to help! Reach out to our [support team](https://form.asana.com/?k=MGdVhbKun_OG92XX0mAytA\&d=1169712465458242) and they'll help # How Navless Works A Technical Look at How Navless Turns Static Content Into an AI-Guided Experience Navless gives your existing content the intelligence it needs to guide buyers, personalize their experience, and deli #### 1. Content Centralization & AI Structuring Before Navless can guide buyers, it must first understand your content. **Content Hub Initialization** You hand-pick or bulk upload your existing assets into the **Navless Content Hub**: * Web pages * One-pagers * Case studies * Product demos & explainer videos * Slide decks, PDFs, webinars * Vertical or persona-specific assets * Etc. Navless immediately processes and analyzes each piece. **AI Tagging & Metadata Enrichment** After import, Navless automatically applies: * Solution tags * Audience tags * Segment and industry tags * Topic tags * CTA tags * Format classification This creates an organized content hub that allows the AI Guide to surface the right asset at the right time. **SEO & LLM Optimization (GEO/AISEO)** Navless automatically generates: * Schema metadata * Robots.txt * Llms.txt * Structured, LLM-friendly endpoints Your content becomes legible to AI crawlers without tedious manual SEO work or expensive agencies. #### 2. Deploying AI Guides Across Your GTM Motion Once your content is structured, Navless generates real-time AI Guides — modular, embeddable interfaces you can deploy across your marketing and sales channels. **A. Navless for Websites** With a single line of JavaScript, you embed the Navless AI Guide directly on your site. What it enables: * Conversational question answering * “Next-best-content” recommendations * Context-awareness (based on page, referral, and behavior) * A dynamic content layer that sits above static menus It turns every page into an AI-guided destination. **B. Navless for Social & Email Outreach** Marketers and sellers can generate sharable Playlists — adaptive content feeds that evolve as the prospect clicks. Channels include: * Email sequences * LinkedIn DMs * Event follow-ups * Sales call recaps * SDR outbound touchpoints Instead of sending one static asset, you send a complete adaptive content experience. **C. Navless for ABM & Paid Campaigns** Navless transforms static ABM and paid landing pages into personalized content experiences. Capabilities: * Personalized content journeys * AI-curated content based on persona, account, or industry * Session-based recommendations that adjust in real time * Paid clicks turn into high-intent sessions instead of single-page exits. #### 3. Content Intelligence & Journey Analytics This is where Navless becomes a true intelligence layer for your GTM teams. Navless generates a continuous stream of insights, including: * Engagement Insights * Top-performing assets * Time in feed * Completion rates * Engagement patterns (somewhat engaged to highly engaged) **Journey Intelligence** Which content paths lead to conversions Average number of assets consumed before conversion **Content Gap Matrix** A diagnostic map that identifies: * Overused content * Underperforming content * Missing assets needed to support demand * Content quality indicators **Content Bot Traffic** A visibility report that shows: * Which AI crawlers access your content * When bots like ChatGPT, Perplexity, and Gemini visit * Which endpoints they hit (content, robots.txt, sitemap, llms.txt) * Whether your AISEO setup is being detected correctly This eliminates guesswork and replaces it with data-backed content strategy. **Integrations** Navless automatically generates clean, export-ready CSVs with all engagement and intelligence data. Each click becomes a signal your team can review, analyze, and act on. Navless can also integrate with your Marketing Automation Platform and CRM. Tools like Hubspot, Salesforce, Marketo, and Pardot. #### FAQs **How long does implementation take?** Most customers go live within one day. Upload content, paste the embed code, and Navless does the rest. **Can we include internal-only documents?** Yes. Permissions allow you to classify each asset as: Public, Playlist-only, Chat-only, AI-training only, or Private. **What content formats does Navless support?** All formats, including PDFs, decks, videos, product tours, and "vibe-coded" multimedia assets. # Navless Use Cases # For Websites ### Navless For Websites: From Maze To AI-Guided Destinations AI has permanently changed how people expect to find information on websites. People now turn to tools like ChatGPT for instant, conversational answers instead of digging through menus or clicking around a website. The same shift is happening with content. Platforms like Netflix, YouTube, Spotify, and social feeds have trained people to expect smart recommendations, not long searches. Content should surface for them. Relevant, personalized, and sequenced. Zero effort required. Most B2B software websites weren’t built for that reality. They still assume visitors want to explore drop-downs, browse resource hubs, and piece the story together on their own. They don’t. When finding the right information takes work, buyers bounce. Not because your product is weak, but because your website was built for a different buyer. Navless for Websites closes that gap. Navless transforms your website into a guided experience where visitors get instant answers and personalized content pulled directly from your marketing and sales materials. It meets buyers where they are and keeps them moving. With Navless on your site, every visitor gets a straight line from interest to insight. The AI Guide adapts to each click, surfaces the right content, and creates a buying experience that fits how teams evaluate and qualify software today. #### From Static Pages To AI-Guided Journeys Here is what changes when you layer AI Guides on top of your website. **1. Your Content Becomes Centralized and Understood** Navless starts by organizing your existing marketing and sales assets into a single content hub: webpages and one-pagers, customer stories and webinars, product demos and explainer videos, slide decks, PDFs, guides, and more. Once in the system, AI automatically tags every asset by product, solution, persona, segment, topic, and other dimensions that matter to your GTM motion. This is what allows Navless to serve the right content to the right visitor at the right moment. Your content becomes intelligent, not hidden. **2. The AI Guide Sits on Top of Your Site, Not Buried in It** Most websites expect visitors to navigate their way into understanding. Navless removes that work entirely. With one line of code, the AI Guide layers on top of your existing site layout, across every page. **In an instant, visitors can:** * Ask questions naturally and get clear answers * Receive “next-best” content based on their clicks * Explore curated journeys designed around their interests * Skip the navigation maze entirely The experience is dynamic, guided, and conversational. No more resource hubs or guessing where to find the right answers. **3. It Replaces Chatbots That Suck** Traditional chatbots were built for high-intent buyers. They are great at pushing “Talk to Sales,” but they are not great at educating or recommending content. They’re rarely able to answer real questions, they require constant maintenance, and they are not aligned with how people research. **Navless is built for modern buying behavior:** * Goes live in one day with a single embed * Guides and educates instead of interrogating * Serves content in context, not scripted flows * Works across your entire website and beyond If your current chatbot is just an expensive “contact us” gatekeeper, Navless can turn that surface area into an effective learning and decision-making experience. #### What Navless Means For Website Performance When you stop asking visitors to work for clarity and instead give them an AI-guided experience, your website stops leaking opportunities and starts generating meaningful engagement. **Customers using Navless for Websites have seen:** * 30 percent reduction in bounce rate * 129 percent increase in average session time * 3x more conversions from the same traffic These improvements don’t come from adding more pages or website “fluff”. They come from making the content you already have easier to find, easier to understand, and easier to act on. Navless doesn’t ask more from your visitors. Navless does the work for them. # For Outreach (Social & Email) ### From One-Off Touches To AI-Guided Journeys That Convert Outbound has never been louder, and somehow never felt quieter. Your prospects are getting hit with the same recycled openers, the same “bumping this to the top of your inbox” emails, and the same lonely link to a case study that nobody asked for. Reps feel it too. You spend time personalizing messages, researching accounts, stitching together sequences, and what happens? A click. Maybe. A reply. Rarely. A meeting? Only on a full moon. And here’s the real problem: Even when your prospect does engage, you have nowhere meaningful to send them. One link. One asset. One shot to hope they’ll take the initiative to dig through your website and “figure out the value” on their own. They won’t. Buyers today don’t want homework. They want clarity. They want answers. They want the next step to appear without effort. Outbound that relies on static links and one-size-fits-all sequences was built for a buyer who no longer exists. Navless for Outreach closes that gap. Instead of sending people into a maze of webpages and PDFs, Navless lets you share one AI-guided content experience that adapts in real time as they click. Every email, LinkedIn message, and follow-up becomes a personalized journey powered by your best content and surfaced by Navless Content Intelligence. With Navless in your outreach, every click becomes a straight path from curiosity to conversion. ### Social & Marketing Email Outreach That Adapts In Real Time Traditional marketing outreach is static. You decide which asset to send, hit send, and hope it lands. If the prospect’s interests shift or they want a different angle, your only option is another email, social post, or hoping they put in “work” finding what they need from your website. Navless is dynamic. **When someone clicks your Navless playlist link in:** * A LinkedIn post * A marketing email * A newsletter post * An event page * Etc. They land in an AI-guided experience that adjusts on the fly. **Visitors can:** * Ask questions naturally and get clear, contextual answers * Explore curated content specific to their role, industry, and use case * Follow “next” recommendations that build understanding step by step Under the hood, Navless is using AI tagging and engagement signals to decide what to recommend next, not a hard-coded content path. The guide gets smarter over time as more prospects and customers engage. **The end result:** every touch turns into a personalized content journey instead of a dead-end click. ### Content Playlists For Sales Outreach Most outbound motions still work like this: * SDR sends a single case study * AE drops a product video into a follow up * Marketing adds a webinar link into a nurture email If the prospect wants more, they are on their own. They have to go back to your website, hunt through navigation, and self-assemble the story. Most do not bother. Navless flips that model giving your team the ability to assemble “playlists” that actually match the buyer on the other end of your outreach. So instead of sending a single asset, your rep sends a **Navless playlist link**. **Behind that one link is:** * A guided content experience tailored to that account or persona * An AI Guide that can answer questions in real time * “Next-best” content recommendations that adapt as they click and consume Your content stops behaving like a static attachment and starts behaving like a personalized destination. ### What Changes For Your GTM Team Navless for Outreach is not just a nicer way to package links. It changes how your teams operate. **For Marketing:** * Turn every campaign touchpoint into an AI-guided destination * Reuse the same curated playlists across social, email, and events * See which journeys actually move people forward instead of tracking clicks in isolation **For SDRs:** * Stop guessing which asset to send * Use pre-built playlists for common personas, problems, and campaigns * Let Navless handle the “what should they see next” question in real time **For AEs:** * Send one link that educates the entire buying committee * Give champions a guided resource hub they can share internally * Use AI-guided experiences for demo follow ups and nurtures **For RevOps:** * Get cleaner engagement data mapped to accounts and contacts * See which topics and sequences correlate with pipeline, not just opens Everyone gets out of the business of “random acts of content” and into a system where outreach is powered by AI Guides. # For ABM & Paid Campaigns ### Navless For ABM & Paid Ads: From Clicks To AI-Guided Destinations AI changed how people expect to find and consume information. People are used to asking a question, getting an instant answer, and being handed exactly what to watch, read, or listen to next. That expectation applies just as much to your ABM motions and paid media as it does to your website or outbound. **But most ABM and paid programs still behave like it’s 2015:** * One offer * One static landing page * One piece of content And a hope that the prospect will do the work to click around, explore your site, and “get the full picture” on their own. They won’t. You are paying to drive the right accounts to the right pages, then asking them to hunt for relevance. You get a form fill here, a content click there, and a dashboard full of surface-level metrics that tell you very little about what those accounts actually cared about. ABM and paid campaigns built on static destinations were designed for a buyer that no longer exists. ### From One-Size-Fits-All Clicks To AI-Guided Campaign Destinations Navless transforms every campaign click into an AI-guided experience powered by your best, and most relevant content. Not just a single asset and a dead-end thank-you page. Instead of sending an account to a generic landing page and hoping they explore, you send them into a Navless AI Guide or **curated “playlist”** designed for that segment, persona, topic, or even that specific account. The guide adapts as they engage, surfaces next-best content automatically, and tracks every action in Navless Content Intelligence. With Navless in your ABM and paid engine, every dollar you spend drives into a guided destination that actually teaches, qualifies, and converts. Navless starts by ingesting the content you already have into a central hub. AI then tags each asset by product, solution, persona, segment, topic, and other GTM dimensions that matter to your ABM strategy. This lets Navless understand what a given account is engaging with and what should come next. **From there, you plug Navless into your campaigns in two primary ways:** * Add an AI Guide widget on top of existing landing pages * Use a Navless playlist link as the primary destination for specific campaigns or account clusters So when someone clicks your LinkedIn ad, display creative, sponsored newsletter placement, or programmatic unit, they don’t land on a static page. They land in an AI-guided experience built around the exact message that got them to click in the first place. **Visitors can:** * Ask questions in natural language and get clear, contextual answers * See curated content designed for their role, industry, and problem * Follow AI-recommended “next” steps that build understanding instead of forcing them back into your website navigation maze Your campaigns stop sending traffic to pages. They send traffic to personalized destinations. Most ABM and paid campaigns still ship a single asset. Navless flips that model by letting you build AI-powered playlists mapped to your ABM themes and offers. Instead of promoting just one asset, you promote a guided content journey. Navless uses AI tagging and engagement data to adapt playlists in real time. If the buyer leans into a specific topic, industry, or feature, the guide surfaces the most relevant next-best content automatically. Your ABM and paid campaigns start behaving more like Netflix or Spotify recommendations and less like “hope they download this one PDF and figure it out.” ABM lives or dies on relevance. But scaling relevance across hundreds of accounts without burning out your team is the hard part.**The AI Guide handles the heavy lifting:** * Tailors recommendations based on behavior inside the experience * Surfaces the most relevant assets for that account’s interests * Keeps visitors moving forward instead of bouncing after one asset For high-value accounts, your team can layer on true 1:1 experiences without starting from scratch every time. For broader segments, you still deliver a personalized journey that feels bespoke without creating a new microsite for every campaign. **Stop Sending Traffic to Dead Ends.** You are already paying to get the right people to click. Navless for ABM & Paid Ads makes sure those clicks land somewhere that actually educates, guides, and converts – while giving your team the clarity to invest in the content and campaigns that matter most. # As A Chatbot ### Chatbots Suck. AI Guides don’t – here’s why. On paper, chatbots sound like a decent solution for scaling sales and marketing conversations. A 24/7 assistant that could qualify leads, answer questions, and help top-of-funnel buyers move through the funnel effortlessly sounds like a dream. The reality? Chatbots are a glorified demo booking pop-up with no personality or guidance for helping people learn more about your products and solutions. If your chatbot’s first response is “Talk to Sales,” stops at “Get a Demo,” or pops up every five seconds begging for attention, then by our standards, it sucks. Luckily, we’ve created a better way to guide buyers, one that delivers what they actually want: instant answers, relevant content, and a path that makes sense to the individual buyer. ### What is an AI Guide? AI has permanently changed how people expect to find information. Millions now turn to tools like ChatGPT for instant, conversational answers instead of digging through websites and menus. The same thing is happening with content. Platforms like Netflix, YouTube, Spotify, and social feeds have trained people to expect smart recommendations, not long searches. Content should surface for them – relevant, personalized, and sequenced – without extra work. Most B2B software websites weren’t built for that reality. They still assume visitors will navigate dropdowns, explore resource hubs, and piece together the story themselves. They won’t. If finding the right information takes effort, buyers bounce. Not because your product is weak, but because your website wasn’t built for how people learn today. Navless for Websites exists to close that gap. Navless is an AI Guide for websites and beyond. You can embed it in seconds on top of any CMS so prospects have one place to get instant answers and consume hyper-personalized content recommendations. **Think Netflix and ChatGPT combined, but filled with your marketing and sales collateral.** It’s the shortest and smartest way from curiosity to conversion. Check out the video below: {% embed url="" %} ### Let’s compare: #### 1. How They Start the Conversation **Chatbots** greet visitors with the same generic “How can I help you?” and three pre-set options that all end up at “Book a Demo.” It’s not really a chat at all. It’s a sales form in disguise. **AI Guides** meet buyers where they are. It listens, learns, and recommends content based on what the buyer actually wants to know. Instead of steering toward sales too soon, it answers the buyer’s question first. #### 2. How They Handle Questions **Chatbots** rely on scripts and pre-set keywords. Ask them something slightly off-script, and you’ll get the same tired response: “I’m not sure, but would you like to talk to sales?” **AI Guides** understand context. It delivers the most relevant pieces of content from your library and then recommends additional content to keep their curiosity moving them to the conversion. #### 3. How They Build Trust **Chatbots** interrupt. They pop up every few seconds, ask for information too soon, and assume interest before it’s earned. It might capture a few eager leads, but you risk deterring the rest of your pipeline in the process. **AI Guides** do the opposite. It lets buyers learn at their own pace and surface value first. The call to action only appears after the buyer sufficiently understands what your product is and why it fits their problem. #### 4. How They Scale **Chatbots** require constant management: updating scripts and mapping, monitoring notifications, and routing conversations manually. **AI Guides** scales intelligence and takes mere minutes to implement. It gets smarter over time, learning from the content you input as well as buyer behavior patterns and engagement data. The more content you add, the better it recommends.
### Why the AI Guide Wins: ![](https://s3.tourial.com/content/687dab9d7c9de05114a83115/documentuploads/6924e5e71b5996f80b576e7b/ai-summary-assets/img-da140a8b-ed9b-4829-b6bf-507e938cb304-0.png) # Set up a Brand Kit Define your brand's voice, vocabulary, and theme once so every Guide and draft uses them. ### What this is for A **Brand Kit** is the source of truth for how your brand sounds and looks across **Navless**. You set the voice, the words to use and avoid, the colors, and the guardrails once — and every **Guide** on your site and every draft you create in **AEO Signal** (Answer Engine Optimization — how AI engines like ChatGPT and Perplexity decide what to quote) follows those rules from then on. You can fill in a kit by hand across seven tabs, or paste a URL and let AI fill it in for you. Either way, the same kit drives everything the AI writes for your account. ### Before you start * You need Navless enabled on your account. If Navless is not enabled in your account, please reach out to the [Navless team.](https://www.navless.ai/demo) ### Step 1: Open a new Brand Kit * Go to **Content Management** and open **Brand Kits**. You'll see a card for each kit in your account, with the brand's name, description, color swatches, voice tone, reading level, and domain. * Click **Create Brand Kit**.
### Step 2: Fill in the kit (the fast way) If you have a public website, the fastest path is to let AI infer the kit from your site and then review. * Click **Generate with AI** at the top of the editor. * Enter the URL you want the AI to read — usually your homepage or about page. * You'll see status messages cycle through: *Researching company website… Analyzing brand voice and tone… Identifying communication style… Evaluating content patterns… Detecting personality traits… Compiling brand kit settings…* * When generation finishes, around twenty fields are populated — name, description, voice adjectives, theme colors, personality traits, and more. The form is marked as having unsaved changes. * Read through every tab. Edit anything that doesn't sound like you. * Click **Save** at the top of the form. ⚠️ **Important:** If you click **Generate with AI** on a Brand Kit that already has content, the AI will overwrite the existing values in the Brand Kit. It doesn't fill missing fields only. Use it on new kits, or be ready to lose any manual edits in the current form. Nothing is overwritten until you click **Save**, so you can close without saving to keep the previous version. 📝 **Note:** If you close the modal while the AI is still working, you'll see a confirmation: *"AI is currently analyzing your brand. If you close now, the results will be lost."* The kit hasn't been saved yet, so closing mid-run cancels the run.
### Step 2 (alternative): Fill in the kit by hand If you'd rather start from your brand guidelines, work through the seven tabs in order. Each tab covers one piece of your brand. #### Identity * Enter a **Name** for the kit (required). * Add the brand's **Domain** and a short **Description** of when this kit should be used. * Upload a **Logo**, **Favicon**, and **Square logo**. * Use the **Default** toggle if this should be the kit that auto-applies to new Guides and drafts. The first kit in your account becomes the default automatically. #### Theme * Set eleven color tokens — **Primary**, **Background**, **Foreground**, **Muted**, **Border**, and others. * These colors drive the look of the Guide chat experience on your site. They don't affect how the AI writes; they affect how it looks. * If you're not sure, leave the defaults — they match a clean light theme out of the box. #### Voice & Tone * Add up to six **Voice adjectives** (e.g. confident, warm, no-nonsense) that capture how your brand talks. * Write any **Voice guidelines** that don't fit in the adjectives — full sentences are fine. * Drag the **Formality** slider from 1 (Casual) to 5 (Formal). * Drag the **Technicality** slider from 1 (Plain English) to 5 (Technical). * Choose a **Point of view**, a **Reading level**, and up to five **Personality traits**. #### Vocabulary * Add **Preferred terms** as pairs — the word to avoid, and the word to use instead. ("user" → "customer", for example.) * List **Words to avoid** and **Phrases to avoid** outright. * Set any **Capitalization** and **Formatting** rules specific to your brand. #### Style * Set **Max sentences per paragraph** (1–10). * Choose your **Headline case** — sentence case or title case — and any other headline rules. * Set your **Emoji** policy: Never, Sparingly, or Allowed. * Set your **Markdown** preference and whether you favor **bullets** or **paragraphs**. #### Examples * Paste **Good examples** of real content that nails your voice. The AI uses these as anchors. * Paste **What not to do** examples — content that sounds wrong for your brand. * Two or three strong examples in each box go a long way. #### Guardrails * Set the **Competitor mentions** policy: Allowed, or Never mention. * Add the brand names of competitors you don't want surfaced. * The AI will route around them in every response. ### Step 3: Save the kit * Click **Save** at the top of the form. Saving is explicit — Brand Kits don't autosave, so changes won't take effect until you save. * After saving, the kit appears as a card on the Brand Kits list. ### What success looks like Your kit shows up in the Brand Kits list with its name, description, color swatches, and voice tone. If you marked it as the default, you'll see a **Default** badge on the card. From this point on, every Guide and every draft you create in AEO Signal will use this kit — voice, vocabulary, and style for what the AI writes, theme colors for how the Guide chat looks on your site. Updates to the kit propagate immediately: edit the kit once, and every Guide using it picks up the new voice on the next response. There's nothing to republish. ### Common questions #### How many Brand Kits can I have? As many as you want. One kit per account is marked as the default and auto-applies to new Guides and new drafts. You can override the kit per Guide or per draft. Many customers run a marketing kit, a docs kit, and a sales kit in parallel. #### What happens if I change my kit later? Edit the kit and click **Save**. Every Guide using it picks up the new voice and theme on the next response, and any new draft will use the updated rules. There's no need to redeploy a Guide or re-run a campaign. #### Can I delete a Brand Kit? Yes. Open the kit's card and choose delete. You'll see a confirmation: *"Delete '{name}'? This action cannot be undone."* Make sure no Guide or draft you care about is still pointing at the kit before you confirm.\ \ Your default Brand Kit cannot be deleted. Select a new kit to be the default first. #### Can I duplicate an existing kit? Yes. Each kit card has a **Clone** action. Clone is useful when you want a second kit that's mostly the same as the first — for example, a marketing kit and a docs kit that share voice but differ on technicality and style. # Create and Manage your Guides Build an AI Guide for your any page that uses your content, your voice, and the skills you choose. ### What this is for A **Guide** is an AI experience you put on any page. It answers visitor questions using your content (through Knowledge Bases) in your brand voice (through a Brand Kit), and you control which kinds of answers it's allowed to produce. This article walks you through creating one from scratch, configuring it, and sharing it. You can have as many **Guides** as you want — one for your marketing site, one for product docs, one tuned for sales conversations — each with its own URL, embed, and analytics. ### Before you start Guide must be enabled on your account. If you don't see Guide in your account, please reach out to the [Navless team](https://www.navless.ai/demo). You'll also need at least one of each of the following set up in your account: * A **Brand Kit** — controls the voice, tone, and visual styling of your **Guide**. * A **Knowledge Base** — the content your **Guide** draws on to answer questions. If you don't have these yet, set them up first. You'll be prompted to pick them when you create the **Guide**. ### Step 1: Open the Guides list 1. Go to **Guides** in the left-hand menu.
### Step 2: Create a new Guide * Click **Create Guide**.
* In the modal, enter a **Name** for your **Guide**. * Select a **Brand Kit** from the dropdown. * Select one or more **Knowledge Bases**. * Click **Create Guide**.
You'll land on the edit page for your new **Guide**, with four tabs across the top.
### Step 3: Configure the four tabs Each tab covers a different part of how your **Guide** looks and behaves. Walk through them in order the first time. #### General — identity and first impression This is what visitors see when they land on your **Guide**. 1. Set the **Name** and URL **slug** (the slug shows up in the hosted link). 2. Add or remove **Knowledge Bases**. A single **Guide** can pull from several. 3. Enter a **Welcome message** that greets visitors. 4. Set titles for the **suggestion** area, the "**pick up where you left off**" prompt, and the **help section**. 5. Configure the **side tab button text** and choose whether to show the **Guide**'s name on it. 6. Add **Chat placeholders** — up to five rotating prompts that appear in the chat box to suggest what to ask. 7. If you want visitors to be able to download answers as PDFs, configure the PDF description, and disclaimer(s). 8. Select the form to use with your **Magic Link**. #### Behavior — how it talks and what it does when it can't help 1. Enter **Skill Routing** instructions to udge the **Guide** to prefer certain skills over others. For example, "prefer How-To over Answer for setup questions." 2. Enter **Response Generation** instructions to shape the tone, emphasis, phrasing, and length of responses. For example, "use a casual tone". 3. Set a **Fallback CTA** — a button label and URL that appears when the **Guide** can't answer. This is your safety net for routing visitors to sales, signup, or wherever you want them to go next. 4. Decide how visitors can personalize the **Guide** by selecting from a list of roles and intents, and whether to use AI-generated roles or custom ones you define. ⚠️ **Important:** Custom instructions can change *how* the **Guide** writes, but not *what* it draws from. They can't change which content is retrieved, which roles or intents are available, or the structure of any deliverable. If you need to change those, configure the **Brand Kit**, **Knowledge Bases**, or skills directly. #### Skills — what kinds of answers it can produce Skills are the different response types your **Guide** knows how to produce. Each one is shaped differently — a How-To looks different from a Business Case. Turn on the ones that fit your visitors: * **Answer** — direct answers to questions (always on) * **Playlist** — assembles a curated set of content * **Diagnose** — helps a visitor troubleshoot a problem * **How-To** — step-by-step instructions * **Business Case** — builds a written case for a decision * **Solution Design** — outlines a tailored solution For each skill you turn on, you can optionally set an **email gate** — for example, "ask the visitor for their email after 3 responses from this skill." Disabled skills are removed from the **Guide**. 📝 **Note:** Answer is always on. You can't turn it off. #### Branding — what it knows and how it looks 1. Confirm the **Brand Kit** powering the voice and visual style. One per **Guide**. 2. Upload a **hero image**. 3. Use the **live preview** on this tab to see your **Guide** with the chosen settings applied before you save. ### Step 4: Save Click **Save** at the top of the edit page. Your changes are live immediately on the hosted URL and any embed you've installed — there's no separate publish step. ### Step 5: Share your Guide You have three ways to get your **Guide** in front of visitors: * **Analytics** — every **Guide** gets its own dashboard with sessions, visitors, and traffic sources. * **Copy Link** — a hosted URL on your domain. Drop it in an email, post it on social, share it in sales outreach. Visitors land on the full-page **Guide**. * [**Generate Embed**](/guide/embed-a-guide-on-any-page) — a copy-paste snippet that puts the **Guide** on your page as a button or a chat input. Walks you through a short setup wizard. ### What success looks like Your **Guide** appears in the **Guides** list with a working hosted URL. When you open the link, the **Guide** greets visitors with your welcome message and rotating placeholders, answers in your brand voice, and uses your **Knowledge Bases** to draw responses. The skills you turned on appear as starter prompts; the ones you turned off don't. If your brand changes later, you update the **Brand Kit** once and every **Guide** using it picks up the change. ### Tips and gotchas 💡 **Tip:** Use the live preview on the **Branding** tab as your check before saving. There's no separate draft state, so the preview is the safest place to confirm your changes look right. ⚠️ **Important:** Email gates are configured per skill, not per **Guide**. ### Common questions #### Do I need to publish a Guide for changes to go live? No. When you click **Save**, your changes are live on the hosted URL and any installed embed. There's no separate publish step. #### Can I have more than one Guide? Yes, as many as you want. Each **Guide** has its own entry in the list, its own URL, its own embed, and its own analytics dashboard. #### What happens to my Guides if I update a Brand Kit? Every **Guide** that uses that **Brand Kit** picks up the change automatically. You don't need to re-edit individual **Guides**. #### Can custom instructions change which content the Guide answers from? No. Custom instructions control tone, emphasis, length, and skill preference. To change what content the **Guide** can draw from, edit its **Knowledge Bases** on the **General** tab. #### When should I ask visitors for their email? Gate the skills that signal real intent — **Business Case** and **Solution Design** are common choices — and leave **Answer** ungated so visitors can ask quick questions without friction. Set the threshold (for example, "ask after 3 responses") high enough that visitors get value before they're asked. # Embed a Guide on any Page Put a Guide on any page of your own site using two snippets of code. ### What this is for Once you've built a Guide, you'll want visitors on your own website to actually use it — without sending them off to a Navless URL. **Generate Embed** is a short wizard that turns a Guide into a small piece of code your web team can paste into any page. Visitors then interact with the Guide right inside your site. You can pick between two ways to let visitors open the Guide: a clickable **CTA button** ("Get Help", "Talk to Sales", anything you want) or an always-visible **chat input field** where they can type a question to start. ### Before you start * You need a published Guide to embed. * Someone on your team needs access to edit your page's HTML ### Step-by-step * Open the Guide you want to embed and click **Generate Embed** in the top-right corner of the toolbar.
* On the first step, choose what kind of trigger you want visitors to use: **Create a new CTA button** or **Add a chat input field**. The wizard will adjust the next step based on your choice.
* On the design step, style the trigger to match your site. A live preview updates as you edit. * For a **CTA button**, you can set the button text, the action (whether clicking opens the Guide's welcome screen or sends a specific opening prompt), background color, text color, size (small, medium, or large), and shape (rounded, pill, or square).
* For a **chat input field**, you can set the placeholder text, the send-button color, and the shape.
* Click **Continue** to move to the install step. You'll see two pieces of code, each with a copy button. * Button Example
* Chat Input Example
* Copy the **script tag** and paste it into your site's HTML, either inside the `` or just before the closing `` tag. Add it to every page where you want the Guide to be available. * Copy the **trigger HTML** and paste it wherever on the page you want the button or chat field to appear. * Save and publish your site changes. Refresh the page and the Guide trigger will appear where you pasted it. ### What success looks like Visitors see your CTA button or chat input sitting inline on the page, styled the way you set it. When they click the button (or type a question and hit enter), a panel slides in from the left and the Guide opens inside it. The rest of the page dims behind the panel. When the visitor closes it, a small re-open tab stays pinned to the edge of the screen so they can pick the conversation back up. ### Tips and gotchas ⚠️ **Important:** The embed uses a CSS class called `navless-cta` to find your trigger element on the page. If your page already uses that class name for something unrelated, those elements will turn into Guide triggers too. Rename them on your site before publishing, or let your web team know to watch for it. 💡 **Tip:** You can put the script tag on a page once and use as many triggers as you want on that page. A CTA button in the header and a chat input at the bottom is a common combination — both open the same Guide and roll up to the same analytics. 📝 **Note:** On mobile, the Guide panel takes the full screen instead of sliding in from the side. You don't need to do anything different — the layout adjusts automatically. ### Common questions #### Does my team need engineering to install this? No. Anyone who can edit your page's HTML can paste in the two snippets — whether you're on Webflow, WordPress, a custom React build, or anything else. The wizard tells you exactly where each piece goes. #### Can I change the design later without re-embedding? Yes. You can re-run the wizard to generate fresh code, or your developer can edit the colors directly in the trigger HTML — the styling lives inline in the snippet itself, so there's no separate stylesheet to update. #### Can I put the same Guide on multiple pages? Yes. Add the script tag to each page where you want the Guide available, then paste the trigger HTML wherever you want it to appear. You can also place multiple triggers on the same page. #### Will I see analytics for visitors who use the embed? Yes. Conversations through an embedded Guide flow into the same analytics as any other Guide session. The embed is a different entry point into the same Guide, not a separate product. #### What if I want a specific opening message instead of the Guide's welcome screen? On the design step for a CTA button, you can set the action to send a custom opening prompt instead of showing the welcome screen. The visitor clicks the button, the Guide opens, and your prompt becomes the first message — useful for things like "How do I get started?" on a pricing page. # Getting stared with AEO Signal Finish a five-step checklist to set up AI answer tracking for your brand. ### What this is for? AEO Signal tracks how your brand shows up in AI answer engines like ChatGPT, Perplexity, and Google's AI overviews — the AEO (Answer Engine Optimization) side of search, not the blue-link side. Before AEO Signal can give you meaningful tracking, fixes, and drafts, it needs to know your brand, your voice, and the questions you care about. The Getting Started checklist on your AEO Signal dashboard walks you through everything AEO Signal needs, in order. ### Before you start AEO Signal must be enabled on your account. If you don't see AEO Signal in your account, please reach out to the [Navless team](https://www.navless.ai/demo). ### Step-by-step Open AEO Signal and you'll land on the dashboard with the Getting Started checklist at the top. Work through it from the top down — each step makes the next one smarter.
#### Step 1: Set up your company profile Tell AEO Signal who you are so every AI prompt it runs is personalized to your brand. * Click the first step, **Set up your company profile**
* Enter your **brand name**, **company URL**, **industry**, **product category**, and a short **company description** * Click **Save** 💡 **Tip:** Click **Generate with AI** to fill the profile in from your website automatically. Review what it pulls in before saving.
#### Step 2: Review your Brand Kit Confirm the voice, tone, and visual identity AEO Signal will use when it generates drafts and recommends fixes. * Click **Review your Brand Kit**
* Look through the basic information, voice attributes, examples, and guardrails * Edit anything that doesn't sound or look like your brand * Click **Save**
#### Step 3: Discover your first questions Pick the questions you want to be the answer to. These are what AEO Signal will monitor across AI engines. * Click **Discover your first questions**
* Browse the questions AEO Signal suggests based on your industry and company description * Select the questions you want to track and click **Add** You only need one question to complete this step, but more questions give you a fuller picture of where your brand is showing up.
#### Step 4: Review your fixes See what AEO Signal recommends changing on your existing pages to improve how AI engines surface your brand. * Click **Review your fixes**
* Open a fix to see the page it applies to, the issue AEO Signal found, and the suggested change * Mark at least one fix as reviewed
#### Step 5: Create your first draft Generate a new piece of content built to win AI answers for one of the questions you're tracking. * Click **Create your first draft**
* Select a question to target * Click **Generate** and wait for AEO Signal to produce the draft * Review the draft and edit anything you'd like before saving The draft uses your Brand Kit for voice and tone and targets a gap AEO Signal found, so it should already sound like you.
### What success looks like When all five steps are complete, a celebration card appears on your dashboard and the checklist can be dismissed. You'll have live AI visibility tracking for the questions you picked, a prioritized list of fixes for your existing pages, and your first draft ready to refine and publish.
### Tips & gotchas ⚠️ **Important:** The checklist tracks completion based on what's actually in your account — a filled-in profile, a saved Brand Kit, a tracked question, a reviewed fix, and a saved draft. There's no manual "mark as complete" button, so progress reflects real work. 📝 **Note:** You don't have to do the steps in order. You can jump ahead, and the dashboard will reflect what you've finished. The checklist is a guide, not a gate. 📝 **Note:** Analytics start working as soon as AEO Signal has data to show. You don't have to finish all five steps before insights start appearing. ### Common questions #### Can I skip the checklist and go straight to the dashboard? Yes. The checklist is a guide, not a gate — you can click into any part of AEO Signal at any time. The checklist will keep tracking what you've finished and nudge you to come back to anything you haven't. #### Do I have to do all five steps before AEO Signal starts tracking? No. As soon as you add a question in step 3, AEO Signal starts monitoring it across AI engines. The other steps make the output better, but they don't block tracking. #### What if I want to come back to the checklist after dismissing it? Once you've finished all five steps, you can dismiss the checklist from your dashboard. The steps stay completed — dismissing only hides the card. If you want to add more questions, Brand Kits, or drafts later, you can do that from the relevant section of AEO Signal directly. #### I already have a Brand Kit. Do I still need to do step 2? Yes, but it's quick. Step 2 is about confirming the Brand Kit AEO Signal seeded for you matches your real brand. Open it, check the colors, fonts, and voice, edit anything that's off, and save. # Understand your AI Brand Rank score in AEO Signal See how often your brand shows up in AI answers, and what to fix next. ### What this is for? AI Brand Rank tells you how visible your brand is when ChatGPT, Gemini, Claude, and other AI assistants answer questions in your category. If you're trying to answer "are we winning AI search, or are competitors getting mentioned instead of us?" — this is the score that gives you one number to track and one thing to fix next. The higher your number, the more often your brand appears when an AI assistant answers a question your buyers actually ask. ### Before you start * AEO Signal must be enabled on your account. * You need tracked questions set up. Brand Rank scores the answers AI assistants give to *your* questions, so without questions there's nothing to probe. * You need at least 5 tracked questions and 10 total probe responses before a score can be calculated. Below that, you'll see an empty state instead of a number. ### How to read your Brand Rank The Brand Rank section of the AEO Signal dashboard is a grid of cards. Each one answers a different question about your AI visibility.
#### 1. Your Brand Rank The headline card. You'll see the 0–100 score, the letter grade, your share-of-voice percentage, the number of probed questions and AI platforms behind the number, and how much the score moved versus the previous snapshot.
The grade scale: | Grade | Score | Meaning | | ----- | ------ | ------------------ | | A | 80–100 | Excellent | | B | 60–79 | Good | | C | 40–59 | Moderate | | D | 20–39 | Low | | F | 0–19 | Minimal visibility | #### 2. Competitive Position Mention counts for your brand against each known competitor across all probes. Use this when you need to answer "are we losing the AI shelf to a specific competitor, and by how much?"
#### 3. Brand Rank Trend A 30-day line chart of your score across successive snapshots. This is the card you show leadership when you want to demonstrate that content investment is moving the number.
#### 4. Buyer Journey Coverage Brand mentions broken down by question intent — Learn, Compare, Decide, and Troubleshoot. If you only show up in Troubleshoot, AI assistants know you exist but aren't recommending you during research or comparison. That's a different content problem than not showing up at all.
#### 5. Top Priority The single most important thing to fix next, based on your latest snapshot. AEO Signal picks one recommendation — never a generic list — using a simple set of rules. If your snapshot looks healthy, the card is hidden. That's the "you're doing fine, keep going" signal.
#### 6. Methodology Click into the methodology modal from the score card any time you need to explain the formula, weights, and minimum-data thresholds to a stakeholder. ### How the score is calculated AEO Signal sends each of your tracked questions to every supported AI platform, checks each answer for mentions of your brand (company name plus aliases), and rolls the results into a single snapshot. \[VISUAL: Diagram — tracked questions → probes against each AI platform (ChatGPT, Gemini, Claude, others) → brand mention detection → Brand Rank snapshot → dashboard. Simplified version of the PM-view flowchart, with codebase references stripped] Two things blend into the final score: **Share of Voice (60% weight).** The percentage of your probed questions where at least one AI platform mentioned your brand. This reflects how often you show up across the topics your audience cares about. **AI Platform Coverage (40% weight).** The percentage of AI platforms that mentioned your brand on at least one question. This reflects how broadly you show up — being on every assistant matters, not just one. The full formula: ``` Score = 100 × (0.6 × Share of Voice + 0.4 × AI Platform Coverage) ``` The probes use a clean prompt with no brand hints, so the answers reflect what a real prospect would see if they asked the same question themselves — not an artificially inflated number. ### How the Top Priority recommendation is picked The recommendation runs through three checks, in order. The first one that matches wins. 1. **Is any competitor mentioned more than your brand?** If yes, the recommendation is **Create comparison content** against the leading competitor. The mention gap is the lever. 2. **Do you have fewer than 50 total tracked questions?** If yes, the recommendation is **Expand question coverage** so your score is built on statistically significant data. 3. **Is your mention rate below 30%?** If yes, the recommendation is **Improve content visibility** by creating more authoritative content on the topics where you're missing. If none of those match, the Top Priority card is hidden. ### Tips & gotchas 📝 **Note:** The score recalculates automatically after every scheduled probe run — weekly or monthly depending on your plan — and after any manual update. You can also trigger a recalculation on demand from the dashboard. ⚠️ **Important:** The score itself doesn't change based on how many questions you've tracked, but the dashboard surfaces a separate **Confidence** label next to it. Confidence is Excellent at 200+ questions, High at 100+, Medium at 50+, and Low below 50. A "Low Confidence" A grade is possible — it means you're winning on the few questions you track, not that you're winning broadly. Build out your question coverage before treating an early high score as the full picture. 💡 **Tip:** Use the Buyer Journey Coverage card to diagnose *where* a gap lives before you spend on content. A brand that's invisible at Compare doesn't need more brand-awareness content — it needs comparison pages. ### Common questions #### How is this different from SEO? SEO measures who ranks on a Google search results page. Brand Rank measures who gets mentioned *inside the AI answer itself* — the text more and more buyers read instead of clicking through to a blue link. Different surface, different rules, different winners. #### How often does the score update? Automatically, after every probe run — weekly or monthly depending on your plan. You can also trigger a recalculation on demand from the dashboard. #### Why does the score say "—" or show an empty state? You haven't crossed the minimum data threshold yet. AEO Signal needs at least 5 tracked questions and 10 total probe responses before it can produce a meaningful score. Add more questions or wait for the next probe run. #### What if my score is low? A low score is a starting position, not a verdict. Check the Top Priority card — it tells you the single highest-leverage move, whether that's closing a gap with a specific competitor, broadening your question set, or producing more authoritative content on topics where you're invisible. #### Why a single score instead of a list of mentions? Because a single number is what tracks over time and gets shown to leadership. The list of mentions is still there — it's in the Competitive Position and Buyer Journey Coverage cards — but the headline number is what makes the trend legible. # Tagging Your Content # How to Choose Journey Stage Tags for Your Content Journey stage (also called buyer stage) tags help you organize content by *where it fits in a customer’s decision process*. Tagging content correctly makes your library easier to search, sequence, and recommend—both for humans and for AI agents. This guide explains each stage, how to decide what to pick, and common pitfalls to avoid. *** ### What “Journey Stage” Means A journey stage tag answers one question: **“What job is this content doing for the user *****right now*****?”** Not “what is the content about?”\ Not “who is it for?”\ But *what decision or learning step it supports.* A single piece of content can support more than one stage, but in most cases there’s a **primary stage** that matches the main intent. *** ### The Core Stages (with plain-English definitions) Use whichever labels your product shows. These are the common meanings: #### 1) Awareness / Problem Discovery **Goal:** Help someone recognize or name a problem/opportunity.\ **User mindset:** “Something feels off—what’s going on?” or “I want to improve X.” **Content types that fit here:** * Educational explainers * Industry trends or “why this matters” * Thought leadership / “what good looks like” * Pain-point spotlights * Beginner overviews **Good signals in the content:** * Defines a problem * Frames stakes or impact * Uses broad language (“teams like yours often…”) * Doesn’t assume the user knows solutions yet *** #### 2) Consideration / Solution Exploration **Goal:** Help someone evaluate different approaches or categories of solutions.\ **User mindset:** “What are my options? How do people solve this?” **Content types that fit here:** * Comparisons of methods, tools, or frameworks * “How to choose…” guides * Deep dives into strategies * Case studies focused on *approach* * Feature breakdowns without a hard sell **Good signals in the content:** * Mentions multiple possible solutions OR how to evaluate them * Talks about requirements, criteria, or tradeoffs * Assumes the user already agrees there’s a problem to solve *** #### 3) Decision / Vendor Selection **Goal:** Help someone choose a specific solution, product, or provider.\ **User mindset:** “Which one should I pick? Is this the right fit?” **Content types that fit here:** * Product demos or walkthroughs * Pricing / packaging explanations * ROI or business-case calculators * Implementation plans and timelines * Competitive comparisons * Proof-heavy customer stories **Good signals in the content:** * Answers objections * Shows results, numbers, or guarantees * Focuses on *your* solution’s fit * Includes CTAs like “book a demo” or “start trial” *** #### 4) Adoption / Onboarding (Post-Purchase) **Goal:** Help a new customer succeed after they’ve chosen a solution.\ **User mindset:** “How do I set this up and get value?” **Content types that fit here:** * Getting started guides * Setup, configuration, and integrations * Best practices for first wins * Training or certification content * 30/60/90-day playbooks **Good signals in the content:** * Assumes the user has access to the product * Focuses on usage and workflow * Success milestones, not persuasion *** #### 5) Retention / Expansion / Advanced Use (Post-Adoption) **Goal:** Help mature users deepen outcomes, scale, or expand use.\ **User mindset:** “How do we level up? What’s next?” **Content types that fit here:** * Advanced tips / power-user workflows * New feature enablement for existing users * Cross-team rollout guidance * “How leaders scale this” stories * Expansion-focused case studies **Good signals in the content:** * Speaks to experienced users * Focuses on optimization or strategic growth * Assumes product familiarity *** ### How to Pick the Right Stage (a quick decision method) When you’re unsure, use these steps: #### Step 1: Identify the *starting knowledge level* Ask: **What does the content assume the reader already knows?** * If it assumes *zero* context → likely **Awareness** * If it assumes they know the problem but not solutions → **Consideration** * If it assumes they’re comparing vendors or ready to buy → **Decision** * If it assumes they already bought/started → **Adoption** * If it assumes they’re already successful → **Retention/Expansion** *** #### Step 2: Look at the *main promise* Ask: **What outcome does the content promise?** * “Understand the problem” → Awareness * “Explore options / choose an approach” → Consideration * “Choose us / prove fit” → Decision * “Get started / set up” → Adoption * “Optimize / scale / deepen value” → Retention/Expansion *** #### Step 3: Tag the *primary stage first* If your content spans multiple stages, tag: 1. **Primary stage:** the dominant intent 2. **Secondary stage(s):** only if truly meaningful Example:\ A case study that teaches *how to approach the problem* but ends with a small product pitch is still **Consideration** primary, **Decision** secondary. *** ### Examples (to make it feel real) **Example A: “Why teams struggle with onboarding new hires”** * Defines a pain * Broad, educational\ ✅ **Awareness** **Example B: “3 ways to structure a content tagging system (with pros/cons)”** * Multiple approaches * Helps evaluate tradeoffs\ ✅ **Consideration** **Example C: “Tourial vs. Competitor X: feature-by-feature”** * Vendor comparison * Objection handling\ ✅ **Decision** **Example D: “Getting started: tagging your first playlist”** * Assumes product access * Setup guidance\ ✅ **Adoption** **Example E: “How to scale tagging across regions”** * Advanced workflow * Expansion use case\ ✅ **Retention / Expansion** *** ### Common Mistakes to Avoid #### Mistake 1: Tagging by *topic* instead of *intent* **Wrong:** “This is about pricing, so it’s Decision.”\ **Right:** If it teaches how pricing models work *in general*, it could be Consideration. *** #### Mistake 2: Tagging by *who you want to reach* Stages are not personas.\ **Wrong:** “This is for executives → Decision.”\ **Right:** Executives still need Awareness content sometimes. *** #### Mistake 3: Over-tagging every stage Too many stages makes tags meaningless.\ Stick to **1 primary + up to 2 secondary**. *** #### Mistake 4: Confusing Adoption vs. Retention * **Adoption:** “How to start / set up / first wins” * **Retention/Expansion:** “How to optimize / scale / go deeper” *** ### If You’re Still Unsure… Pick the stage that matches the sentence: **“After reading this, the user should be able to \_\_\_\_\_\_.”** Fill in the blank: * *name the problem* → Awareness * *compare solution types* → Consideration * *choose a provider* → Decision * *start using the product successfully* → Adoption * *get more value / expand use* → Retention *** ### Why This Matters Correct stage tagging helps: * Your audience find the right content faster * Your team build better sequences and playlists * AI agents recommend the right next step * Analytics show gaps in your content journey Even rough tagging is better than none—aim for consistency over perfection. # Interactive Tours Learn how to use interactive tools, timed tools, and zoom in the Tourial builder. ## Introdcution Micro Tours are more than just interactive demos—they’re the most effective way to drive revenue and move prospects through the marketing funnel. Unlike traditional Interactive Demos or marketing videos, Micro Tours are built for engagement, conversion, and storytelling. They introduce prospects to key product moments with explainer screens that highlight value and differentiation, while allowing users to experience the product firsthand through interactive demo screens. Micro Tours are short, impactful, and action-driven, designed to meet the needs of today’s distracted, time-strapped prospects—helping them learn, explore, and convert faster than ever. ## Why Micro Tours? 🎯 They’re built for top-of-funnel engagement Most prospects aren’t ready for a long sales demo or an in-depth webinar—they’re still exploring. Micro Tours give them a quick, compelling introduction to your product without the commitment. 🚀 They scale your storytelling across every channel Whether it’s web, social, chatbots, or email, Micro Tours let you repurpose content and keep messaging consistent, ensuring your story stays clear and effective. 📊 They generate actionable engagement data Every interaction within a Micro Tour provides insights into prospect intent and interest, fueling better nurture sequences and sales follow-ups. 🔄 They’re easier (and cheaper) to update than video Unlike explainer videos that require costly edits, Micro Tours let you update specific screens on the fly—keeping content fresh without expensive production cycles. 👀 They hold attention better than traditional content * Videos? Too passive. * Interactive Product Demos? Too complex. * PDFs? Let’s be real—no one’s reading those. * Micro Tours strike the perfect balance—interactive enough to engage, but structured enough to guide the experience effectively. 🛑 They avoid the “feature trap” “When you let users click everywhere, you guide them nowhere.” Traditional product demos dump users into a sandbox, expecting them to figure things out. Micro Tours keep the experience focused on storytelling, ensuring every feature connects directly to value. ### How Micro Tours Work 1️⃣ Prospects encounter a Micro Tour * Through a website, social post, email, chatbot, or ad, prospects are invited to explore a bite-sized interactive tour. 2️⃣ They get an instant “what” and “so what” * A brief explainer screen sets the stage—introducing key value points before jumping into the experience. 3️⃣ They explore with a guided interactive demo * After the intro, prospects click through demo screens that simulate a real product experience. * Interactive Tools keep users engaged while showing them exactly why the product matters. 4️⃣ They’re given clear next steps At any point, users can click a CTA to: ✅ Request a live demo ✅ Explore additional tours ✅ Download more resources ✅ Move deeper into the marketing funnel ### Micro Tours: The Ultimate Demand Gen Tool With Micro Tours, marketing teams can: ✅ Reduce content bounce rates and increase time spent on site ✅ Keep early-stage prospects moving toward conversion ✅ Create scalable, consistent messaging across multiple campaigns ✅ Provide interactive experiences that engage rather than overwhelm ✅ Give sales teams valuable prospect engagement data ### Why We Built Everything to Support Micro Tours Every tool within Tourial—our AI Tour Planner, AI Tour Builder, and everything in between—exists to make the creation of Micro Tours as easy and effective as possible. 🔹 Tori, your AI-powered assistant, helps you plan and build Micro Tours in minutes. 🔹 AI-generated storyboards speed up the process, so you never start from scratch. 🔹 Content reuse tools let you unlock more mileage from assets you already have Micro Tours aren’t just another marketing asset. They’re the most efficient, scalable, and conversion-focused way to introduce your product to the world. ### How to Contact Us Need additional help? Our support team is here to help! Reach out to our support team and they'll help you with next steps. ### Getting Started These easy steps will help you get started and make the most of the Tourial Platform! ### Inviting your team {% embed url="" %} ### Setting your Account Branding {% embed url="" %} ### Downloading the Chrome Extension {% embed url="" %} \
# Record How to upload your ScreenShots/Media into your Tour(s) There are several different ways to upload your Media into Tourial. Check out a quick overview of each option and when to utilize them. {% hint style="info" %} The max file size for manual media uploads in Tourial is 99 MB for Screenshots, Videos and/or gifs {% endhint %} ## [Chrome Extension](/building-interactive-demos/interactive-tours/record/chrome-extension) 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 ## [Import your Media](#import-your-media) 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. [![](https://tourial.intercom-attachments-7.com/i/o/675939369/8f6ce9f77c39791d9fbb2179/u8MZ06wf04xpy5JPNew57Y4V7-oRJbVvZht5HTBdKjbAsizGC07zicXMkzZK2kndo1Zz5d-n_iEuqHw84rSLJatb8iHOQyv9pF8A57Xg3fRZ1vYz6dr72k8UTHJQWRgDlldAntXkPJtgeOEDHdKdcwc)](https://tourial.intercom-attachments-7.com/i/o/675939369/8f6ce9f77c39791d9fbb2179/u8MZ06wf04xpy5JPNew57Y4V7-oRJbVvZht5HTBdKjbAsizGC07zicXMkzZK2kndo1Zz5d-n_iEuqHw84rSLJatb8iHOQyv9pF8A57Xg3fRZ1vYz6dr72k8UTHJQWRgDlldAntXkPJtgeOEDHdKdcwc) 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 :) [Click this to install the Tourial Chrome Extension](https://chromewebstore.google.com/detail/tourial-extension/bgnjlhcgomfmcohochohgmplhfeipjob?hl=en\&authuser=1\&pli=1) 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 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, [use this online calculator ](https://www.calculatorsoup.com/calculators/technology/ppi-calculator.php)to determine your device's PPI by inputting the resolution and dimensions of your screen. 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 [Resizing.app](https://resizing.app/features/compress-jpeg/) [Optimizilla](https://imagecompressor.com/) [CompressNow](https://compressnow.com/) [PNG2JPG](https://png2jpg.com/) [CloudConvert](https://cloudconvert.com/png-to-jpg) ### 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. [Content Edit & Blur](https://chrome.google.com/webstore/detail/content-edit-blur/adgnogkndmhcblbonkhgfbbngeghpboh?hl=en-US) - great for blurring sensitive data [Site Editor](https://chrome.google.com/webstore/detail/site-editor/hdcfmgffadinecfokephiimbgpbhedcf?hl=en-US) - great for editing images [Tourial](https://chrome.google.com/webstore/detail/tourial-extension/bgnjlhcgomfmcohochohgmplhfeipjob?hl=en\&authuser=1) (duh again) - great for editing text (soon to be adding the rest of those editing capabilities too) ## 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. [![](https://downloads.intercomcdn.com/i/o/335716799/d48b47a95d6deeac08e81333/Screen+Shot+2021-05-11+at+2.00.34+PM.png)](https://downloads.intercomcdn.com/i/o/335716799/d48b47a95d6deeac08e81333/Screen+Shot+2021-05-11+at+2.00.34+PM.png) 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. # Chrome Extension The Tourial Chrome Extension helps you take high-quality screenshots and video recordings, or capture your product's HTML, then create a tour or add to an existing one. * [Download the Tourial Chrome Extension](https://chromewebstore.google.com/detail/tourial-extension/bgnjlhcgomfmcohochohgmplhfeipjob?authuser=0\&hl=en) * [Take a Tour of our Chrome Extension](https://websitetours.tourial.com/pages/chrome-extension/c2f45405) ## How to add Tourial's Chrome Extension to your browser: Click the link and then select Add to Chrome
Confirm Add extension
You'll see a confirmation that the extension has been added to Chrome For easy access, pin the Tourial Extension to your toolbar
## Using the Chrome Extension Click on the Tourial extension icon and log in using your Tourial credentials
Select whether you want to create a new Tour or add to an existing Tour. If you're adding to an existing Tour a dropdown will appear so you can pick which Tour to add your workflow, screen, or video capture to. ### Using Automatic Media Capture 1\) Automatic Media capture allows you to perform a series of steps or show off a flow/process while automatically capturing each click, scroll, or drag-and-drop motion. ![](/files/c2gqYVEWjaNwu9ySEaxt) 2\) Click Media capture on the left. Your screen will automatically resize and a 3-second countdown will appear. After the countdown, perform the flow you want to capture. Actions that trigger screen capture: 1. Clicks 2. Starting a workflow capture with a video - it will auto-add a start screen 3. Ending a workflow capture with a video - it will auto add an end screen Actions that trigger a video recording: 1. Dragging/drag-and-drop 2. Scrolling vertically or horizontally 3. Inputting text\ ​ Actions that terminate workflow capture: 1. Resizing the window 2. Changing browser tabs 3. Detaching browser tabs 4. Removing the pinned ‘capture’ tab *(far left tab)…*OR..the tab itself being recorded 5. Reaching max of 100 media items *(media items = screens and videos)* 6. Navigation to a new domain and declining permission popup *(new domain = going from* [*`tourial.com`*](http://tourial.co/) -> [*`clickup.com`*](http://clickup.com/)*)*
3\) Once you're done, click the extension icon and select Save & complete
4\) Your captured workflow pages will appear in your Tour where you can rename them 5\_ Tooltips are automatically added to your screens so all you have to do is update the content ### Using Manual Media Capture 1. After you've logged into Tourial, click *Manually take screenshots and videos.* 2. Your window should automatically resize. You can also select Resize window. Your browser window will resize to the correct dimensions for your Tour. Leave your window at this size. ![](/files/jGvfhhivPCKgJq32Yjso) \ ***​Note:*** If you change your browser size and need to resize it again, simply click on Resize window in the upper right of the extension pop-up. 3. There are two options for manual capture - Capture screen and Start video capture. 1. It also comes with default hotkeys (shift+cmd+7 for screen capture and shift+cmd+8 for video recording start/stop) 2. If you do not see these hotkeys, you can manually set and/or customize them (sometimes another extension tool may be using the default hotkey already). 3. Go to [chrome://extensions/shortcuts](https://intercom.help/tourial/en/articles/5915462-the-tourial-chrome-extension) to set keyboard shortcuts.
4. To take a single screenshot, select Capture screen or press your hotkeys. You'll see a 3-second countdown on your screen and then once the image is captured you'll notice a number badge on the extension icon.\ ​ 5. Name your screen. Continue capturing screens as needed and naming each. ![](/files/JkesSBfZeOH23n1DwVKG)
6. You can also edit text on a screen before taking the screen capture. Toggle on Edit mode, then edit whatever text you need. When you're done, capture the screen!
7. To record a video, select Start video capture or use your shortcut. A 3-second countdown will appear.\ ​ 8. Once you're done with your video, click on the extension icon and select End video capture or use the default/customized hotkey.\ ![](/files/MItD4mVTeSiEjGlO9KQ1)
9. After you have your screens and video, click Save and complete. Your screens will be added to your Storyboard in your newly created or selected Tour.\ \ ***Note:*** You may also screen capture an entire page using the Scrolling capture feature under More options. Avoid scrolling or moving your mouse pointer while capturing the full page in order to get the best result. ## Troubleshooting the Chrome Extension 1. Ensure your Chrome Extension is updated to the latest version 2. Ensure your Tourial Extension is updated to the latest version 1. Don't know what Tourial Extension Version you are on? 1. Go to your Chrome Extensions Manager (chrome://extensions/) and Click on Developer Mode 2. How to verify what the latest Tourial Extension Version is? 1. [Navigate here](https://chromewebstore.google.com/detail/tourial-extension/bgnjlhcgomfmcohochohgmplhfeipjob?authuser=0\&hl=en\&pli=1#:~:text=Version,3.7.3) to find out (scroll down to the 'Details' section ### Still having trouble? Try these additional steps. 1. Log out of app.tourial.com and close the extension 1. This will reset the extension to its starting state. Then, reopen the extension and log back into Tourial to continue using it. 2. Close any additional tabs. Chrome works best with fewer tabs open. For the best experience, only have the tabs you need for your current task open in your Chrome window. This can help prevent the extension from freezing or slowing down. # Downloading the Chrome Extension Capture your media [Download the Tourial Chrome Extension](https://chrome.google.com/webstore/detail/tourial-extension/bgnjlhcgomfmcohochohgmplhfeipjob/related?hl=en\&authuser=1) [Take a quick tour of the Tourial Chrome Extension](https://websitetours.tourial.com/pages/chrome-extension/c2f45405) The Tourial Chrome Extension helps you take high-quality screenshots, video, and workflow recordings, then allows you to upload them directly to your Tourial. {% hint style="info" %} 💡Tip: Always use the highest resolution screen to capture media. A big screen doesn't mean high resolution! [See how to find your screen resolution.](https://www.wikihow.com/Check-Your-Screen-Resolution)⁠ {% endhint %} # Troubleshooting {% content-ref url="/pages/VSpCrpHuSkOb8n7J65fx" %} [Full page screenshot not working](/building-interactive-demos/interactive-tours/record/chrome-extension/troubleshooting/full-page-screenshot-not-working) {% endcontent-ref %} # Full page screenshot not working Not all apps and pages are built the same, so capturing a full page screenshot can be wonky at times. If this is you, we recommend trying another chrome extension screen grab tool **just for these screenshots** Our number one recommendation is [Awesome Screenshot](https://www.awesomescreenshot.com/)**.** **!! Just remember !!** Make sure your window size stays the same as when you used the Tourial Chrome extension # Importing Media When building media tours, you can upload media from your computer or pull entire screens from different tours. ## Option 1: Import from your Computer Tourial accepts multiple file types to function as your primary screens within the tour: screenshots (images), videos, and gifs. Please note that when uploading media for screen background use, you'll want all of your media to be at a 16:9 aspect ratio and high resolution. \ \ Here's the full list of supported file types for media uploads in media tours: \ \ .mp4, .mov, .webm, .png, .jpeg, .jpg, .png, .gif, .svg, .webp
1. Either select Media Library in the bottom right or Add Screen in the Storyboard\ ![](/files/GoUXA3tdue36v5pfaoQ7) 2. In the pop-up, click Upload to upload your images or videos.\ ​![](/files/zQaxjTvz7pKBXCO4KjAq)
3. Once uploaded, select the screen and click Add to tour\ ![](/files/AF4EUUBcLcPVpDnJAJKT) ## Option 2: Import from another Tour Let's say you built a page that you love in a previous Tourial. It has all the tools, views and interactions and now you want to use that page in another Tourial. With the Import Screen feature, you can easily select a screen(s) from any existing Tour in your account and use it in a different one. ## To import a screen 1. Open the Tour you'd like the other page imported into 2. Select Media Library located on the right of the Storyboard 3. In the pop-up window, select Import screen and then choose with Tour you want to import from and the screen you want to import
4. Click Add to tour **Note:** Tourial's file size limit for media imports is 99MB per file # Edit Editing Tour Best Practices ### Tooltip best practices Keep tooltips brief & to the point. If your message is long, consider plugging it into an LLM like OpenAI's ChatGPT or Google Gemini to help shorten the copy. Not only will this keep your Tourial accessible, it will also keep potential buyers engaged. Avoid placing the tooltip too close to the edge to avoid overflow The closer your tooltips coincide with the edge of the screen, the more likely they are to overflow on smaller screens. *** ### Sizing best practices Treat the frame size previewer as a QA Tool that we can use to make sure the tour looks and feels great at all screen sizes for all buyers. Not seeing the options for Medium and/or Large Frame? This likely means that the screen you're viewing the Tour on doesn't have enough space to display the larger versions of the tour. When building your tours, it is important to test all screens at all sizes to make sure that every one of your buyers has a great experience. ***Note:** When embedding your tours on your website, most visitors will see the "Medium" sized version of the tour. When sharing the URL for the tour page, most visitors will be viewing the large version of the tour. Small sizes are the least viewed version and are typically accessed by a shrunken browser window or an iPad Mini (or similarly small screen size that doesn't allow the Tour to display a larger version.)*
Tip: If you intend to primarily share your tour on small devices or through a small embed , we recommend setting your tour to a smaller frame size before you start building. # Interactive Tools Interactive Tools (modals, tooltips, clickzones, hotspots) are different ways that users will navigate & interact with your tours Modals Modals are a great way to start & end your tours. They give you the capability to begin your Tour with additional context as to what the user is about to Experience and end your Tour with specified Call to Actions.

Tourial Modal Tool

## Tool Tips Tool Tips are ways that users can navigate throughout your tour while providing context to the viewer.

Tourial Tool Tip

## HotSpots HotSpots are great ways to show contextual information throughout your tour.
## Clickzones Clickzones are a tool used to highlight an area you want the user to click. Clickzones can be used to trigger navigation and other actions, and can now be used to trigger a form.
Interactive Tools {% embed url="" %} Timed Tools {% embed url="" %} Using Zoom {% embed url="" %} # Advanced Features Zoom effects, Hovers & Interactions All of your Interactive Tools can be customized to create a seamless experience! Using some of these features can help you take your Tours to the next level. ## Zoom Effects One of the greatest things about Tourial is the zoom effect. To add one, just add a new step using the + icon in the Storyboard, and then edit your zoom state from the sidebar editor. That's it!
## Customizing your Tools We already have default interactions in place for you! In the event that you want to modify the interactions, you can do so by doing the following: First, click the element you want to add an interaction to (i.e. button, hotspot). Next, navigate to the Configure tab in the right sidebar editor and scroll down to where you can see the Hotspot, Click Zone options.
Then, add a On Click or On Hover from the dropdown options
Finally, choose your interaction destinations. You have several options such as Jump to page, Toggle Tooltip, and External link (and several others)
# Timed Tools This guide walks through Tourial's Timed Tools which allow you to automate portions of your interactive tours. #### What are Timed Tools? Timed tools are a specialized set of tools in the Tourial builder that allow you to automate portions of your interactive tours. Got a complicated workflow that you need to show quickly? Need to add some motion and engagement to your tour to keep folks hooked? Timed tools are an awesome way to put portions of the tour on rails so that you can have your audience interacting with the most valuable Aha moments while breezing through in-between or "set-up" steps. #### Timed Tool Breakdown * Timed Tooltip - Tooltips on a timer! Use these to add copy and context to a timed portion of your tour. Also very helpful to lay on top of video screens so that buyers can keep themselves hooked on your messaging (and so that they know there's more interactive demo beyond this video!) * Timed Mouse - Use these to emulate your mouse cursor moving from one part of the screen to another. Pick a "start" point and an "end" point and Tourial will animate the mouse cursor to help guide your prospects through this part of the demo. * Timed Typewriter - Add timed Typewriters when you want to show text entry in your demos. Great for showing conversational AI use cases, ChatBot entries, or searching for specific items in your product's search function.
🛑 Important: A screen can either have interactive or automated steps (but not both). We'll see what that looks like in the builder below. #### Adding automated tools * To add an automated tool, select the icon in the left menu and it'll appear on your screen. We'll first add a timed tooltip in this example:
* Automated tools are highlighted by orange throughout the builder. So the tool icons on the left have an orange dot next to them (unlike the interactive tools that have blue). * Once an automated tool is added to a screen, you'll notice the border of the screen also updates to orange in the storyboard. There's also a timed icon indicating that this is an automated screen. * Style your tooltip as normal and add your content. * Select the screen and you'll see a Timing tab. This is where you'll adjust *when* your tooltip appears and for *how long*
☝️Let's see how we'd set up timing for a timed tooltip + a mouse cursor\ ​ * After adding the mouse cursor tool to your screen, you'll see Cursor Style and Animation Settings in the right-hand menu
* Select your cursor shape, size, and color. You'll notice each automated tool will be numbered based on the order you added them. * So for this, the timed tooltip is 1 and the mouse cursor is 2. * With the screen activated, set the timing for each tool using the sliders
☝️ Now we'll add a screen and use the automated typing effect tool * Select the auto typewriter icon and then add the text needed. For this, we're automating adding an email address to an account field
* Style your text as you normally would, then with the screen activated set the amount of time for your typing effect. * To preview these three automated tools altogether, select the Preview button #### Enabling the looping feature If your tour is fully animated and there are no interactive screens, you can also set it to restart automatically under Settings. Select the ⚙️ icon and under the Appearance tab toggle the Restart tour on complete to on
\ **Note on Step Counters** Timed screens in your tours are not counted in the tour Step Counter - the step counter is intended to function as a visual cue for how many actions the buyer must take to complete the demo. Since timed tools require no action from your audience, they are not included in the overall count for the step counter. # Video Trimming Trimming the Videos in your Tours You can trim any video in your Tour (whether you recorded using our Chrome extension or uploaded a video file directly). * Add a video to your Tour and select it * Hovering over the video will show you the controls and a Trim button
* Select Trim and then use the sliders to trim from the beginning or end of the video
* When you're done, hit Trim to finalize. Once saved, you can also reopen the video trimming window and select Untrim to start over.
And that's it! # Branding In a few clicks, you can add branded color palettes and styling for your Tour Components. Once you've added it, you can apply those changes across all or multiple Tours — easy! [Take a Tour of how to Set your Account Branding!](https://websitetours.tourial.com/pages/branding) \ \ ​With Branding you can: * Customize and save Color Palettes, Font Styles, and create Templates for your Tour Components, Page Styles, and Forms * Update every Tour (or selected Tours) all at once (i.e. your company rebrands) * Brand updates happen in small and large capacities... even after your Tours are done, if you need to make one-off brand updates, *you can do this in bulk!* * Saves time -- focus on building your Tours, not styling them individually * Maintain brand control — only account Admins can edit Branding * Ensure styling consistency across all your Tours ### Your Brand * Set your color palette by adding multiple HEX codes (there is no limit!) * Add your default font type, size, and color for Headlines and Body content
* Add defaults for your Primary, Secondary, Text and Background colors * Primary color - affects borders and button backgrounds (+ button text if background color is transparent) across Tooltips, forms, and step counters in Tooltips * Secondary color - affects hotspots and clickzones in Tooltips as
### Templates Under templates, you can set defaults for Tour Components, Page Styles and Forms.
#### Tour Components * See a preview of your Tooltip template * Click Edit to set or change your Tooltip styling (size, buttons, font size, hotspots, clickzones, etc.) * Select Apply All to apply changes to all your Tours, or select which ones you'd like to apply the styling to. Note: You can also use the dropdown menu to toggle between styling
* The same applies to Modals and Timed Tools #### Forms 1. Set your Forms template. 2. Select Apply All to apply changes to all your Tours with forms, or select which ones you'd like to apply the styling to.
### FAQs * Can I save multiple brand templates? * No. You can save one template per section (Tour Components, Page Styles, Forms) * Can I update all my tools at once? * Yes. Use the "Apply All" button to update all tools across your Tours. Use the Default colors section to instantly update colors across all tools all at once. * Can I only update certain tools at once? * Yes. Simply edit the tool (tooltips or modals, for example) you want to change and apply those changes to any or all Tours. * Can I revert? * Not at this time. Once you save changes, you can not revert to a previous state. * Can I update all templates in bulk with primary/secondary colors? * Yes. If you update primary or secondary colors under Default colors, those will apply across all of your templates. * Can I update all my tours at once? * Yes. use the "Apply All" button to update all of your Tours. * Can I update only specific tours? * Yes. Under the "Apply All" button, select the Tours you wish to update. * Can I still update tools when inside the tour? * Yes. New Tours will be created with the set Branding, but additional changes can be made within the individual Tour. * Can anyone make Branding changes? * No. Only account Admins can set or change settings under Branding. * Can anyone make tool changes in a Tour? * Account Editors and Admins can make changes but Viewers cannot.
# Mobile-Optimization This article walks you through how to optimize your interactive tours for mobile to ensure flawless experiences across the board. Mobile optimization is crucial to delivering exceptional interactive experiences for all your buyers, no matter which device they're using. Without mobile responsiveness, you risk serving broken or poorly formatted content to users on mobile devices. When you enable the mobile responsive setting, a dedicated mobile version of the tour is created and accessible via a toggle option within your existing tour. All screens, tools, and text are automatically applied, allowing you to fine-tune the experience for mobile devices. Think of these like two separate tracks of the same, single tour (accessible via one URL/embed) Buyers using mobile will see the mobile track, while desktop users will stick to the desktop version. Remember, changes to one version won’t carry over to the other (e.g., removing screens on mobile doesn’t affect the desktop version).
### **Step 1: Enable Mobile** 1. Open the **Tour Builder** for the tour you want to optimize. 2. Navigate to the **Settings** tab. 3. In the **Mobile** section, enable the **Mobile Responsive Version**. * **Optional**: You can also enable the **Mobile Tour Button**. This replaces the embedded tour with a button on mobile devices, launching the tour in a new tab for a cleaner experience.
*** ### **Step 2: Make Optimizations** Now that your mobile track is set up, you’ll want to make a few adjustments for the best user experience. #### **Interactive Tools Placement** On the mobile track, some tools may not be properly positioned, running off-screen or obscuring text. Make sure all interactive elements are visible and easy to navigate. * **Adjust tool positioning**: Drag interactive tools into the visible area of the mobile screen. * **Optimize tool width**: Ensure your tools fit within the mobile screen width to avoid cropping. * **Leverage clickzones**: Adding larger clickzones can make it easier for users to navigate the tour by simply tapping on highlighted areas. #### **Screen Area Adjustments** Reposition content to focus on key product areas, ensuring the most relevant sections of the screen are highlighted. * **Use the zoom tool** and **screen sliders**: Double-click on the screen background to access these controls, available on the right side of the Tourial app.
*** ### **Step 3: Finishing Touches** With most of the heavy lifting done, it’s time to polish your mobile tour and make it perfect for buyers on the go. * **Remove hover tools**: Touch devices don’t support hover interactions, so replace any hover-based tools. * **Change "Click" to "Tap"**: Update any text that refers to "clicking" since mobile users will be tapping. * **Shorten your content**: Mobile users typically spend less time engaging with your content so every second counts. Trim down text and remove non-essential screens to keep the tour concise and impactful. *** #### **Final Thoughts** By following these steps, you’ll ensure your interactive tours are optimized for mobile, delivering a seamless experience for all users regardless of device. Happy optimizing! # HTML Demos (Experimental) Learn how to edit a tour that was created using the HTML Capture in the Tourial Chrome Extension. HTML Tours are an experimental feature and at this point in time, your experience may vary. {% content-ref url="/pages/14s8Ph0QxGAlBqwvC5cm" %} [Chrome Extension (Capture)](/building-interactive-demos/interactive-tours/html-demos-experimental/chrome-extension-capture) {% endcontent-ref %} {% content-ref url="/pages/BQk1Ic8wIg96c8tef4p9" %} [Building & Editing](/building-interactive-demos/interactive-tours/html-demos-experimental/building-and-editing) {% endcontent-ref %} # Chrome Extension (Capture) Please note that HTML Product Capture is an experimental feature and results will vary from application to application. ### 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).\ ![](/files/z5uHw8zZaRbigiVe1v93)
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.\ ![](/files/XSnDnaT41iqwquEoUT2Z)
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 # Building & Editing Please note that the HTML Tour Builder is an experimental feature and results will vary from application to application. ### 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 4 sections: Tooltip, Overlays, Buttons, and Progress.\ ![](/files/3qyhZpQSUZgKMnnsXvy7)\ \ 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.\ ![](/files/qDSgXfPAVRc9KZY4Es8V)\ **Removing an element** will remove the HTML from that section and surrounding elements will adjust.\ ![](/files/JssxnihlxPmkIVW3jZuS)\ \ **Blurring an element** keeps everything in place. \ ![](/files/JGEUbjaKf0WkTIAR6vmw) 5. Once you're done with edits, toggle off the edit screen mode and select **Save.**\ ![](/files/dyLnagg2Vi4PhRu9yZOa) # Planning Tours with AI This article gives an overview of Tourial's AI Tour Planner which will generate effective, revenue-driving marketing plans to fuel your GTM Calendar ## Meet Tori: Your AI-Powered Tour Planning Assistant Tori is your personal AI guide, here to help you create compelling, story-driven product tours with ease. Whether you're launching a new product, refreshing content, or supporting a marketing campaign, Tori walks you through every step—ensuring your tours are strategic, engaging, and effective. With Tori’s guidance, you can:\ ✅ Build a tour backlog to support upcoming campaigns.\ ✅ Craft tours that tell persuasive stories instead of just listing features.\ ✅ Personalize tours for the right audience and context. ## How Tori Helps You Plan Your Tours #### 1. Start with Tori Launch the Tour Planner and let Tori guide you through the process step by step. #### 2. Define Your Tour’s Purpose Tori will ask you to choose the main reason for creating new tours: * 🚀 Fuel a campaign or event * 🔄 Refresh outdated content or collateral * 🎯 Support a major product release (monthly/quarterly) * 🌟 Launch a brand-new product #### 3. Name Your Project Give your planning session a relevant name, like: * “Q3 Product Release” * “Website Refresh Tours” #### 4. Set the Scope Tori will help you decide whether your tours should focus on: * The entire platform * A specific product * Selected features (just list them, and Tori will take it from there!) #### 5. Upload Supporting Materials To ensure the best recommendations, Tori will prompt you to upload: * 📄 Release notes, help docs, or product positioning documents * 📣 Marketing collateral (sales decks, 1-pagers, website copy) At this step, you can also provide a text description and/or URLs to live web pages to help inform Tori's understanding of your solution. Documentation uploaded to Tori will be saved in your Document Hub for future use and re-use #### 6. Review Tori’s Summaries Tori will synthesize your inputs into concise summaries of your platform, products, and features. * You can edit or expand details to refine the story. * If needed, you can also add competitive differentiators. #### 7. Choose Your Tour Strategy Tori will ask how you want your tours positioned: * General-use tours for broad audiences. * Solution-oriented tours that highlight key problems and solutions. * Segmented tours tailored for specific industries or customer types (e.g., startup, mid-market, enterprise). #### 8. Get AI-Generated Micro Tours Once your positioning is set, Tori will generate a list of recommended micro tours, complete with: * Key product moments to highlight. * Value-driven messaging for explainer screens. * Suggested interactive elements for demo screens. * Persona-specific insights tailored to your audience. #### 9. Review, Edit & Finalize * You can accept, tweak, or share Tori’s recommendations before finalizing. Once saved, your tour plans will be stored in Tourial, so tour builders can bring them to life. ## Why Tori Makes a Difference 🎯 Align Teams & Save Time * Tori streamlines tour planning, helping marketing and revenue teams align—without extra meetings. 🚀 Tours That Sell, Not Just Show * Ensures that tours emphasize value and differentiation, avoiding the “feature trap.” 🔥 Exclusive to Tourial * Other demo tools focus only on building tours. Tourial—with Tori—separates planning from execution, ensuring every tour is strategic and impactful. With Tori, tour planning is no longer overwhelming—it’s a structured, guided process that sets your product tours up for success.
# Building Tours with AI This article gives an overview of Tourial's AI Tour Planner which will generate effective, revenue-driving content storyboards for Micro Tours ## Meet Tori: Your AI-Powered Tour Builder Tori isn’t just here to help you plan your product tours—she’s also your AI-powered assistant for building them. With the AI Tour Builder, Tori transforms approved tour plans into structured, story-driven microtour storyboards, complete with AI-recommended screens and interactive elements. With Tori’s guidance, you can:\ ✅ Turn tour plans into engaging Micro Tours with ease.\ ✅ Ensure every tour tells a clear, compelling story that highlights value and differentiation.\ ✅ Incorporate the right balance of interactivity—engaging visitors without overwhelming them.\ ✅ Quickly swap AI-recommended screens with your own branded content, saving time.\ ✅ Seamlessly prepare and publish tours for marketing campaigns, sales enablement, and beyond. ## Steps to Build Tours with AI #### 1. Start with a Tour Plan * Select from your pre-generated tour plans in Tourial. * Click “Create Tour” to begin building. #### 2. Get an AI-Generated Storyboard * Tori pulls from your approved Tour Plan and auto-generates a storyboard with: * Placeholder images * AI-recommended screen replacements * Suggested interactivity and content #### 3. Navigate the Storyboard with Tori’s Help * A floating guide card lets you: * Toggle between screen replacement recommendations and a high-level overview of your tour’s objectives. * Click on any frame in the storyboard to see Tori’s specific recommendations for that screen. #### 4. Replace & Customize Screens Tori makes it easy to swap out AI-recommended screens with:\ \ 📂 Uploaded media from your local hard drive.\ ☁️ Tourial’smedia library for quick access to reusable content.\ 🎨 Branded collateral, like PowerPoint or Google Slides, for explainer screens.\ 🎥 MP4 videos, for dynamic, pre-recorded segments.\ 🖥 Captured product screens, using high-resolution screenshots or screen recordings. #### 5. Capture Product Moments & Workflows * Use Tourial's Capture Extension to: * Capture product screens and UI interactions. * Record workflow click sequences as short video clips. * Add interactive tooltips, zoom effects, and dynamic interactions to simulate a live product experience. #### 6. Enhance Engagement with Interactivity * Bring product tours to life with:\ ✅ Clickable Interactive Tooltips\ ✅ Zoom and Spotlight effects\ ✅ Smooth transitions that feel interactive and immersive #### 7. Publish & Share * Once your tour is finalized, publish it with a click. * Instantly generate embed codes to share with your marketing team for: * Web pages * Marketing campaigns * Sales enablement * Demand generation efforts ## How Tori Makes Tour Building Effortless 🎨 Paint-by-Numbers Tour Creation * Unlike traditional content platforms, Tori provides a structured, guided process—no more starting from scratch. 🎯 Strategic, Not Random * Every tour aligns with an approved strategy, ensuring it serves marketing, sales, and GTM goals—no disconnected content. ⏳ Easier Updates, Less Effort Need to refresh content? Clone tours, swap out only what’s outdated, and avoid costly rework—unlike editing lengthy explainer videos. # Best Practices & Launching # Tour Building Best Practices Welcome to the Best Practices guide for building interactive demos with Tourial! Whether this is your first time building or you've built a ton of these before, keep these in mind. These guidelines are not arbitrary; they're the blueprint for driving significant outcomes such as increased engagement, enhanced pipeline generation, accelerated deal closures, and streamlined onboarding processes. Ignoring these best practices risks undermining your tours' effectiveness and, ultimately, your strategic goals. \ \ Below, we distill these practices into a clear, actionable format to ensure your Tours resonate with and captivate your audience. ### Best Practices | **Category** | **Do** | **Don’t** | | ----------------------------------------------- | ------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------ | ----------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- | | **Tour Length** |

• Limit tours to 10-15 clicks-for-completion

• Divide longer tours into smaller segments

• When in doubt, stick to linear tours that progress from A to B to C. Linear tours that don’t offer branching paths typically see better completion and conversion rates.

|

• Avoid filler steps without direct value. (Example: Screens that just say “click this” or “then click here”)

• Avoid “mega-tours” that try to show everything with many branching paths. Engagement Data analysis proves that shorter, linear tours perform better than long, winding, exhaustive tours.

| | **Branding** |

• Ensure brand consistency across all visual elements.

• Use contrasting backgrounds for readability.

|

• Let design elements like tooltips blend into similar backgrounds (Example: White Tourial tools on white product background)

• Avoid having differently colored Tooltips throughout the tour.

| | **Narrative Copy & Clarity** |

• Keep copy per tool between 10-25 words for clarity and brevity.

• Make every step action and value-oriented

• Use the LLM (ChatGPT, Gemini, etc) of your choice to help shorten up and perfect your copy

• Have one main tool+copy per screen, and if needed limit the number of additional Hotspot Hover steps to 1 per screen.

|

• Avoid overloading steps with unnecessary information.

| | **Implementation (Embed, Shares, Share links)** |

• Implement easy-to-find “take a tour” CTAs on your website’s homepage, product pages, solutions pages, persona pages, and in your resource center (or directly embed the tours near the top of their destination-page)

• Give sales reps 1-1 Share Links for personalized sharing.

• Create multiple versions of your tours per channel, either with cloned tours or Share Links (Example: One tour could have 3 versions for 1) Website 2) Display Ads 3) Social Sharing)

• Customize your URL Slug for all Tours and Demo Centers

• Add Social Sharing MetaData (Title, Description, Thumbnail for Demo Centers)

|

• Hide your tour below the fold of your web page

• Hide the tour multiple clicks deep into your website navigation

• Publish tours without persistent CTAs and outro CTAs

• Avoid using the same exact tour URL/embed for different channels. We want to be able to accurately measure the performance of our tours per channel/per implementation

| | **Mobile Optimization** |

• Design a mobile-optimized version of your desktop tour.

• Clearly message if the tour is best (or only) available on desktop with single-screen “this tour is best viewed on Desktop” mobile responsive versions of the tour

• Shorten your copy as much as possible to encourage tour completion

|

• Avoid trying to include every desktop detail in the mobile version. Cut things down!

• Publish content that has no mobile optimization. Your tooltips and modals will not display appropriately if your content has not been optimized and will create a broken experience for every buyer.

| | **Navigation within Tour** |

• Include a persistent Navigation Bar for CTAs.

• Use intro and outro modals for starting and ending your tours.

• When possible, indicate tour length and time investment upfront (you can use the step-counter in your tools for this!)

• Use zooms and spotlights to guide buyers to the relevant portion of your product and cut out the background product noise

• Have one main tool+copy per screen, and if needed limit the number of additional Hotspot Hover steps to 1 per screen.

• Keep your tour navigation consistent (Example: if most of your screens have a “back” button that allows buyers to rewind the tour, make sure all of your screens include a back button)

|

• Avoid excessive use of motion that can disorient users.

• Avoid changing up your clickable elements all the time - (examples: if your first 5 screens of the tour have an optional “back” button in your tooltips, the rest of the clickable areas in your tour should also have a back button for consistency)

• Avoid having multiple areas for progression per screen (Example: Dont have both a tooltip in one part of the screen and also a clickzone in another part of the screen that both do the same thing. Combine copy and tools so that there is a single “golden path” to progress the tour)

| | **Reporting/Attribution** |

• Embed trackable CTAs within demos.

• Include marketing-automation-connected lead forms

• Append UTM parameters to external links.

• Use MAP for comprehensive reporting on leads, pipeline, and revenue generated by Tourial.

• Include direct scheduling CTAs via integrations with Hubspot Meetings, Calendly, and Chili Piper

|

• When using external link CTAs, do not put in your generic website RAD form URL with no way to track “oh hey that was a Tourial lead”

• When using integrated instant schedulers, do not use schedulers that are being used elsewhere. Make sure to associate that specific scheduling router with a Lead Source = Tourial. (Example: You make a custom tour for one of your star sales reps and you put their Calendly link in the tour as a CTA. They use this link for all of their outbound efforts and now you likely don’t know that was a Tourial-booked demo.)

| | **Media Content Technical Dimensions** |

• Use the Tourial Chrome extension for consistency when you are able.

• Aim for a minimum resolution of 1920 x 1080 with a 16:9 ratio.

• Prefer higher resolutions for clarity.

• Use a super-high PPI (minimum 200) monitor when capturing your media

|

• Use imprecise methods like CMD+SHIFT+4 for screenshots.

• Settle for low-resolution images.

• Use a low PPI monitor for media capture. (Common Example: You are capturing your product media on an external monitor. Refer to our KB article for capturing on a high-res device for more info)

| | **Integrations** |

• Integrate with tools for visitor/company identification (Warmly, Clearbit, 6sense).


• Use chat tools (Drift, HubSpot) and analytics (Google Analytics).


• Employ personalization and testing tools (Mutiny).

• Include screen recording tools (Hotjar, Full Story) for deeper insights.


• Leverage Google Tag Manager for efficient script management.


• When making changes to a MAP form, make sure those changes are reflected in your connected Tourial forms. If a change is made in MAP and that change is not reflected in your Tourial forms, lead submissions may fail.

|

• Neglect the benefits of integrating essential marketing and analysis tools.

• Avoid launching tours before you’ve completed your Whitelabel Process - When the whitelabel process is complete, your tour URLs and embed codes will change, so knock those integrations out ASAP!

• Avoid long, required form fields whenever possible. Lead quality and volume can be challenging to balance, but the more fields we require of a buyer, the fewer conversions we can expect.

| This structured approach to tour creation ensures that each aspect of your Tourial is meticulously crafted to engage, inform, and convert your audience, ultimately driving your business forward. Looking for a place to start? We've got you covered. [Here's a Tour Storyboarding Outline](https://docs.google.com/spreadsheets/d/1A17jh77zgF0kAmGmzEywo4Tx7kotnMIhrVviCB0Mt2w/edit#gid=1209950484). Make yourself a copy and begin putting your ideas down pen to paper. # Before you Launch Check-List Before you launch your new tour, take a moment to run through this essential checklist. Ensuring everything is set up properly will help maximize the impact of your marketing and sales efforts. #### 1. Have I Set Up My Integrations? * **Seamless Integration:** Make sure you've connected Tourial to your marketing automation platform (MAP). Confirm that your Tourial forms are linked to your MAP forms and that you've whitelabeled your Tourial account to receive detailed, contact-level engagement data. #### 2. Can I Track My CTAs and Attribute the Leads Back to Tourial? * **Lead Flow Test:** Run a test lead through a Tourial form to ensure it enters your marketing automation platform correctly. * **Attribution:** Clearly label these leads as "Tourial" to differentiate them from other website demo leads, ensuring accurate tracking and reporting. #### 3. Have I Configured My CTAs? * **Best Practice:** Your tour should include CTAs in at least two key areas: the end of the tour and the persistent nav bar. * In the outro screen, use a modal for your CTA. * In the persistent nav bar, consider adding a "restart tour" button and a "book a demo" CTA to keep engagement levels high. #### 4. Have I Set Up Social Sharing Tags for the Title and Body Text? * **Social Media Preview:** To make your tour stand out when shared on platforms like LinkedIn or Slack, set up social sharing tags in your tour settings. This will generate a text snippet that shows a headline and description, enticing viewers to click through to your content. #### 5. Is My Tour Mobile-Optimized? * **Mobile Preview:** If you haven’t enabled "mobile responsive" in your tour settings, your tour won't be optimized for mobile devices. Turn on this feature in your tour settings, then preview your tour in the mobile viewer in-app and make any necessary adjustments. * **Pro Tip:** You may need to rearrange some tools or shorten the tour to enhance mobile engagement. #### 6. Have I Checked the Tour on All Frame Sizes? * **Responsive Design:** Tours dynamically adjust to fit the viewer's browser window. Use the frame size tool in Tourial to preview your tour across different sizes, ensuring it looks great on any screen. #### 7. Have I Tested an Embed? * **Embed Testing:** Each Tourial tour generates a unique landing page and embed code, making it easy to share across platforms. If you're embedding the tour on your website, test the embed code on a staging page to ensure everything displays perfectly. * **Our Recommendation:** While third-party embeds can work, we strongly recommend using the Tourial embed code for performance and stability. Finally, while most content in your tours can be updated on the fly without needing to re-embed, there are a few fundamental elements that, if changed, will alter the embed code of your tour and require re-embedding. These include: * Turning mobile responsiveness on or off. * Turning the persistent nav bar on or off. * Changing the white label status of your tours. # Tour Centers Give your prospects the right content, faster. Let buyers personalize their experience with Discovery Flows - curated content tracks that put them on the path to conversion. **Why Tour Centers?** {% embed url="" %} # Interactive Topics Prompt your buyers into the content experience of their choice Interactive Topics are how you will navigate users through your Tour Center. They are high-level criteria your buyers are searching for. 1. Get started by selecting one of our templates or create a Topic from scratch.
2. Once you've named your Topic it's time to generate the **Prompt**. This is the statement or question you are asking buyers to answer to help guide them to the most relevant content.
3. Then, select your **Prompt Type -**
* **Single Select** - users can only select one option from the answers you create * **Multiselect** - users can select more than one option from the answers you create * **Opt-in** - used for "yes/no" questions, users can only select one option * **Interest Scale** - used to gauge importance or interest related to a prompt, only one option can be selected * **No Prompt** - used to provide content without requiring any response from the user (ex: an intro or welcome topic) 4. Next, add your Prompt Answers (options for users to respond). For this example, we would enter the different Use Cases that our buyers are here to learn about.
5. Once you've clicked **Add Track,** you can add content for that Prompt Answer.
**What types of content can I add?** * Interactive Tours * Videos * direct mp4 upload or URL import (ex: YouTube, Wistia, Vimeo) * PDFs * Images **Congrats! You've created your first Tour Center Interactive Topic! Continue to the** [**next article**](https://app.gitbook.com/o/40vZjXEohfDRIzD8aWob/s/KaMCOI4HEb21AIKZlkHe/~/changes/12/building/demo-centers/navigation-and-format) **to finish your Tour Center! 🎉** # Editing Styles Style your Tour Center to your brand! With Tour Center Style Editing you can...
* Add a logo * recommended a logo size of at least 64px x 64px * Set a font * Enable light or dark effect * toggle between light and dark effects which set container backgrounds automatically * Set highlight & gradient colors * highlight sets most accent colors throughout the tour center - like the prompt button, icons, and container outlines * gradient affects the main CTAs (both Save & Share and the upper right button) - you may set a gradient or choose a solid color * Upload background images/set color * set color/overlay and/or upload a background image * Customize component borders * set in px for small and large buttons, containers, and more # Navigation & Format Optimizing your Tour Center with optional selections There are three sections within Navigation & format: Intro Page< navigation, and Gated topics.
## Intro Page Welcome your visitors to the tour center with a brief message and an overview of your product. The Intro Page is an optional setting. Toggle this setting on or off based on the experience you'd like to provide. Within the Intro Page, you'll set a Header, Subheader, and Demo Button Text. The right side shows a preview of your Intro Page.
## Navigation This is where you'll add links for your main navigation and also toggle on/off two other settings for Gallery View and Video Autoplay. This section also shows a preview on the right. * Logo URL * CTA * Add your CTA text and then choose a click action: External link, Scheduler integration like Calendly, Chili Piper, HubSpot, or Open Form.
* Gallery View * Autoplay Video Content

gallery view example

## Gated Topics Gated topics require a visitor to fill out a form before accessing that topic. Select a form and check the topics you want to gate.
# Supported Content in Tour Centers Let's explore the different content types of content and file types you can deploy to enrich your Tour Center. ## Content Categories and Types ### Interactive Tours Engage and captivate with hands-on experiences: \- Microtours: Guide your audience through a visual storyline. ### Videos Tell your story with motion and emotion: \- Direct Uploads: Share your narratives directly (up to 99MB; formats: .mp4, .mov, .webm) \- Import via URL: Seamlessly integrate videos from platforms like YouTube, Vimeo, Wistia, Loom, and Vidyard. ### Images Capture attention with stunning visuals: \- Direct Upload: Bring your Tour Center to life (up to 99MB; formats: .png, .jpeg, .jpg, .png, .gif, .svg, .webp) \- Import via URL: Incorporate images from any hosting service in the above supported file types ### PDFs Convey in-depth information elegantly: \- Direct Upload: Share comprehensive guides and reports (up to 99MB; format: .pdf). \- Import via URL: Access PDFs from anywhere to support your narrative. ### Website URLs\* Expand your horizon: \- Integrate web content seamlessly. Note: Effectiveness may vary due to content container dimensions. \*If the website does not allow for its content to be embedded in an iframe, the content will not load. Test your content in a Tour Center first before launching. ### Slide Decks Enrich presentations with dynamic slides: \- Google Slides: Embed presentations via URL from Presenter Mode for an interactive experience.
[Adding Google Slides to your Tour Center](/building-interactive-demos/tour-centers/supported-content-in-tour-centers/adding-google-slides-to-your-tour-center) ## Crafting a Compelling Tour Center The most impactful Tour Centers artfully blend various content types to cater to different stages of the buyer's journey. Whether your focus is on interactive tours, detailed PDFs, or a balanced mix including videos and images, the goal is to meet your buyers where they are. Tailoring your content to their learning needs ensures a resonant and engaging educational path. ## Embrace Your Content Library Your Tour Center is always in sync with your full interactive tour library, ready to showcase the heart of your digital storytelling. However, when it comes to the broader content universe you've cultivated, we'll need to bridge a few gaps to bring everything under one roof. Uploading vs. URL Importing: Direct Uploads: Jumpstart your Tour Center with immediate media uploads. Keep in mind, each piece can be up to 99MB. Good when you’ve got the files on your local computer and need Tourial to host them. URL Imports: When size matters not, but reach does. Import media via URLs for seamless integration without the file size ceiling. Ideal for extensive videos, complex interactive tours, or large documentations that live online.
By blending direct uploads with URL imports, your Tour Center becomes a more comprehensive, engaging, and informative platform for your audience.
# Adding Google Slides to your Tour Center To embed a Google Slides presentation into your Tour Center, you have 2 options. 1. Embed it in presentation mode (recommended) 2. Embed it in slides mode Presentation mode requires you going into the Publish to web settings of your slide deck, going to the Embed section, and copying the link from the iframe src (screenshot below)
After you've done that, just add it to your Tour Center as you would import any other piece of website content through the URL importer (screenshot below)
# Upfront Prompts Some viewers want to build their complete Tour Center right away. You now have the ability to take all your prompts and ask them all right away so the viewer can focus on viewing the content.
To activate this, go to the **Intro** section in your Tour Center editor, and toggle on **Show all questions as a form.**
# Mobile Optimization Optimize your Tour Center for mobile devices 1. From the Tour Center editor, click "Tour Center Overview" 2. Toggle on "Show on Mobile" 3. You'll see toggles next to each piece of content in the "Content" section below, giving you control over what is displayed when the Tour Center is viewed on a mobile device. If a tour is not mobile optimized, that will be indicated a![](/files/RNWmiHqR4H8aYpNTnlSd)icon. 1. NOTE: If you toggle off a piece of content in the mobile view, be sure there is still some content in the respective Content Track. You will not be able to publish your Tour Center if a Content Track is empty. 4. Once you've made your changes, click Publish.
# Embed Codes # Embedding Navless # Embed a Guide on a HubSpot landing page Add a Guide trigger to a HubSpot landing page using the page's Head HTML and a custom HTML module. #### What this is for You've generated embed code for your Guide and now need to get it onto a HubSpot landing page. HubSpot's default Button module can't hold the custom class and data attribute the embed needs, so the install splits into two pieces: the script goes into the page's Head HTML, and the trigger goes into a Rich text, Custom HTML, or Embed module on the page itself. #### Before you start * You need a published Guide and the two snippets from **Generate Embed** — the script tag and the trigger HTML. See [Embed a Guide on any page](https://claude.ai/chat/embed-a-guide-on-any-page.md) for how to generate them. * You need edit access to the HubSpot landing page you're adding the Guide to. #### Step-by-step **Step 1: Add the script to the page's Head HTML** 1. Open your landing page in the HubSpot page editor. 2. In the top menu, click **Settings**, then click the **Advanced** tab. 3. Paste your Navless script tag into the **Head HTML** field. 4. Click **Apply changes**.
📝 **Note:** If you want the Guide available on every landing page on your domain, paste the script into your domain-level Site header HTML instead. Go to **Settings**, then **Content**, then **Pages**, select your domain, and paste it under **Site header HTML**. You only need to do this once per domain. **Step 2: Add a module that supports custom HTML** The default Button module in HubSpot doesn't let you set a custom CSS class or `data-` attribute on the button element, so the trigger HTML from Navless won't work inside it. You need a module that accepts raw HTML. 1. In the page editor, click the **+** icon in the left sidebar to open the **Add** panel. 2. Search for and select one of the following: **Rich text**, **Custom HTML**, or **Embed**. 3. Drag the module onto the page where you want the trigger to appear.
**Step 3: Paste the trigger HTML into the module** 1. Click the module you just added to open its settings. 2. Switch the module to source-code or HTML view: * In a **Rich text** module, click Insert, then Embed
* A **Custom HTML** or **Embed** module accepts HTML directly — no toggle needed. * Paste your trigger HTML — the full ` ``` **Important:** On standard HTML sites, these trigger elements need to be present **on initial page load**. Elements added later via JavaScript won’t auto‑attach. ### Option B: Launching a specific Navless Playlist #### **A) Open a Share Link / Playlist** * Locate the HTML element you want to trigger the Playlist and add the below `onclick` handler: ```html ``` * To locate your shareLinkSlug, navigate to the Share Link for the Navless playlist you'd like to feature, and copy everything after the /share/ * Example:
#### **B) Open a Featured piece of content** * Locate the HTML element you want to trigger the specific piece of Navless content and add the below `onclick` handler: ```html ``` * To locate your ContentID, navigate to the Content Hub and click the three dot menu next to the piece of content you'd like to feature and click Copy Link
* Next, launch the URL and copy everything after the /content/ in the URL * Example:
*** ### Option C: Launching the Navless Discovery Feed with Chat 1\) First, follow the steps in the [Embedding Navless Chat](/sharing/embed-codes/embedding-navless/embedding-navless-chat) guide to implement the Navless Discovery Feed embed code 2\) Open Navless Discovery Feed with a default chat prompt * Locate the HTML element you want to trigger the Navless Discovery chat feed and add the below `onclick` handler: ```html ``` ### Quick test checklist (2 minutes) * Load your page and open the **browser console** (optional). * Click your **trigger** button or link. * You should see the Navless modal/chat open. If not, check the troubleshooting below. *** ### Troubleshooting #### “Nothing happens when I click my button.” * Make sure the base ` ``` *** ### FAQs * **Q:** *Can I have multiple triggers on the same page?*\ **A:** Yes. Add `onclick` handlers to as many elements as you like. * **Q:** *Can I open different kinds of Navless experiences from different buttons?*\ **A:** Yes. Use the appropriate `onclick` example for Chat, a Share Link/Playlist, or a specific Featured item. * **Q:** *What if I want a different default chat prompt per button?*\ **A:** Just change the text passed into `sendChatInput('...')` for each button. * **Q:** *How do I remove/disable a trigger?*\ **A:** Remove the `onclick` attribute. *** ### Need help? If anything is unclear or you run into issues, ping your Tourial CSM or support team with a link to your page and a short screen recording. We’ll get you sorted quickly. # Embedding Navless Chat 1. Follow the instructions to copy the base embed code from [Embed Navless on a Custom Website](/sharing/embed-codes/embedding-navless/embed-navless-on-a-custom-website) 2. Use the embed code below where you want the chat embedded. 1. Styles are optional, but are a starting point if desired. 2. You can use your own HTML, the key pieces to include are 1. The Form onSubmit handler 2. class and id of `"tg-textarea"` on the text input 3. class and onClick handler for the mic icon (if desired) \ `class="tg-mic-btn" onclick="window.Navless?.toggleMic(this)"` {% code fullWidth="false" %} ```html
``` {% endcode %} # Implementing Navless in Webflow This guide shows exactly what your team needs to do in Webflow to add Navless (playlists and chat) to your site. Follow the short, numbered steps and copy the small code snippets where shown. ## Before You Begin * You will need access to **Webflow Designer** and **Site Settings** → **Custom Code** (the person who can publish the site). * Get the Navless embed code and any playlist Share Link IDs from your Navless contact. * We recommend testing changes on a staging/published URL after each step. ## 1) Add the Navless script to your Webflow site (Footer) This registers the Navless site script on every page so playlists and chat can open. ### Steps: 1\) In Webflow Designer click the **W** (top-left) → **Site Settings**.
2\) Go to **Custom Code** → **Footer Code**.
3\) **Copy the Navless embed code** from the **Content Hub**.
4\) **Do not delete** anything already in the box. Paste the Navless script at the **bottom** of the Footer Code field (below any existing code). Example: ```html ``` * data-trigger=".tg-trigger" tells the script which on-page elements should open a playlist when clicked. 5\) Click **Save** and **Publish** the site. ## 2) Open Navless using a Secondary CTA ### Steps: 1\) Open the page in Webflow Designer and **select the button** or **element** you want to use as the **trigger**. 2\_ In the right-hand **Style** panel, add the class name that matches the script’s data-trigger (drop the dot). Example: `If data-trigger=".tg-trigger" → add class tg-trigger`
3\) In the right-hand **Settings** tab (Element Settings), make sure the **URL / Link** field is **blank**. If a link is set, the button will navigate away instead of opening Navless.
4\) Publish the site and click the button on the **published** page to test — it should open the Navless playlist. NOTE: If you want the button to open a specific playlist, add the custom attribute “navlessShareSlug” and set the value to the slug of the playlist (everything after the /share/ in the playlist url). * Ex: \*\* ## 3) Add the Navless Discover chat to a page ### Steps: 1\) In Webflow Designer, go to the page where you want the chat.
2\) Add an **Embed** (Code Embed) element to that area. 3\) Paste the chat embed code found in the [Embedding Navless Chat linked here](https://tourial.gitbook.io/tourial-customer-product-documentation/sharing/embed-codes/embedding-navless/embedding-navless-chat) into the Embed editor. 4\) Click **Save & Close**, then **Publish** the site. Test the chat on the published page. ### Styling and interactivity: * Edit the chat's placeholder textarea inside the snippet if you want to change the placeholder text or a added pre-filled prompt. Or add text to the textarea if you want to pre-fill the message. * If you add a pre-promted questions, remove any disabled attribute on the chat send button inside the snippet so visitors can type/send immediately. * Ensure the embed container is set to **width: 100%** on mobile so the chat fits smaller screens. ## 4) Small styling tips (brand the chat) If you want the chat to match your site, you can change a few small CSS classes inside the embed code (or add global styles in Webflow): ```css .tg-send-button { /* change background, radius */ } .tg-textarea { width: 100%; padding: 12px; } .tg-mic { fill: #yourBrandColor; } ``` ## 5) Quick checklist * [ ] Paste Navless script into Webflow → Site Settings → Custom Code → Footer Code (at the bottom). * [ ] Save & Publish. * [ ] On each page where you want a playlist trigger: * [ ] Select button → add class that matches data-trigger (e.g., tg-trigger). * [ ] Element Settings → clear the URL field. * [ ] Publish & test. * [ ] To add chat: Add Embed → paste chat code → Save & Close → Publish → Test. * [ ] On mobile, ensure chat container uses width: 100%. ## 6) Troubleshooting (common issues) * **Clicking the button navigates elsewhere** → the button still has a URL. Open Settings and clear the URL. * **Click does nothing** → confirm (a) the footer script is present on the published page, and (b) the button has the exact class as in data-trigger (case-sensitive) (c) check on a published page as some previews don’t load the footer scripts necessary. * **Chat looks too small on mobile** → set the embed container to width: 100%. # Implementing Navless in WordPress This guide shows exactly what your team needs to do in WordPress to add Navless (playlists and chat) to your site. Follow the short, numbered steps and copy the small code snippets where shown. *** ### Before You Begin * WordPress admin access (install plugins and edit pages). * Your Navless site embed script URL (and any required attributes). * Get the Navless embed code and any playlist Share Link IDs from your Navless contact. * We recommend testing changes on a staging/published URL after each step. *** ### Step 1 — Add the Navless script globally (footer / end of \) Adding the site script site‑wide registers Navless so buttons and chat can open the experience on any page. #### Option A — Headers/Footers plugin (no code theme edits) 1. WP Admin → Plugins → Add New → install a headers/footers plugin (e.g., WPCode – Insert Headers & Footers or Code Snippets). 2. Open Header & Footer (or Code Snippets → Header & Footer). 3. Paste your script in the Footer box and Save. \ ```html ``` Notes * data-trigger=".tg-trigger" tells Navless which elements should launch a playlist when clicked. * If you remove ?shareLinkSlug=..., chat can use the page’s visible text as context for suggestions.
#### Option B — Theme integration (developer) Place the exact same script low in your theme (e.g., via wp\_footer or a footer partial) so it renders near the end of \. Tip: Keep the script low in the page (footer) so it doesn’t block initial render. #### Option C (advanced): Child theme footer.php Warning: Only use this if you’re comfortable editing theme files. Always use a child theme so updates don’t wipe changes. 1. WP Admin → Appearance → Theme File Editor → open footer.php in your child theme. 2. Paste the same script just above \. Update File. *** ### Step 2 — Launch a playlist from a Button Choose one of the two methods below based on your theme/builder. #### Method A — Class‑based trigger (no custom JS) Use when your builder lets you add a CSS class to the button and (ideally) remove the URL. 1. Edit the page and select the **Button** block. 2. In **Advanced → Additional CSS class(es)**, add: `tg-trigger` 3. If your builder forces a link, set URL to # so it won’t navigate away. 4. **Update** the page and test. This method relies on `data-trigger=".tg-trigger"` in your site script: when clicked, Navless intercepts and opens. #### Method B — onClick handler (most robust) Use when your builder won’t allow a clean class-only approach, or adds the button dynamically. **Option 1 — Inline `onClick` (when allowed by your builder)** ```html ``` Option 2 — **Small JS listener (when inline handlers aren’t allowed)**\ Add this once (in a theme JS file or snippet plugin) and target your button by ID or class. ```html ``` Tip: Delegation handles buttons injected later (builders, A/B tools) and lets you preventDefault() to avoid unwanted navigation. *** ### Optional — Per-button overrides (attributes) If your embed supports per-element attributes on .tg-trigger, you can override what opens: * shareLinkSlug="YOUR\_PLAYLIST\_SLUG" — open a specific playlist * featuredContentId="YOUR\_CONTENT\_ID" — open with a featured item * chatInput="Your pre-prompted question here" — seed the chat input before open\ \ Example: ```html ``` If you are using elementor, go to the button you want to edit -> Advanced -> Attributes, then enter the custom attributes you want to specify: ``` shareLinkSlug|yourSlugGoesHere featuredContentId|contentIdGoesHere ``` *** ### Quick Checklist (copy/paste) * [ ] Site script added globally (footer/bottom of \). * [ ] Button configured with one of the following: * [ ] Class method: .tg-trigger present and link doesn’t navigate away, or * [ ] JS method: onClick handler attached (inline or delegated in theme JS). * [ ] (Optional) Per-button attributes added as needed (shareLinkSlug, featuredContentId, chatInput) * [ ] Tested in incognito; caches cleared or script versions bumped after JS changes *** ### Troubleshooting * **Click does nothing** * Confirm the **site script** is present on the published page (view source). * For the class method, verify the class **exactly** matches your script’s `data-trigger` (case-sensitive). * For the JS method, confirm your selector (ID/class) matches the button and that the handler loads on that page. Using **delegated** listeners solves timing issues. * **Builder forces navigation away** * Use the **onClick handler** approach and call `preventDefault()` (as shown above) to intercept the click. * Performance concerns * Keep the site script **near the end of** `` so it doesn’t block initial render. *** ### Step 3 — Place the chat input on a page Why: The chat input (search bar) is what visitors type into; it forwards their question to Navless and can deep-link into content. #### A. Add a Custom HTML block * In the block editor (or Elementor’s HTML widget), add a Custom HTML block where you want the chat box to appear. #### B. Paste the chat input template 1. Paste the chat embed code found in the [Embedding Navless Chat linked here](https://tourial.gitbook.io/tourial-customer-product-documentation/sharing/embedding-demos/embedding-navless-chat) into the Embed editor. Customize quickly: * Placeholder vs default text\ Use placeholder="..." for hint text.\ To prefill text, put the default text between \ and (optionally) remove disabled on the send button. * Enable “Send” immediately\ Remove disabled on .tg-send-btn if you want a pre-prompted question to be submit-ready. Branding colors\ Update .tg-send-btn { background: ... } and .tg-mic-btn { color: ... } in the \
```
# Embedding Interactive Demos The 2 types of Tourial Embeds (Website & Lightbox) plus some best practices! ## Tourial Website Embed {% content-ref url="/pages/hCwB8zHD9DxAT8Qelexu" %} [Website Embed](/sharing/embed-codes/embedding-interactive-demos/website-embed) {% endcontent-ref %} ## Tourial Lightbox Embed {% content-ref url="/pages/F432IcJXMFcEMALyclM8" %} [Lightbox Embed](/sharing/embed-codes/embedding-interactive-demos/lightbox-embed) {% endcontent-ref %} ## Embed Best Practices Embed Tourials with a minimum width and height to prevent tooltip overflow The recommended implementation size is 1080 x 607.5px. Tourials should be embedded with a minimum of 888 x 500px wide to help prevent tooltips from overflowing. # Website Embed To embed a Tourial product tour onto your website, you add a simple iframe code, just like when you add a video or any other rich media to a page. ### Step 1: Copy the embed code Login to [app.tourial.com](http://app.tourial.com/) and navigate to the Tourial you wish to embed. Click on the ⚙️ icon in the top right. In the Settings pop-up, select the Embed tab.
This is also available under the Share button after your tour is published
Click Copy Embed Code. ### Step 2: Log in to your CMS/page builder Log in to your CMS/page builder (WordPress, HubSpot, Wix, Unbounce, Webflow, Squarespace, etc) to access the page's editor. ### Step 3: Copy the embed code Depending on the CMS/page builder you're using, add an HTML element to paste the embed code. Usually, there will be a "source code" edit icon that you can click into or add as a new element. From there, paste the embed code in the location you want the tour to load on the page. ### Step 4: Preview the page Preview the page to make sure the tour fits exactly inside the iframe and looks appropriate. *FAQ & Common Issues* * If your Tourial is cut-off on the height or width, first try to make the embed code's container *(where you pasted the embed)* smaller in your website builder. * If for some reason you can't control the container's width in your website builder, you can also wrap our embed code with one more \
to help with adjustment as shown below Example adjusting container: ``` // Adjust style below as needed - this should work in most cases.
// Paste Embed Code Here - DO NOT edit embed code directly
``` Some guidance for specific website editors: Hubspot To embed the Tourial into a website hosted by Hubspot, navigate to the page you would like to embed the Tourial on. Select the section to add the tour, or add a new section. Click Insert at the top toolbar, Embed, and paste the embed code. You'll be able to set the width and height properties after clicking Insert in the top toolbar. Squarespace Navigate to the page where you would like to embed the Tourial. Click the + icon where you would like it embedded and click Embed on the right-hand side toolbar. Click the Embed Data `` button and paste in the embed code. You'll need to set the height as described above in Common Issues. \[[Squarespace Help Article on Embed Blocks](https://support.squarespace.com/hc/en-us/articles/206543617-Embed-blocks)]. WordPress WordPress varies from site to site depending on how it's configured. If you have embedded code before, you should follow that same flow. However, if you have not, one plugin that can be beneficial is [Code Embed](https://wordpress.org/plugins/simple-embed-code/#:~:text=Code%20Embed%20can%20be%20found,%2Dcontent%2Fplugins%2F%20directory.). Their documentation has good walk-throughs. # Updating your Embed Code when changes are made The only time you need to update your embed code are the following: * Change status of mobile responsive version of the tour (Change to on or off) * Changes to mobile button enablement (change to on or off) * Changes to status of nav bar (change to on or off) * Styling changes do not require an updated embed code * Change or add certain account level custom scripts * White labeling your demos with your domain (going from \[yourcompany].tourial.com to demos.\[yourcompanydomain].com) Everything else like copy changes, branding changes, screenshot/video background changes or additions or subtractions, etc are intended to all be updating in real time. # Lightbox Embed A lightbox embed code allows you to easily display your Tourial in a pop-up modal when a user clicks on a button or link. In addition to being able to embed a Tourial directly on your website using the code generated under the Embed tab, you can also add it to your site using Tourial's Lightbox Embed code. ### Using the Lightbox Embed Code 1. The Tourial Lightbox embed code and HTML can be found under the Embed option in the Settings Menu -
2. The code can also be found in the Publish/Share menu -
2. You'll see two sections appear that you'll copy and paste to your HTML document. 3. The class name is what you need to add to your HTML tag that triggers the Lightbox - this could be a button, image, link, etc.
4. The next section is the code you'll add at the end of the \ in your HTML document
Note: If you've already created a mobile version of your Tourial that you'd like to display, be sure to select Mobile Tourial Enabled to trigger the mobile version for users on mobile devices. # Embedding Tour Centers ### Step-by-step Instructions to embed 1. Login to Tourial and head to **Tour Center,** then select the Tour Center you wish to embed. 2. Click on **Tour Center Overview.** 3. Select whether you want to keep the main navigation when you embed, then **Copy Embed Code**.
***Note:** when embedded, the upper right CTA (for example, Get a Demo) moves from the top to the left column under Topics and next to the Save & share button (see example below)*
# Tour Link Sharing Sharing your Tours via Links In addition to Embedding your tours on web pages, they can also be shared utilizing links. ## 1. Sharing Tours using Product Tour Pages: ## Why use Product Tour Pages? Save time by creating Product Tour Pages directly from the Tourial builder. No more need to spin up a new page to share your product tours. Product Tour Pages are: * Quicker to Launch: go from 'finished tour' to 'live in the wild' in seconds * A Better Buyer Experience: consistent look and feel with built-in whitespace that automatically optimizes for ideal viewing on any device. * More Likely to Convert: Built-in, persistent CTA with prime (and familiar) location. ## Creating a Product Tour Page 1. Open the Tour you wish to create a tour page for. 2. Click on the Publish button in the upper-right corner and Tourial will generate a shareable URL and an embed code 1. Click on the Share button to open up the share menu. From here you can copy your tour's shareable URL and the embed code. 2. You can also update the URL here - Tourial will generate a random string of characters for every tour, but we recommend updating this URL before you share with your buyers
3. Hit the Settings button in the top right and you'll be able to customize the look and feel of your new, shareable produc tour page. You'll want to make sure that your shareable tours are on-brand and have trackable CTAs so your viewers can engage with your calls to action at any point in the tour experience.
* Under CTA, you can edit the following:\ \- Text\ \- URL\ \- Font type and Color\ \- Background Color\ \- Border Color\ \- Border Width\ \- Background Color
* Upload your logo and click Save. (Recommended logo size of 64px height max) * Next, add your Page Styles. Then click Save. Options include:\ \- Background\ \- Nav Color\ \- Nav Border
* When you're done styling, click Done at the bottom. You can go back and edit each section at any time. Now you can see your live Product Tour Page! # Tour Center Link Sharing Quickly share your Tour Center ### Step-by-step instructions to find and share your URL In the Tourial app, head to **Tour Center**. There are two ways to find your shareable URL. *One way:* 1. If you've already created a custom URL or do not wish to change the auto-generated URL, simply click on thefor the Tour Center and then click **Share**.
2. Copy the URL and you're all set!
*The other way:* 1. Open the Tour Center you need and head to the **Tour Center Overview** tab. 2. Edit the customizable slug as needed, then copy and share anywhere!
# Share Links {% content-ref url="/pages/vZrqDpYuIZkN9lq901kX" %} [How to create a share link](/sharing/share-links/how-to-create-a-share-link) {% endcontent-ref %} # How to Create a Navless Playlist ## What are Navless Playlists? A Navless Playlist is a curated collection of content you can share as a single link. It includes one **Featured Content** item plus optional **Pinned Content** items. You can name the playlist, share it, and track engagement analytics. *** ### **1. Open the Playlist Builder** 1. Log in to your **Navless** account. 2. In the left-hand menu, click **Share Links**. 3. Click **Create Navless Playlist**. You will now see the Playlist Builder with: * Feed/Chat experience toggle * Featured Content * Pinned Content * Playlist Name + Create Link panel *** ### **2. Add Featured Content** 1. In the **Featured Content** section, click the **+** button. 2. The **Find Content** modal appears. 3. Search or filter using Solution, Audience, Segment, Topic, CTA, or Tags. 4. Select an item, then click **Add featured content**. Your selected item will now display in the Featured Content area.
*** ### **3. Name Your Playlist** 1. In the right panel under **Create Playlist**, enter a **Link name**. 2. Optionally, attach a **Salesforce Account** to attribute engagement. *** ### **4. Add Pinned Content (Optional)** 1. Scroll to **Pinned Content**. 2. Click the **+** button. 3. Select additional items from the content picker. 4. Pinned items appear beneath the Featured Content as supporting recommendations. *** ### **5. Choose the Visitor Experience** Select how visitors will experience the playlist: * **Feed** — Recommended content appears first. * **Chat** — Navless Chat appears first. *** ### **6. Create the Shareable Playlist Link** 1. Click **Create link**. 2. A shareable URL will be generated. 3. Copy and use the link anywhere (email, website, social, sales outreach). *** ### **7. Track Engagement Analytics** Navless automatically tracks: * Playlist views * Individual content views * Time spent on each item * Engagement by recipient/account (CRM-connected) Find analytics in the Content Hub under the playlist details. # How to create a share link ## Click the Share Links Tour below for a 30 quick tutorial on how to create custom share links. ⬇️ {% embed url="" %} # GIF Generation Generate and download GIF previews of your tour to share on email and socials. 1. After you Publish your tour, click Share. 2. In the Share menu, click View next to Animated GIF.
3. This will show an animated GIF you can download and add to emails and social posts. You'll also have the ability to regenerate the GIF if you want a different version.
# View Analytics for a Guide See how visitors are using a Guide — engaged time, prompts, content opens, and traffic sources — on one dashboard. ### What this is for Every Guide you publish gets its own analytics dashboard. If you want to know whether a Guide is actually working — how engaged visitors are, what they're asking, which content they're opening, and where they're coming from — this is the screen to open. It's one page that pulls together engagement, content, traffic, and first-party intent data. ### Before you start * You need at least one published Guide that has received visitor traffic. A brand-new Guide with no sessions yet will show an empty dashboard. ### Step-by-step * Open the Guide you want to analyze. * Click **Analytics** on the Guide.
* You can also go directly to the **Guide Analytics** menu on the sidebar
* You'll land on the per-Guide dashboard.
* Use the **date filter** to set the time range. Options are Last 7 days, Last 30 days (default), Last 90 days, This month, Last month, and All time. * Apply traffic-source filters as needed: **Referrer**, **UTM Source**, **UTM Medium**, and **UTM Campaign**. Each opens a multi-select popover with the values from your selected date range. * Read the **hero stats** at the top: Averageg engaged time (with median), Total sessions, and Emails captured. * Click any of the five **KPI cards** — Sessions, Visitors, Prompts, Skills, or Content — to change what the chart and table below show. The selected card highlights, and both the chart and the table swap to match.
* Scroll to the **traffic source panel** at the bottom for a breakdown by Referrer, UTM Source, UTM Medium, and UTM Campaign. This stays visible regardless of the active KPI. * To see a single visitor's full journey, click a row in the **Visitors** table. You'll go to their visitor profile with every session, prompt, and content open they've had. * To export the data behind the active KPI, click the **CSV export** button. You'll get a file named `guide-analytics-[metric]-YYYY-MM-DD.csv`. ### Tips & gotchas 📝 **Note:** The Emails captured tile only shows up once at least one email has been captured for this Guide in the selected date range. If you don't see it, that means no captures yet — not a missing feature. 📝 **Note:** Filters combine with "AND" across categories, and with "OR" within a category. Selecting "linkedin" and "twitter" under UTM Source shows visitors from either. Adding "newsletter" under UTM Campaign narrows it to visitors from linkedin-or-twitter *and* newsletter. ⚠️ **Important:** The five KPIs use different table shapes — Sessions shows only the chart with no table, Prompts shows a stream of cards with the actual messages visitors typed, and the others show sortable tables. If you switch metrics and the bottom of the page looks different, that's why. ### Common questions #### How fresh is the data? The dashboard computes live from your Guide's session and event data. There's no overnight job, so filter changes and date-range changes reflect current data immediately. Pages cache for around 30 seconds so repeated clicks stay snappy. #### Can I export the data? Yes. Click the CSV export button to download the active metric. To export a different metric, switch KPI cards first and export again. #### What do the Prompts show? The actual messages visitors typed into the Guide, newest first, with timestamps and visitor IDs. This is the raw text — not summaries — so you can read what visitors asked in their own words. #### Does this include traffic from embedded Guides? Yes. The dashboard counts both visits to the hosted Guide URL and visits to Guides embedded on your own pages. To split them, filter by Referrer. #### Is there a way to compare Guides side by side? Yes. The per-Guide dashboard is the drill-down view. There's also an account-wide overview that ranks all your Guides together — open it from the main Guides analytics area. # Navless Analytics Check out the Navless analytics overview video below {% embed url="" %} # Tour Analytics 👉 [Take the Analytics Tour](https://websitetours.tourial.com/pages/tourial-analytics) The Analytics page provides a single place for you to review and understand how your prospects are engaging with any of your live Tourials. You can access this data from any device to see how visitors are interacting with your Tourials. These insights can shed light on buyer intent levels, show you which parts of your Tourials they're finding most interesting, and how effective your Tourials are in driving conversions. First, click Analytics in the left-hand menu to view performance for all of your Tourials. \ ![](/files/3pUAeK0iH8qBhaPWwr9d) ### Analytics Overview Page Selecting Analytics will open your Overview page with aggregate data based on a selected date range. You can also split the data using the Device and Status dropdowns
* Total loads - total impressions (page loads) within a selected date range for all Tours - regardless of visitor engagement (hover/clicks) * Total sessions - total number of times someone has clicked into any Tour or hovered over an element that triggers an action (showing they actually engaged with it) * Total unique viewers - total number of unique individuals who have started sessions * Total conversions - total number of form conversions across all Tours **Sessions Timeline**\ Compare total loads, sessions, and unique viewers across a selected timeframe. You can also arrange the data using the dropdown for Daily, Weekly, or Monthly views
**Tour Table**\ See a list of your individual tours along with several data points including Loads, Sessions, Unique viewers, Conversions, and Avg. completion rate. Selecting the arrow will open the individual tour's analytics page
**Traffic Source**\ See where traffic is coming from across all your Tours (these categories are grouped by referring URLs) and sort by aggregated Loads, Sessions, or New visitors. \ **​Direct** - traffic with no known referrer (i.e. directly going to *tours.acme.com*) ​**Email** - traffic from a link within an email/email campaign (i.e. link tagged with email param) **Referral** - traffic from another source/referring URL (i.e. partner pages or marketplaces) **Search** - organic and paid traffic from any search engine (i.e. Google or Bing) **Social** - organic and paid traffic from any social network (i.e. LinkedIn or Facebook)\ \ ![](/files/z93WXcqqnnWnHWKYPxiv) 👉 Note - While these sources are listed alphabetically, Tourial matches your traffic to a source by checking referring URLs in the below order (and it can only match 1): Email > Social > Search > Direct > Referral **Traffic by Device**\ Compare tour loads between desktop and mobile traffic within a selected date range
*Pro Tip: If your mobile traffic is higher than 10%, consider building a mobile version of your Tourial.*
### Individual Tour Analytics Selecting a Tour opens your Analytics specific to that tour only, based on a selected date range. Similar to the overview page, you can add filters using the Device or URL dropdown.
* Loads - # of impressions (page loads) regardless of visitor engagement (hover/clicks) * Sessions - # of times someone has clicked into a Tourial or hovered over an element that triggers an action (showing they actually engaged with it) * Unique Viewers - # of individual people who have started a Tour session *Pro tip: If the number of Sessions roughly matches the number of Unique Viewers, then it's likely most visitors are engaging with the Tourial only once. If Sessions are a lot higher than Unique Viewers, they're likely engaging with a tour multiple times.*
* Average completion - the average rate of completion for a tour (calculated by number of steps completed/total number of steps in a tour) * Average session time - average length of a Tourial session in seconds * Form conversions - total form submissions divided by total sessions * Click through rate - CTA clicks (external links & forms) divided by sessions
**Engagement by Screens and Step**
* Sessions - Count of total sessions and unique sessions * Avg. time - average time in seconds for that screen * CTA clicks - count of external link clicks and form views/triggers * Form submits - number of forms submitted (for screens that have a form on them)
**Forms Timeline** Compare form views and submissions across a selected timeframe. You can also arrange the data using the dropdown for Daily, Weekly, or Monthly views.
**Engagement by CTAs** Shows how visitors are interacting with your CTAs and Forms.\ ![](/files/WpzZCzEq54ULLFoeLY5L) At the bottom, you'll see the same Traffic by Source and Device type charts for that tour.
*** ### The Analytics page helps you Understand, Optimize and Validate. #### UNDERSTAND By seeing metrics on session time, traffic sources, they can see how buyers are getting to their tours and which ones they are investing the most time in and converting. Then you can make better decisions about which channels to focus and where your buyers typically are. #### OPTIMIZE With a better understanding of how your buyers are interacting, you can optimize your Tours and ensure they're being implemented and shared the best way across your go-to-market team. * Tourials that are too long and complex can be simplified or broken into segments to be more effective with unique audiences or during specific stages of the buying journey. * When buyers are getting stuck or dropping off in a single place, that part of the story can be improved upon (or removed) to keep them engaged. * You can review engagement data to tailor tours for each use case. #### VALIDATE Use analytics to validate success of these three concerns: 1. The success of your optimization decisions. 2. The success of different types of Tours across various use cases. 3. The success of your Product Tour Marketing strategy with Tourial. # Tour Center Analytics 👉 [Check out the Tour Center Analytics Tour! ](https://websitetours.tourial.com/pages/demo-center-analytics) The Tour Center Analytics page provides a single place for you to review and understand how your prospects are engaging with any of your live Tour Centers. These insights can shed light on buyer intent levels, show you which parts of your Tour Center they're finding most interesting, and how effective your Tour Centers are in driving conversions. First, click Analytics in the left-hand menu and select the **Tour Center** tab.
## Tour Center Analytics Overview Page The Overview page contains aggregate data based on a selected date range.
* **Tour Center loads** - total impressions (page loads) within a selected date range for all Tour Centers - regardless of visitor engagement (hover/clicks) * **Tour Center sessions** - total number of times someone has clicked into any Tour Center or hovered over an element that triggers an action (showing they actually engaged with it) * **Tour Center unique viewers** - total number of unique individuals who have started sessions * **Sessions line graph** - compare total loads, sessions, and unique viewers across a selected timeframe. You can also arrange the data using the dropdown for Daily, Weekly, or Monthly views. * **Average session time** - an aggregate average time of sessions in minutes and seconds * **Click through rate** - total CTA clicks (external links, forms, and schedulers) divided by total sessions * **Engaged sessions** - the percentage of total sessions lasting 30 seconds or more ### Tour Center table
See a list of all your Tour Centers along with several data points including Loads, Sessions, Unique viewers, and Avg. session time. Selecting the arrow will open the individual Tour Center analytics. ## Tour Center Analytics Individual Page
* **Total Tour Center loads** - total impressions (page loads) within a selected date range for this specific Tour Center - regardless of visitor engagement (hover/clicks) * **Total Tour Center sessions** - total number of times someone has clicked into this Tour Center or hovered over an element that triggers an action (showing they actually engaged with it) * **Total Tour Center unique viewers** - total number of unique visitors who have started a session * **Average session time** - average time of sessions in minutes and seconds for this Tour Center * **Click through rate** - total CTA clicks (external links, forms, and schedulers) divided by total sessions * **Average topics viewed** - an average count of topics viewed compared to total number of topics
* **Engaged Sessions chart** - shows the % of sessions that are considered engaged (lasting at least 30 seconds) * **Topics** **chart** - horizontal bar chart listing all Topics, color separated by whether they were Responded to, Declined, or Skipped The below table shows you all the Topics in your Tour Center, how many Content Tracks are in each, and other data around Responses, Average Time spent, and how many Conversions occurred with a specific Topic active.
* **Conversion trends chart** - forms and schedulers opened via CTA clicks vs sessions with a conversion * **CTA click chart** - displays total counts for CTA clicks between Links, Forms, Schedulers, or the Save & share button \ **Content table**\ Displays the content within your Tour Center, its type, and average time spent.\ \ **Traffic source**\ See where traffic is coming from to your Tour Center by source URL.
# Inviting your team Collaborate with your team The first step in getting started with Tourial is getting your full team added! Check out the below article that goes into more details around Tourial User Management & Permissions. {% content-ref url="/pages/sRUUIEe7iaPujKLpEKNg" %} [User Management](/admin-and-settings/user-management) {% endcontent-ref %} # Setting your Account Branding Customize your Tourial Account In a few clicks, you can add branded color palettes and styling for your Tour Components. Once you've added it, you can apply those changes across all or multiple Tours — easy! [Check out the full article here](/building-interactive-demos/interactive-tours/branding).[ ](/building-interactive-demos/interactive-tours/branding) # Workspaces {% content-ref url="/pages/AXscvijs0VqWVGGxyFZK" %} [Create & Add Users to a Workspace](/admin-and-settings/workspaces/create-and-add-users-to-a-workspace) {% endcontent-ref %} # Create & Add Users to a Workspace Check out the Interactive Demo below for a 30 second tutorial on how to create a Workspace. {% embed url="" %} # User Management There are three user tiers within Tourial: Viewer, Editor, and Admin. ### Admin Permissions As an Admin, you'll see an option for Manage Users under Settings.
Admins have additional permissions on top of being an Editor and can do the following: * Add a subdomain (for Engagement Data) * Create new users * Edit an existing user * Change their user role (Viewer, Editor, or Admin) * Update email addresses (in case of initial typos, etc.) * Deactivate a user * Re-activate a deactivated user * View a list of all active & inactive users (Admins cannot delete users) * The active and inactive user list displays: * Name * User email * Role *(Access Level)* * Active/Inactive toggle * Created date * Last Activity date ### Editor Permissions As an Editor, you have full access to Tourial functionality to build Tours, connect Integrations, add Branding, etc.\ ​\ Editors are not able to create, manage or view Account users (as listed above for Admins). ### Collaborator Permissions As a Collaborator you have the ability to create tours and make edits to any **non-live** (Draft or Unpublished) tours. Collaborators do not have the ability to publish tours. ### Viewer Permissions As a Viewer, you can see everything in Tourial (Tours, Forms, etc.) and grab Share links. Viewers are not able to create Tours or edit existing Tours. # White Label Your Account & Content To White Label the content in your account and to receive contact-level engagement data, you'll need to head to your domain/network (DNS) settings ### Why do I need to white label? Integrations * To use any of the MAP/CRM Engagement Integrations, you'll need to serve your tours from your own domain rather than the Navless domain. Brand & trust * Visitors see the customer's own domain in the URL bar — feels like a native part of their site, not a third-party tool. This raises perceived legitimacy and reduces the "what is this random domain?" friction that hurts conversion. * Consistent branding across the buyer journey — no jarring handoff to a vendor domain mid-funnel. Marketing & SEO * Links, shares, and backlinks accrue to the customer's own domain rather than the vendor's.\ Analytics, pixels, and tag managers (GA4, HubSpot, LinkedIn Insight, etc.) on the parent domain can track sessions end-to-end without cross-domain stitching. * First-party cookies work. There is no first-party cookie functionality without white labeling, which is needed to track visitors between sessions. Deliverability & security signals * Email/Slack/social previews unfurl with the customer's domain, which gets through corporate filters and looks safer to end users. * Enterprise buyers often have allowlists or DLP rules keyed to known domains — white label lets the tour ride on an already-trusted host. Sales & enterprise procurement * Easier security review: the customer can point to their own domain/cert rather than explaining a vendor subdomain to IT/legal. * Removes vendor name from URLs shared with prospects — useful when the customer doesn't want competitors to know what stack they use. Embeds & integrations * Same-origin (or close to it) embeds avoid third-party iframe restrictions, cookie partitioning quirks, and CSP headaches when placing tours on their own marketing site. #### Step 1: Choose your white-label subdomain and add it to Domain Setup in Navless 🛑 You must be an admin in your account to complete this step. First, create a new subdomain from which to serve your content such as *tourial.yourcompany.com*. This subdomain can only be used for your content and should not be used for anything else. *Note: Visitors will not interact with the subdomain itself; creating it simply allows you to serve the content from your domain rather than the Navless domain.* In the Navless app, click on Settings in the left-hand navigation and head to Domain.
Once there, click "+Add Domain.
You'll see a field where you can enter your subdomain; note that you do not need to include "https\://" or "[www](http://www/)."
#### Step 2: Configure CNAME Record Once you've determined a subdomain, you'll need to log in to your domain provider and point a CNAME record for your chosen subdomain to *\[youraccountname].tourialdns.com.* For example, a CNAME record for the account, Acme (acme.com), where they've chosen the subdomain to be "guide" would be: Subdomain: guide CNAME: acme.navless.ai Setting up a CNAME record works a little differently depending on your hosting provider (GoDaddy, HostGator, etc.). Below are guides for some common providers: ​ * [Add a CNAME record in GoDaddy](https://www.godaddy.com/help/edit-a-cname-record-19237) * [Edit a CNAME record in HostGator](https://www.hostgator.com/help/article/how-to-change-dns-zones-mx-cname-and-a-records) * [Updating CNAME in Domain.com](https://www.domain.com/help/article/dns-management-how-to-update-cname-aliases) * [Set up a CNAME record in NameCheap](https://help.talentlms.com/hc/en-us/articles/360014574034-How-to-set-up-your-CNAME-with-NameCheap) * [Add new DNS record in BlueHost](https://www.bluehost.com/help/article/dns-management-add-edit-or-delete-dns-entries#add) * [Create a CNAME in CloudFlare](https://developers.cloudflare.com/dns/manage-dns-records/how-to/create-subdomain/) * [Create a CNAME record in Google Domains](https://support.google.com/domains/answer/3290350?visit_id=638149334548346772-982645537\&rd=1) If you need assistance setting up a CNAME record and pointing it to Navless, please reach out to your Customer Success Manager or [submit a ticket here](https://form.asana.com/?k=MGdVhbKun_OG92XX0mAytA\&d=1169712465458242). #### Note: If you had a Tour(s) embedded anywhere prior to adding a subdomain and configuring your DNS see below. The [embed code](https://tourial.gitbook.io/tourial-customer-product-documentation/sharing/embedding-demos/embedding-interactive-demos) changes once you've created a subdomain. So make sure you use the updated version wherever you have tours already embedded to ensure it properly loads from the new subdomain. *** ### # Tourial Forms One of the easiest ways to influence your business is to have embedded forms inside of your tours so that you can collect user information if they'd like to provide it. Most often forms are used as a lead generation mechanism so that your buyers can opt to share their contact information with your business for demo requests, more information, event signups, etc. To create a Tourial form, simply click the "Forms" tab in your account (pictured below).
You can then configure the form fields and style of your form to reflect the information you're trying to capture and the form's look and feel (pictured below).
If you are integrated with a marketing automation platform and connecting your forms for lead capture, please refer to the integrations page on the left for specific form setups. If you are not using a marketing automation integration but still wish to collect lead information, you can enter an email address for lead info to be submitted to (pictured below)
# Form Fails Tourial sends an email to Tourial admins for 3 specific form failures **if you are using the HubSpot integration.** We do not alert Marketo or Pardot users of form fail errors. There are three common form failures that may occur when a visitor attempts to submit a form in one of your interactive demos or in a tour center. * Blocked Email * You may have blacklisted specific emails on your end * You have enabled ‘exclude generic emails' in your HubSpot forms, but not in your Tourial form * We will attempt to auto fix this every week through automations that we run * CAPTCHA is enabled in your HubSpot form (HubSpot does not allow 3rd party forms to submit to their API if CAPTCHA is enabled on that HubSpotform) * Required field missing * You have a field in Tourial that no longer exists in HubSpot (you've likely removed a field in your HubSpot form but did not remove that field in your Tourial form) * The inverse of this, 'you have a field in HubSpot that does not exist or is not mapped in your Tourial form', can also occur. **We do not currently send email alerts for this. Tourial gets an internal email alerting us, and we pass this on to the account admins.** * If the field in HubSpot that is missing in your Tourial form is REQUIRED in your HubSpot form, the form submission will fail. But if that same field is OPTIONAL in your HubSpot form, the form submission will fire with no issue. * **This specific rule applies to HubSpot, Marketo, Pardot, and Salesforce form integrations.** You can see these three emails below: ### BLOCKED EMAIL Subject: Issue with Recent Form Submission Due to a Blocked Email Address\ ​\ ​*Hi there,*\ *​* *We were unable to process a recent form submission because the email domain has been blocked by {YOUR MAP INTEGRATION}. We apologize for the inconvenience.*\ *​* *Form submission information:* *First Name: John* *Last Name: Doe* *email:* [*john@doe.net*](mailto:john@doe.net) *If you have any additional questions please reach out to* [*support@tourial.com*](mailto:support@tourial.com)*.* *Thank you,* *Tourial Team*\ ​ \--------------------- ### CAPTCHA Subject: Issue with Recent Form Submission due to CAPTCHA \ ​*Hi there,* \ ​*We were unable to process a recent form submission due to an issue with the CAPTCHA verification. We apologize for the inconvenience.* \ ​*Please confirm you don’t have a CAPTCHA configured on {FORMNAME} in your {MAP} form settings to prevent this from happening again.* \ ​*Form submission information:* *First Name: John* *Last Name: Doe* *email:* [*john@doe.net*](mailto:john@doe.net) *If you have any additional questions please reach out to* [*support@tourial.com*](mailto:support@tourial.com)*.* \ ​*Thank you,* *Tourial Team* \--------------------- ### REQUIRED FIELD MISSING / FIELD NOT IN FORM DEFINITION Subject: Issue with Recent Form Submission due to Missing Field \ ​*Hi there,*\ *​* *We were unable to process a recent form submission due to a missing form field. We apologize for the inconvenience.*\ *​* *{{if FORMV3}} Please go to app.tourial.com/forms, select {FORMNAME}, disconnect, then reconnect the form.*\ *​* *{{if FORMV2}} Please go to app.tourial.com and ensure the number Tourial form's fields match the number of {MAPNAME} fields.*\ *​* *Form submission information:* *First Name: John* *Last Name: Doe* *email:* [*john@doe.net*](mailto:john@doe.net) *If you have any additional questions please reach out to* [*support@tourial.com*](mailto:support@tourial.com)*.* *Thank you,* *Tourial Team* # Hyperlinking in Tourial Forms ### Adding Hyperlinks to Your "Opt-In Text" in Forms If you want to include clickable hyperlinks in your form's opt-in text, you'll need to use a bit of HTML. This allows users to easily access your Terms of Service, Privacy Notice, or any other important document directly from the form. Pictured below is where you can include opt-in text in your Tourial forms
#### How to Add Hyperlinks Using HTML To add a hyperlink, you'll need to use the `` HTML tag. Below is a simple example of how to do this: **Original Text:** "By filling out and submitting this form, you confirm that you agree to our Terms of Service. For more information on how we process personal information, please refer to our Privacy Notice." **With HTML Hyperlinks:** ```html By filling out and submitting this form, you confirm that you agree to our Terms of Service. For more information on how we process personal information, please refer to our published Privacy Notice. ``` #### Breakdown of the HTML Tag * ``: This is the anchor tag that creates the hyperlink. * `href`: This attribute contains the URL you want to link to. * The text between the opening `` tag and the closing `` tag is what the user will see as the clickable link. That's it! Just replace the URLs with your own, and you'll have clickable links in your form. # Form Compliance In Tourial, you have the ability to turn on Captcha, Honeypot and include a text field for opt-in. Captcha and Honeypot require no work on your end other than checking the box in the form settings. As for Opt-in text, you can add any raw HTML to the text input field to include links and ensure that your forms are passing any GDPR and privacy requirements.
Accessing this can be found under the form sections called **Anti-Spam** and **Show Opt-in Text.** # MAP/CRM Integrations # HubSpot Navless HubSpot Integrations There are 3 Core Integrations with Navless and HubSpot. 1. Lead Forms 2. Engagement Data 3. Scheduling For all 3 of these you will need to begin by setting up the connection between Navless and HubSpot. ## Setting up the Navless & HubSpot Connection As marketers, we know how valuable Navless engagement data is when it's stitched together with contextual information about leads and prospects within your marketing automation platform (MAP). 🚨 IMPORTANT NOTE: A required step with the integration involves setting up a CNAME record in your DNS so that your demos can be white-labeled (ie. demos.yourcompany.com). This typically involves a developer, IT, or web admin, so *we recommend putting in the ticket now.* That way you can knock out the necessary steps synchronously and go live quicker. ## Setup in the Navless App Setting up the HubSpot integration is a quick and easy process. The first steps will be completed in your Navless app and the remainder involves configuration with your domain provider. ### Step 1: Connect your HubSpot account to Navless From your [integrations page](https://app.tourial.com/integrations), select Integrations in the left menu and then click Connect to begin the authentication process and connect your HubSpot account to Navless. \ \ PLEASE NOTE: A HubSpot SuperAdmin is required to perform the authentication process.
### Step 2: Turn on Engagement Activity Once you've successfully connected your HubSpot account, you'll be redirected back to the Integrations page in the Navless app. Now, click Manage Integration >> Settings to get to the [HubSpot settings page](https://app.tourial.com/integrations/hubspot). In the section labeled Engagement Activity, you'll see a dropdown menu to turn Engagement Activity on or off. To ensure Navless engagement data is captured and sent to HubSpot, select Engagement Activity ON. *Note: Turning this off will disable all Engagement Activities being captured and sent to HubSpot.*
### Step 3: Configure your custom subdomain {% content-ref url="/pages/tsqw3paq4tiPZNmC5qXs" %} [White Label Your Account & Content](/admin-and-settings/white-label-your-account-and-content) {% endcontent-ref %} ## Key Elements of the HubSpot Integration ### HubSpot Engagement Activity This part of the integration pushes activity data from visitors' engagement with your content into your HubSpot account. 🚨 IMPORTANT NOTE: To ensure you're seeing Engagement Activity on a contact record, head to Filter activity on a contact record and select Navless/Tourial under Integrations:\ ![](/files/W8gxuiDwXsnuahDtXPyb) Once data funnels into HubSpot, it'll be tied to a contact record if that contact is already known and exists within HubSpot. Engagement Data also works for anonymous visitors or people who are not yet contacts in your HubSpot account. Once that visitor converts — either by submitting a form, clicking a tagged email, etc. — their historical engagement data is retroactively pulled into HubSpot (assuming those HubSpot cookies have remained and that visitor did not clear their cookies). 🚨 IMPORTANT NOTE: Be sure you have your HubSpot tracking script added to your website so that visitor tour engagement can be linked to any website forms outside your tour. *** What's next? Check out the [Engagement Data visible in your HubSpot account and FAQs!](/integrations/map-crm-integrations/hubspot/tour-engagement-data) See how to [connect your HubSpot form to Tourial.](/integrations/map-crm-integrations/hubspot/lead-forms-with-hubspot) Also, take the [HubSpot Engagement Tour](https://websitetours.tourial.com/pages/hubspot-integration) to see some of the ways you can use Engagement Data to create lists, workflows and influence your lead scoring model.
# Guide engagement data in HubSpot Once HubSpot is connected, every Guide session your visitors complete flows into the matching contact record automatically. ## What this is for When a visitor has a conversation with one of your Guides, Navless sends that session to HubSpot as a timeline event on the matching contact record. You can use that data to build lists, trigger workflows, build reports, contribute to lead scoring, etc, all using HubSpot properties and tools you already have. *** ### Before you start * Your HubSpot account must be connected to Navless and **Engagement Activity** must be on. See [Set up the HubSpot integration](/integrations/map-crm-integrations/hubspot). * HubSpot's tracking script must be installed on the pages where your Guides are embedded. This is what links anonymous Guide activity to a contact once that visitor becomes known. Most teams already have it. * Visitors must have given functional cookie consent. Navless does not send data for visitors who declined.
*** ### How Guide engagement data flows into HubSpot Guide engagement data is matched to contacts using HubSpot cookies. Once your account is connected and Engagement Activity is on, Guide activity is recorded for any cookied visitor - even before they are a known contact. For data to be sent for a given session, all three of the following must be true: * Your HubSpot account is connected to Navless and **Engagement Activity** is on * The visitor has given functional cookie consent * The visitor has a HubSpot tracking cookie on their browser, or a known email address captured during the Guide ⚠️ **Important:** Make sure HubSpot's tracking script is installed on the site that hosts your Guides. The cookie it sets is what links anonymous Guide engagement to a contact record once that visitor becomes known. Data is sent **once per session, when the session ends.** See [How does Navless identify "known" vs. anonymous visitors?](https://claude.ai/chat/a98513ff-c433-4e7b-9429-6f77d8e9e8c5#faqs) below for how anonymous visitors and retroactive matching work. *** ### Contact record activity feed A **Guide Session** timeline event is created on the contact each time they complete a session with one of your Guides. In the activity feed it appears as: > *Engaged with the **\** guide at \* Expanding the event shows the details below, grouped into Engagement, Visitor Intent, and Session Metadata. ⚠️ **Important:** Not seeing Guide activity on a contact record? On the contact's activity feed, click **Filter activity** and make sure **Navless** is selected under **Integrations**.
#### Engagement How the visitor interacted with the Guide during this session. | Field | What it means | | -------------------------------------- | ------------------------------------------------------------------------------------------------------------------------------------------------------- | | **Guide: Engaged Time (Seconds)** | Active, hands-on time the visitor spent in the Guide this session. Idle time is excluded, so this reflects true engagement rather than a tab left open. | | **Guide: Session Duration (Seconds)** | Total elapsed time of the session, from start to the visitor's last activity. Includes idle gaps. | | **Guide: Prompts Sent** | Number of questions or prompts the visitor sent to the Guide. | | **Guide: Skills Executed** | Number of interactive skills the Guide ran for the visitor (for example, generating a tailored summary or comparison). | | **Guide: Skill Results Shared** | Number of times the visitor shared a result the Guide produced. | | **Guide: Skill Results Downloaded** | Number of times the visitor downloaded a result the Guide produced. | | **Guide: Content Opened** | Number of content items the visitor opened during the session. | | **Guide: Content View Time (Seconds)** | Total time the visitor spent viewing the content they opened. | | **Guide: Content Viewed** | The titles of the content items the visitor opened this session. | | **Guide: CTAs Surfaced** | Number of calls-to-action the Guide presented to the visitor. | | **Guide: CTAs Clicked** | Number of CTAs the visitor opened or clicked. | | **Guide: CTAs Submitted** | Number of CTA forms the visitor submitted. | | **Guide: Email Captured** | Whether the visitor's email was captured during this session (`true` / `false`). | | **Guide: Email Capture Method** | How the email was captured — by **magic link** or by **form**. | | **Guide: Bounced** | Whether the session was a bounce — the visitor left without meaningful engagement. | #### Visitor intent The first-party intent Navless learned from the visitor's conversation with the Guide. These reflect what the visitor told the Guide about themselves and what they are looking for — not inferred or third-party data. The most recent value for each field also persists on the contact record as a property (see [Contact properties](https://claude.ai/chat/a98513ff-c433-4e7b-9429-6f77d8e9e8c5#contact-properties) below). | Field | What it means | | ----------------------------- | ------------------------------------------------------------------------------------------------------ | | **Guide: Role** | The visitor's role or persona, as understood from the conversation (for example, "Marketing Manager"). | | **Guide: Intent** | What the visitor is trying to accomplish, as understood from the conversation. | | **Guide: Topics of Interest** | The pain points and use cases the visitor raised while talking to the Guide. | | **Guide: Profile Signals** | Firmographic context gathered from the conversation — industry, company size, and maturity. | #### Session metadata & attribution Identifiers and campaign context for the session. | Field | What it means | | ------------------------ | ---------------------------------------------------------- | | **Guide: Name** | Name of the Guide the visitor engaged with. | | **Guide: Page URL** | The page where the Guide was viewed. | | **Guide: Date Viewed** | When the session took place. | | **Guide: Country** | The visitor's country, derived from their IP address. | | **Guide: Referrer Host** | The website domain that referred the visitor to the Guide. | | **Guide: Session ID** | Navless's unique identifier for this session. | | **Guide: ID** | Navless's unique identifier for the Guide. | | **Guide: Visitor ID** | Navless's unique identifier for the visitor. | | **utm\_source** | Campaign source captured from the Guide's landing URL. | | **utm\_medium** | Campaign medium captured from the Guide's landing URL. | | **utm\_campaign** | Campaign name captured from the Guide's landing URL. | *** ### Contact properties (for lists, workflows, reporting, and lead scoring) In addition to the per-session timeline event, Navless writes a set of **lifetime rollup properties** directly to the contact record. These accumulate across every Guide session a contact has had, which makes them ideal for segmentation, workflow triggers, reporting, and lead scoring. When building a list, workflow, or report, these are available as standard contact properties: | Property | What it means | | ---------------------------------------------- | -------------------------------------------------------------------------------------- | | **Guide: Total Sessions** | Total number of Guide sessions this contact has completed. | | **Guide: First Session Date** | The date of the contact's first Guide session. | | **Guide: Last Session Date** | The date of the contact's most recent Guide session. | | **Guide: Last Guide Viewed** | The name of the most recent Guide the contact viewed. | | **Guide: All Guides Viewed** | The names of every Guide this contact has viewed. | | **Guide: Total Unique Guides Viewed** | The number of distinct Guides the contact has viewed. | | **Guide: Total Engaged Seconds on All Guides** | Lifetime engaged time across all of the contact's Guide sessions. | | **Guide: Total Prompts on All Guides** | Lifetime number of prompts the contact has sent across all Guide sessions. | | **Guide: Role** | The contact's most recently understood role. | | **Guide: Intent** | The contact's most recently understood intent. | | **Guide: Topics of Interest** | The pain points and use cases the contact has raised across their Guide conversations. | | **Guide: Profile Signals** | The contact's most recent firmographic signals — industry, company size, and maturity. | | **Guide: Visitor ID** | The Navless visitor identifier, useful for joining Navless data to this contact. | NOTE: **Timeline event vs. contact property.** The timeline event is a point-in-time record of a single session, ideal for the activity feed and time-based reporting. The contact properties above are always-current rollups, use them to build lists, trigger workflows, and feed lead-scoring models. *** ### How anonymous visitors are handled Navless tracks every cookied visitor, even before they become a known contact. If a visitor engages with a Guide without submitting a form, their session is tracked against the HubSpot cookie. When that visitor later submits a form and becomes a HubSpot contact, all of their earlier Guide sessions are retroactively attached to the new contact record, full engagement detail, intent signals, and campaign attribution included. This works as long as the HubSpot cookie was present and the visitor did not clear their cookies. If a visitor never becomes a known contact, their sessions stay linked to the cookie until they do. *** ### FAQs #### How does Navless identify "known" vs. anonymous visitors? Navless uses HubSpot cookies. If a cookie is already tied to a known contact, the Guide session is attached to that contact. If not, the activity is still tracked against the cookie so it can be attached later if and when that visitor becomes known, typically via a form submission. #### Is Guide engagement data retroactive for visitors who are not yet in HubSpot? Yes. If a cookied but anonymous visitor engages with a Guide and later becomes a contact, for example, by submitting a form, their earlier Guide engagement is associated with the new contact record, as long as the HubSpot cookie was present and the visitor did not clear their cookies. #### What happens if a visitor declines cookies? No data is sent. Navless fully respects the visitor's consent choice. Guide engagement data is only sent when the visitor has given functional cookie consent. #### How often is Guide engagement data sent to HubSpot? Once per session, when the session ends. The lifetime contact properties are updated with each new session. #### What is the difference between Engaged Time and Session Duration? **Engaged Time** counts only active, hands-on interaction and excludes idle periods, it is the best measure of real engagement. **Session Duration** is the total elapsed time from the start of the session to the last activity, including idle gaps. #### Where do Role, Intent, Topics of Interest, and Profile Signals come from? These are first-party signals drawn from the visitor's own conversation with the Guide, what they shared about their role, goals, pain points, use cases, and company. They are not purchased or inferred from third-party data. #### How do I turn Guide engagement data on or off? Use the **Engagement Activity** toggle on your [HubSpot settings page](/integrations/map-crm-integrations/hubspot). Turning Engagement Activity off stops all Guide engagement data from being sent to HubSpot. #### Does Navless store personal information? Navless passes any lead data captured in a Guide (such as an email submitted through a form) to HubSpot, where it is stored. Navless does not store that PII itself. *** **What's next?** * [Set up the HubSpot integration](/integrations/map-crm-integrations/hubspot) * [Trigger HubSpot workflows from engagement data](/integrations/map-crm-integrations/hubspot/tour-engagement-data/triggering-hubspot-workflows) * [Send Slack notifications from HubSpot](/integrations/map-crm-integrations/hubspot/tour-engagement-data/slack-notifications-with-hubspot) * [Set up HubSpot reporting](/integrations/map-crm-integrations/hubspot/hubspot-reporting-setup) If you have questions about Guide engagement data in HubSpot, reach out using the chat in the lower-right corner or email . # Instant Scheduling with HubSpot Scheduler 👉 [Take a Tour before Getting Started](https://websitetours.tourial.com/pages/hubspot-scheduling/3bcc2370)👈 ## Integrate with HubSpot If you haven't already connected your HubSpot account to Tourial, please [see this article to set up the integration](https://tourial.gitbook.io/tourial-customer-product-documentation/integrations/hubspot). \ You can add a HubSpot meeting event either directly to your Tour, or to your Tour Center. But first, you'll need to add the HubSpot Meeting Links you'd like available. ### Adding HubSpot Meeting Links to your account 1. Go to Integrations > HubSpot Manage Integration. 2. Under Meeting Links click Add New. 3. Name your meeting link and then paste the URL. Click Save
## Adding a HubSpot meeting to your Tour Page * Open the Tour you want to add a HubSpot meeting to. * Click on the settings icon ⚙️ and then toggle on a CTA button under the Navbar tab. \ Go to the On Click dropdown menu and select HubSpot Scheduler. Then, select the Meeting you want to serve using the HubSpot Meeting dropdown
Tip: Don't forget to style your CTA button if it's not already!\ ​ * Select Done. And then be sure to hit Save and Update Live Version.\ ​ To test, open your Tour Page using the URL and click your CTA button. Now when someone clicks your CTA button in the navbar, they'll be served a calendar popup like below
\ Adding a HubSpot meeting to your Tour Center ------------------------------------------------------------------------------------------- 1. Open the Tour Center you want to add a HubSpot Meeting to. 2. Select Navigation in the left side menu and then select "On CTA Click" and click HubSpot Meeting in the On Click Drop Down
3. Click Publish and you're done! To test, open your Tour Center using the URL and click your CTA button. Now when someone clicks your CTA button in the navbar, they'll be served a calendar popup like below 👇 \*Note that when your tour or tour center is embedded on your website page, the scheduler may open in a separate tab. Tourial doesn’t control the size of the Hubspot Scheduler Modal, so in instances where the embedded Tourial content cannot fit the scheduling container modal, the scheduler will be triggered in a separate tab. In these instances, a booked Demo will not be counted in Tourial analytics and could also potentially impact contact engagement data delivery. \ HubSpot Scheduling and Analytics ------------------------------------------------------------------------------- What's tracked with the HubSpot Scheduling Integration: * CTA Clicks * Conversions #### Overview page: * Total conversions - Total sessions with a conversion (form submits or events scheduled #### Individual Tour analytics: * Conversion rate - Total sessions with a conversion (form submits or events scheduled) divided by total sessions * Click through rate - Total CTA clicks (external links, forms, and schedulers) divided by total session * CTA Clicks and Conversions within Tour Screen table - based on what screen a user is on when a CTA button is clicked (CTA clicks) or an event is scheduled (Conversions * Conversion trends - Forms and schedulers opened/triggered vs. forms and schedulers submitted for a given time period distributed daily, weekly, or monthl * CTA Clicks - Tracked under Scheduler in yello # Tour Engagement Data 👉 [Take a Tour before Getting Started](https://websitetours.tourial.com/pages/hubspot-integration/)👈 Once you've completed the [setup of the HubSpot Integration](/integrations/map-crm-integrations/hubspot), you'll start to see Tourial engagement data populating in your HubSpot account. This data will be visible in the contact record activity feed, and you'll also be able to create lists, workflows, and reports based on visitors' engagement with your Tourials.\ ​\ Tourial Engagement Data is sent to HubSpot via HubSpot Cookies. Once your account is connected to HubSpot, Tour engagement activity will be recorded for any cookied visitor. See FAQs below for additional information. ## Contact Record Activity Feed A timeline event is created each time a contact engages with one of your Tourials. The following data is displayed: ### Engagement Data * Time Spent on Tourial (Seconds) * The total amount of time in seconds a visitor spent on a Tour during a single session * Total Clicks * Count that refers to the total number of clicks throughout the Tourial * CTA Clicks * Count that refers to the number of external link clicks, forms viewed, and schedulers opened throughout the Tourial * External Link Clicks * Count that refers to the number of external links clicked on across the Tourial * Forms Viewed * Count that refers to the number of forms that were viewed across the Tourial * Forms Submitted * Count that refers to the number of forms submitted ### Tourial Metadata * Tourial Name * Name of the Tourial as indicated in your Tourial account * Tourial URL * The shareable URL for the Tourial * Tourial ID * ID of the Tourial from the Tourial database * Session ID * ID of the session from the Tourial database * Visitor ID * ID of the visitor from the Tourial database * Date Viewed * Date the Tourial was viewed * utm\_source * utm\_medium * utm\_campaig Not seeing any data in the activity feed? Make sure you've selected Tourial in the activity filter, under the Integrations section.
## Segments (Lists) and Workflows When creating a Segment (List) or setting up a Workflow, you'll have access to the above Tourial engagement data.\ ​\ In a filter, first type "Tourial" and select Tourial: Tourial View Timeline Event Properties. Then you'll see the full list of Engagement data points to select #### Available properties to filter on: * Occurred * Tourial: All Tourials Viewed - *String field that can be used to search by Tourial name* * Tourial: CTA Clicks - *Total number of external link clicks, forms viewed, and schedulers opened on that Tourial Content* * Tourial: Date Viewed - *Date the Tourial Content was viewed* * Tourial: External Links Clicked - *Number of clicks on any external link in a Tourial* * Tourial: First Session Date - *Date a contact first interacted with Tourial Content* * Tourial: Forms Submitted - *Number of forms submitted* * Tourial: Forms Viewed - *Number of forms viewed (even if not submitted)* * Tourial: ID - *ID of the Tourial from the Tourial database* * Tourial: Last Session Date - *Date a contact last interacted with Tourial Content* * Tourial: Last Tourial Viewed - *Name of the most recent Tourial viewed* * Tourial: Name - *Name of the Tourial Content from your Tourial account* * Tourial: Session ID - *ID of the session from the Tourial database* * Tourial: Time Spent (Seconds) - *Total time in seconds the contact has spent on a specific Tourial* * Tourial: Total Clicks - *Count referring to the total number of any type of click throughout a Tourial* * Tourial: Total Events Scheduled - *Total number of events scheduled via scheduler integration* * Tourial: Total Schedulers Opened - *Total number of times a scheduler was clicked on* * Tourial: Total Seconds on All Tourials - *Total time in seconds spent on all Tourials* * Tourial: Total Sessions - Total number of sessions that contact has had across all Tourials * Tourial: Total Unique Tourials Viewed - *Number of unique Tourials viewed by a contact* * Tourial: URL - *The unique URL for a Tourial which can be used to pull data on a specific Tourial* * Tourial: Visitor ID - *ID of the visitor from the Tourial database* * utm\_source * utm\_medium * utm\_campaign *** ## FAQs 1. How is Hubspot identifying the "known" contacts on ungated tours? 1. We use HubSpot cookies. So if the cookie has been identified, then it's a known contact, otherwise, the data is still tracked to that cookie for if/when that cookie becomes identified in the future. Typically the process for converting an anonymous visitor to a known lead is through a form. Form submissions attach the HubSpot cookie to associate the cookie with the visitor. 2. Can HubSpot forget a cookied visitor? 1. This is dependent on the user's browser. If someone clears their cookies they are no longer known until they identify themselves again. 3. Can we set up an automation to gate a Tourial only when a contact is unknown? (i.e. - keep them ungated for known contacts and gated for unknown) 1. Not at this time. 4. If a website visitor declines cookies, will they still be known in HubSpot? 1. If there is no HubSpot cookie, they cannot be tracked, so Tourial Engagement Data would not be sent to HubSpot. 5. How often is Tourial Engagement Data sent to HubSpot? 1. We send the data to Hubspot with every session. There are a lot of options for your to filter, create lists, or build workflows in Hubspot based on Engagement Data. 6. Is Engagement Data retroactive for visitors that aren't currently in our HubSpot database? 1. Activity does retroactively update a contact record if they were cookied and interacted with a tour prior to becoming identified. \ Say someone isn't known in HubSpot, but they're cookied and view a tour. Three days later they convert through a form submission and become a contact in HubSpot. The Tourial Engagement Data captured earlier will be visible on that contact record. 7. How does the Tourial <> HubSpot form integration work? 1. First, you create a HubSpot form for your tour (this could be an existing form or a new one specific to your tours). Then, in the Tourial builder, after selecting Forms, you'll connect your HubSpot form to Tourial and your form fields will import. 8. So then Tourial has the ability to capture PII Information? 1. PII is Personal Identifiable Information – we only store PII for customers that create tours within the builder (because you create a Tourial account). As far as any lead data collected through a form in a tour, we collect this info and pass it to HubSpot, and then HubSpot stores it. But, we do not store that information. If you have any questions about the engagement data sent to HubSpot, feel free to chat with us using the chat feature in the lower right corner, or email . # Slack Notifications with HubSpot 👉 [Take a Tour before Getting Started](https://websitetours.tourial.com/pages/618281b0-e799-40b0-b64f-4eaf61c157ba)👈 If you haven't integrated HubSpot with your Slack instance yet, you'll need to start there. If it's already connected, you'll start with [Workflows](/integrations/map-crm-integrations/hubspot/tour-engagement-data/triggering-hubspot-workflows). \ Connect Slack to your HubSpot instance ------------------------------------------------------------------------------------- Integration requirements * You must be a super admin or have App Marketplace permissions in your HubSpot account. * You must be an admin in the Slack workspace you're connecting. * Your HubSpot email must match your Slack user email. Connecting Slack * In your HubSpot account, click the Marketplace icon in the main navigation bar, then select App Marketplace. * Search for the Slack integration, and select Slack. * In the top right, click Connect app. You'll be redirected to Slack in a new browser tab. * Review the requested permissions, then click Allow. \ Using a HubSpot Workflow to send Slack notifications --------------------------------------------------------------------------------------------------- 1. In your HubSpot account, go to Automation and select Workflows 2. Select Create New Workflow from scratch 3. To create your workflow trigger, scroll down and select Tourial View Timeline Even 4. Now select your criteria. For the purpose of this, we'll start with Tourial Nam \ \*\*If you only want to trigger a Slack notification for one specific Tour, enter the name (or use Tourial URL instead) exactly as it appears.\ ​\ ​*Tip: Maybe you have several tours and they all start with the same naming convention. You could use "starts with" instead of "equal" to capture all tours that start with "Tourial Tours" for example.* 5. Add any other criteria layers on top. A great one to try is Tourial: Time Spent (Seconds) to only send notifications if a visitor spends at least X seconds in your tour 6. Now, you'll add actions to your workflow. We'll keep it simple for now and just add a Slack notification. Click the + icon and select Send Slack notificatio 7. Choose the Slack channel you want to send the notification to and enter the message and any contact tokens (email, contact owner, etc.). \ We recommend including Tourial Engagement Data too! You can use Tourial: Last Tourial Viewed, for example, to show the name of the Tourial most recently engaged with 8. Click Save. Then publish your workflow and that's it! *Note: To ensure leads can enter the workflow multiple times (i.e. if they continue engaging with a tour or other tours) update the Re-enrollment settings before you publish the workflow* There are so many ways you can use HubSpot workflows, Tourial Engagement Data and Slack notifications.\ ​\ Let's say a prospect views a tour that a member of the sales team sent, or maybe they came to the website again and viewed it. Wouldn't it be great to automatically send a Slack notification to that team member so they're aware their prospect is actively engaging with a tour? Use the Send notification to existing owners setting when creating your Slack notification. Boom! A channel notification and direct message are sent at the same time! Talk about visibility 🤩
# Triggering HubSpot Workflows First thing's first: Make sure you've already [connected HubSpot to your Tourial account ](/integrations/map-crm-integrations/hubspot#h_fbb4a6fb3d)before you try to build a HubSpot workflow. ## Creating a Tourial-based workflow trigger 1. In your HubSpot account, create a new workflow and select "Set up triggers" 2. Scroll down to Tourial: Tourial View Timeline Event 3. Next, you'll see a list of available engagement data you can use 4. Depending on your needs, we might suggest using Tourial: Name in addition to Tourial: Time Spent (Seconds) so that you're only including those who actually spent some time viewing your Tourial in your workflow. But you can use whichever identifier makes sense (forms submitted, last Tourial viewed, etc. 5. Copy the name of your Tourial from your Tourial account and then paste it under "equal to any of" (if there are multiple Tourials you'd like to use, you can continue adding Tourial names in this field). Note: You can then add any other AND/OR filters to your trigge 6. Once your triggers are all set, continue adding steps to your workflow as needed! ### Check out some of the ways workflows could be used leveraging Tourial engagement data 👇 * Add people that view your Tourial to a HubSpot campaign to continue nurturing them with additional resources * Tag people that have viewed your Tourial and/or add them to a list * Add visitors that aren't already customers to a Salesforce campaign or create a Salesforce task so your sales team can follow up * Send a Slack notification to a channel or user when someone views your Tourial * Add visitors to an ad audience for retargeting * Update a visitor's lead status or use your lead scoring model to give them additional points # Pushing Engagement Data from HubSpot to SFDC Requirements: * You have the HubSpot Engagement Data Integration setup and live * You have [Salesforce integrated](https://knowledge.hubspot.com/articles/kcs_article/salesforce/install-the-hubspot-salesforce-integration) with your HubSpot account For a quick and easy way to sync Tourial Engagement Data from HubSpot to Salesforce, you can use HubSpot's native feature - [Sync HubSpot Activities to Salesforce Tasks](https://knowledge.hubspot.com/salesforce/sync-activities-and-tasks-between-hubspot-and-salesforce#sync-hubspot-activities-to-salesforce-tasks).\ ​\ ​Note: This makes use of existing HubSpot features and is not a sync feature built by Tourial. ### Turning on Activity sync to Salesforce 1. In your HubSpot account, go to Settings > Integrations > Connected Apps 2. Select Salesforce and then click on the Activities ta 3. Scroll down to the bottom where it says Installed integration event. Checkmark the box and then select the Salesforce Task Type as Othe It may take several minutes for the sync to begin, but once new Tour Engagement Data comes into HubSpot, that activity card on a contact record will sync to the Salesforce lead/contact record as a task.\ ​\ Every data point from the Engagement Data in HubSpot will sync to Salesforce. However, per HubSpot's guide, the data sync is *not* retroactive. Engagement Data will only sync to Salesforce for events occurring after the sync is turned on. Your Salesforce task will look like the below, matching the way it's listed in HubSpot.
🛑 Important Note: Turning on the Installed integration event sync to Salesforce may also begin syncing other integrations events depending on the integrations you have within HubSpot. Be mindful of this before turning it on as HubSpot doesn't provide a way to select specific integrations.\ ​\ Events like Zoom Webinar Registrations, for example, may also sync to Salesforce. (We use this sync feature and our sales team loves it for historical information in addition to the real-time Slack alerts! At the time of writing in May 2023, our team has not personally experienced an influx of other integration events syncing to Salesforce for the integrations we internally use like Zoom, Calendly, Salesloft, and Intercom) *Please reach out to HubSpot Support if you have specific inquiries related to your installed integrations outside of Tourial.* # HubSpot Reporting Setup In this guide, we’ll walk you through the process of setting up a dashboard in HubSpot to measure the impact of Tourial on your business. NOTE: Since every MAP/CRM setup is different, these instructions may not be 100% accurate based on the setup of your HubSpot instance. ## Step 1: Create a HubSpot List Before setting up reports, you’ll need to create a contact-based list that can be used as a foundation for your reporting. Here's how to create an active list in HubSpot: 1. Navigate to CRM 2. Create a New List 1. Go to the Lists tab and select Create List 2. Select Contacts-Based List and then Choose Active List 3. Name Your List 1. Something meaningful, such as Tourial Engagement by Contact 4. Click Next 5. Add Filters 1. Contact Properties - Tourial: Last Tourial Viewed is known – This ensures that only contacts who have engaged with a Tourial are included 1. AND 2. Contact Properties - Tourial: Last Session Date is less than 365 days ago (or whatever timeframe suits your needs) – This limits the contacts to recent activity. 1. AND 3. Contact Properties - Company Name does not contain \[YOUR COMPANY NAME] – This excludes internal contacts. 6. Edit Columns 1. To ensure you have the data needed for reporting, consider adding these columns and remove any unnecessary columns (this list is not exhaustive and can be customized based on your needs): * First Name * Last Name * Company Name * Tourial: Last Tourial Viewed * Tourial: Last Session Date * Lifecycle Stage * Tourial: All Tourials Viewed * Tourial: Total Sessions * Contact Owner ## Step 2: Create Reports in Hubspot Now that you have your list set up, it’s time to create the reports that will drive your dashboard. Below are several key reports that will allow you to track Tourial's impact. 1. Navigate to Reports 2. Click Create 3. Select Custom Report Builder 4. Select Choose my own data sources 1. (Data sources will vary by report and are broken down below) 5. ***Repeat this process for each new report*** ### Recommended Reports Follow these steps for creating the Tourial-recommended reporting for your organization. #### Report 1: Tourial Views by Lifecycle Stage This report shows how many contacts have viewed Tourials, broken down by lifecycle stage (e.g., Lead, MQL, SQL, Customer), and can be displayed by month, quarter, or another time period. 1. Select Data Sources: 1. Contacts (Primary) 2. Deals (Secondary) 2. Click Next 3. Configuration 1. Chart Type: Vertical Bar 2. X-Axis: Tourial: Last Session Date (broken down by month or your preferred timeframe) 3. Y-axis: Count of Contacts 4. Break Down By: Lifecycle Stage 4. Choose Filters 1. Contacts 1. Tourial: Last Session Date is less than 365 days ago (or any desired timeframe) 5. Save Report and choose if you’d like to add to a dashboard #### Report 2: Tourial-Influenced Pipeline This report shows the monetary impact of Tourial on your deals, broken down by the original source of the lead 1. Select Data Sources 1. Contacts (Primary) 2. Deals (Secondary) 2. Click Next 3. Configuration 1. Chart Type: Horizontal Bar 2. X-axis: Sum (Amount) 3. Y-axis: Deal Stage 4. Break Down By: Original Source (Contacts) 4. Choose Filters: 1. Contacts 1. Number of Associated Deals is greater than 0 2. List Membership is member of \[the active list created above] 2. Deals: 1. Deal Stage has been updated in the last 365 days (or desired timeframe) 2. Deal Stage is any of \[select your deal stages] 3. Filter Rules: 1. Include Data if it matches all of the filters above 5. Save Report and choose if you’d like to add to a dashboard #### Report 3: Most Recent Tour Engagement This report identifies which Tourials have been viewed most recently and by how many contacts, helping you understand which tours are actively engaging your audience. 1. Select Data Sources 1. Contacts (Primary) 2. Deals (Secondary) 2. Click Next 3. Configuration: 1. Chart Type: Vertical Bar 2. X-axis: Tourial: Last Tourial Viewed 3. Y-axis: Count of Contacts 4. Choose Filters: 1. Contacts 1. Tourial: Last Session Date is less than 365 days ago (or another timeframe) 2. Tourial: Last Tourial Viewed is known (or filter by specific Tourials you want to track) 2. Filter Rules 1. Include data if it matches all of the filters below 5. Save Report and choose if you’d like to add to a dashboard #### Report 4: Tourial Sessions by UTM Source/Medium This report tracks the total number of sessions for each UTM source and medium, helping you gauge the effectiveness of your marketing campaigns. 1. Select Data Sources 1. Contacts (Primary) 2. Deals (Secondary) 3. Web Activity (Secondary) 2. Click Next 3. Configuration: 1. Chart Type: Horizontal Bar 2. X-Axis: Sum (Tourial: Total Sessions) 3. Y-Axis: UTM Medium 4. Break Down By: UTM Source 4. Choose Filters 1. All Events 1. Event timestamp is less than 365 days ago (or any timeframe) 2. Contacts 1. Tourial: Last Tourial Viewed is known 2. utm\_source is known 3. Page Views: 1. UTM Source doesn’t contain any of \[No value] 2. UTM Medium doesn’t contain any of \[No value] 3. Filter Rules 1. (1 AND 2 AND 4) OR (1 AND 3 AND 4) 5. Save Report and choose if you’d like to add to a dashboard #### Report 5: Active Deals with Tourial Influence This report displays the total number of deals and the unique Tourials viewed at each deal stage, allowing you to see how Tourials are impacting your sales pipeline. 1. Select Data Sources: 1. Contacts (Primary) 2. Deals (Secondary) 2. Click Next 3. Configuration: 1. Chart Type: Combination 2. X-Axis: Deal Stage 3. Y-Axis: Count of Deals 4. Y-Axis 2: Sum (Tourial: Total Unique Tourials Viewed) 4. Choose Filters 1. All Events: 1. Event timestamp is less than 365 days ago (or any timeframe) 2. Deals: 1. Deal Stage is any of \[select deal stages] 3. Contacts: 1. Number of Associated Deals is greater than 0 4. Filter Rules: 1. Include data if it matches all of the filters below 5. Save Report and choose if you’d like to add to a dashboard #### Report 6: Lead Count by Tourials Viewed This report shows the total number of contacts who have viewed each specific Tourial. 1. Select Data Sources: 1. Contacts (Primary) 2. Deals (Secondary) 2. Click Next 3. Configuration: 1. Chart Type: Pie 2. Break Down By: Tourial: Last Tourial Viewed 3. Values: Count of Contacts 4. Choose Filters 1. All Events: 1. Event timestamp is less than 365 days ago (or any timeframe) 2. Contacts: 1. Tourial: Last Tourial Viewed is equal to any of \[specific tour names you want to track] 3. Filter Rules: 1. Include Data if it matches all of the filters below 5. Save Report and choose if you’d like to add to a dashboard ## Step 3: Add Reports to Your Dashboard Once you’ve created your reports, it’s time to add them to a HubSpot dashboard for easy tracking. 1. Go to Dashboards 1. Navigate to the Dashboards Panel in HubSpot 2. Create New Dashboard 1. Click Create Dashboard and give your dashboard a name like Tourial Engagement Dashboard. 3. Add Reports 1. Once the dashboard is created, click Add Report and select the reports you previously created. Arrange them on the dashboard according to your preferences. 4. Customize & Share 1. You can further customize the layout and design of your dashboard. Once satisfied, share it with your team or set up automated email reports. By following these steps, you can create a comprehensive dashboard in HubSpot to track the effectiveness of Tourial and measure its impact on your sales pipeline. Monitoring metrics like Tourial views, pipeline influence, and engagement by UTM source/medium will give you valuable insights into how Tourial contributes to your marketing and sales efforts, helping you make data-driven decisions and demonstrate ROI.
# TourPlayer Engagement Data Once you've completed the [setup of the HubSpot Integration](https://intercom.help/tourial/en/articles/5790702-setting-up-the-hubspot-integration), you'll start to see *Tourial Content engagement data* in your HubSpot account. This data will be visible in the contact record activity feed and you can use these properties to create lists, workflows, and reports.\ ​\ ​Tourial Content Engagement Data is sent to HubSpot via HubSpot Cookies. Once your account is connected to HubSpot, engagement activity will be recorded for any cookied visitor. See FAQs below for additional information.\ ​\ 🛑 Note - This engagement data is separate from your individual Tour engagement data. [For more info on Tourial Engagement Data, check out this article](https://tourial.gitbook.io/tourial-customer-product-documentation/integrations/hubspot/tour-engagement-data). ## Contact Record Activity Feed A timeline event is created each time a contact engages with Tourial Content. The following data is displayed: ### Engagement Data * Time Spent on Tourial Content (Seconds) * The total amount of time in seconds a visitor spent on a specific piece of Tourial Content (i.e. TourPlayer) during a single session * Total CTA Clicks * Count that refers to the number of external link clicks, form submissions, and scheduler opens throughout the Tourial * External Link Clicks * Count that refers to the number of external links clicked on * Forms Viewed * Count that refers to the number of forms that were viewed * Forms Submitted * Count that refers to the number of forms submitted ### Tourial Metadata * Tourial Content Name * Name of the Tourial as indicated in your Tourial account * Tourial Content URL * The shareable URL for Tourial Content (i.e. TourPlayer) * Tourial ID * ID of the Tourial Content from the Tourial database * Session ID * ID of the session from the Tourial database * Visitor ID * ID of the visitor from the Tourial database * Date Viewed * Date the Tourial Content was viewed * utm\_source * utm\_medium * utm\_campaign [![](https://downloads.intercomcdn.com/i/o/761864298/82402dd87f5207c36d87e366/image.png)](https://downloads.intercomcdn.com/i/o/761864298/82402dd87f5207c36d87e366/image.png) Not seeing any data in the activity feed? Make sure you've selected Tourial in the activity filter, under the Integrations section: [![](https://downloads.intercomcdn.com/i/o/761866104/63f421b08b492584943d2778/image.png)](https://downloads.intercomcdn.com/i/o/761866104/63f421b08b492584943d2778/image.png) \ Lists and Workflows ------------------------------------------------------------------ When creating a list or setting up a workflow, you'll have access to the above Tourial Content engagement data.\ ​\ When adding a filter, first type "Tourial" and select Tourial: Tourial Content Timeline Event Properties. Then you'll see the full list of Engagement data points to select. [![](https://downloads.intercomcdn.com/i/o/761874097/c829c3cee6a2305ad6cc8b93/image.png)](https://downloads.intercomcdn.com/i/o/761874097/c829c3cee6a2305ad6cc8b93/image.png) #### Available properties to filter on: * Occurred * Tourial Content: Date Viewed - *Date the Tourial Content was viewed* * Tourial Content: First Session Date - *Date a contact first interacted with Tourial Content* * Tourial Content: ID - *ID of the Tourial from the Tourial database* * Tourial Content: Last Session Date - *Date a contact last interacted with Tourial Content* * Tourial Content: Name - *Name of the Tourial Content from your Tourial account* * Tourial Content: Session ID - *ID of the session from the Tourial database* * Tourial Content: Total CTA Clicks - *Total number of external link clicks, form submissions, and scheduler opens on that Tourial Content* * Tourial Content: Total Events Scheduled - *Total number of events scheduled via scheduler integration* * Tourial Content: Total External Links Clicked * Tourial Content: Total Forms Submitted - *Number of forms submitted* * Tourial Content: Total Forms Viewed - *Number of forms viewed (even if not submitted)* * Tourial Content: Total Seconds - *Total time in seconds spent on Tourial Content* * Tourial Content: Total Sessions - Total number of sessions that contact has had across all Tourials * Tourial Content: URL - *The unique URL for a Tourial which can be used to pull data on a specific Tourial* * Tourial Content: Visitor ID - *ID of the visitor from the Tourial database* * utm\_source * utm\_medium * utm\_campaign *** ## FAQs 1. How is Hubspot identifying the "known" contacts on ungated tours? 1. We use HubSpot cookies. So if the cookie has been identified, then it's a known contact, otherwise, the data is still tracked to that cookie for if/when that cookie becomes identified in the future. Typically the process for converting an anonymous visitor to a known lead is through a form. Form submissions attach the HubSpot cookie to associate the cookie with the visitor. 2. Can HubSpot forget a cookied visitor? 1. This is dependent on the user's browser. If someone clears their cookies they are no longer known until they identify themselves again. 3. Can we set up an automation to gate a Tourial only when a contact is unknown? (i.e. - keep them ungated for known contacts and gated for unknown) 1. Not at this time. 4. If a website visitor declines cookies, will they still be known in HubSpot? 1. If there is no HubSpot cookie, they cannot be tracked, so Tourial Engagement Data would not be sent to HubSpot. 5. How often is Tourial Content Engagement Data sent to HubSpot? 1. We send the data to Hubspot with every session. There are a lot of options for your to filter, create lists, or build workflows in Hubspot based on Engagement Data. 6. Is Engagement Data retroactive for visitors that aren't currently in our HubSpot database? 1. Activity does retroactively update a contact record if they were cookied and interacted with a tour prior to becoming identified. \ Say someone isn't known in HubSpot, but they're cookied and view a tour. Three days later they convert through a form submission and become a contact in HubSpot. The Tourial Engagement Data captured earlier will be visible on that contact record. If you have any questions about the engagement data sent to HubSpot, feel free to chat with us using the chat feature in the lower right corner, or email . # Lead Forms with HubSpot 👉 [Take a Tour before Getting Started](https://websitetours.tourial.com/pages/hubspot-forms)👈 For this, you will need to have a HubSpot form created already to map your Navless form leads into your account. It can be a custom form dedicated to Navless (ie. Navless - HubSpot Form) or one you're already using (ie. Book a Demo) If you're not sure how to create a HubSpot form, check out [this HubSpot Article](https://knowledge.hubspot.com/forms/create-forms). 1\. In the Navless studio, select Content Management -> Forms, then Create New Form
2\. Select the HubSpot Intergration, then the form you want to pull in. NOTE: if you don't see the form you want on the list, check out the [FAQs](#h_008d5a9175) below.
4\. Configure your form fields, then click Next.
If you have hidden UTM fields in your form, you'll be able to map these as well. Select Hidden from the dropdown and then pick the corresponding UTM parameter *Note: Make sure the number of fields in your Navless form matches the fields in your HubSpot form, otherwise you'll potentially send empty data or the integration will fail.* 7\. Configure the form's content, then click Next.
8\. Finalize the form's settings, then click Create Form.
### Success! 🎉 Confirm the connection by sending a test lead through the form to make sure it goes through to your HubSpot account! *** ## FAQs 1. We have our HubSpot form set to block free email providers. How do I set that in our Navless form as well? 1. *On the email field, be sure to select "Email (non-generic)" from the Field Type dropdown menu. This uses the same list of blocked providers as HubSpot. There won't be an error message, however, so we suggest naming that field something like "Work Email" or "Business Email" so it's clear.* 2. Do UTMs pass through the Navless form to HubSpot if Navless content is embedded on a page that has UTMs appended to the page URL? 1. Yes, UTMs are passed down from the parent page to the embedded Navless content *if* you are using our embed code and not something custom. 3. Will forms auto-populate data if a contact is known in our HubSpot database? 1. No, Navless forms do not currently reference HubSpot databases to auto-populate a form. For example, if you have a short gate to access your Tour and then a separate demo form at the end or in the nav, that second form will not auto-populate the person's details from the first form. 4. Why isn't my form showing up in the list? 1. Hubspot doesn't allow us to submit to forms that have CAPTCHA turned on. You have to turn CAPTCHA OFF on the form, but you can enable CAPTCHA on the form within Navless. See screenshot below for where to turn off CAPTCHA in HubSpot

# How do I hide the chatbot? To hide the HubSpot chatbot, head over to your chat setting, and go to the Target tab. From there you can select the URLs/Domains you want it hidden on.
# How do I hide the Cookie Banner? Please review [this HubSpot Knowledge Base article](https://knowledge.hubspot.com/privacy-and-consent/customize-your-cookie-tracking-settings-and-consent-banner#:~:text=click%C2%A0Save.-,Manage%20cookies%20on%20certain%20pages,-You%20can%20deactivate) for directions on how to remove the cookie banner from your tours. Example: if your tours live on tours.acme.com, then you will add tours.acme.com to the cookie deactivation panel. # FAQs Here are some frequently asked questions about Tourial's Hubspot Integration ## Lead Form FAQs 1. We have our HubSpot form set to block free email providers. How do I set that in our Tourial form as well? * On the email field, be sure to select "Email (non-generic)" from the Field Type dropdown menu. This uses the same list of blocked providers as HubSpot. There won't be an error message, however, so we suggest naming that field something like "Work Email" or "Business Email" so it's clear. 2. Do UTMs pass through the Tourial form to HubSpot if a Tour is embedded on a page that has UTMs appended to the page URL? * Yes, UTMs are passed down from the parent page to the embedded Tour *if* you are using our Tourial embed code and not something custom. 3. Will forms auto-populate data if a contact is known in our HubSpot database? * No, Tourial forms do not currently reference HubSpot databases to auto-populate a form. For example, if you have a short gate to access your Tour and then a separate demo form at the end or in the nav, that second form will not auto-populate the person's details from the first form. 4. Why isn't my Hubspot form showing up in the pick-list when pulling in via the integration? * Hubspot doesn't allow us to submit to forms that have CAPTCHA turned on. You have to turn CAPTCHA OFF on the form, but you can enable CAPTCHA on the form within Tourial. See screenshot below for where to turn off CAPTCHA in HubSpot 5. Why are HubSpot form submissions showing up as "unidentified form"? * A HubSpot form submitted through a tour may show up as "unidentified form" in HubSpot because the submission is being sent through the Tourial servers to HubSpot via an API, rather than directly to HubSpot. Because they are not direct submissions, such as a submission from a HubSpot form embedded on a webpage, they are considered "non-HubSpot forms" and labeled as "unidentified". This is a known occurrence within HubSpot. You can work around this by disabling "non-HS form submissions" within your HubSpot form settings. Doing so will prevent the Tourial-submitted HubSpot forms from coming through as unidentified. Please note, this is a universal setting. If you have other non-HubSpot forms that feed into HubSpot (e.g. Jotform, Google Form, etc), those submissions will be disabled . If the only non-HubSpot forms you are using are the ones in your tours, turning this setting off will prevent those lead submissions from being categorized as having come from an unidentified form. ## **Engagement Data FAQs** 1. How is Hubspot identifying the "known" contacts on ungated tours? * We use HubSpot cookies. So if the cookie has been identified, then it's a known contact, otherwise, the data is still tracked to that cookie for if/when that cookie becomes identified in the future. Typically the process for converting an anonymous visitor to a known lead is through a form. Form submissions attach the HubSpot cookie to associate the cookie with the visitor. 2. Can HubSpot forget a cookied visitor? * This is dependent on the user's browser. If someone clears their cookies they are no longer known until they identify themselves again. 3. Can we set up an automation to gate a Tourial only when a contact is unknown? (i.e. - keep them ungated for known contacts and gated for unknown) * Not at this time. 4. If a website visitor declines cookies, will they still be known in HubSpot? * If there is no HubSpot cookie, they cannot be tracked, so Tourial Engagement Data would not be sent to HubSpot. 5. How often is Tourial Engagement Data sent to HubSpot? * We send the data to Hubspot with every session. There are a lot of options for your to filter, create lists, or build workflows in Hubspot based on Engagement Data. 6. Is Engagement Data retroactive for visitors that aren't currently in our HubSpot database? * Activity does retroactively update a contact record if they were cookied and interacted with a tour prior to becoming identified. Say someone isn't known in HubSpot, but they're cookied and view a tour. Three days later they convert through a form submission and become a contact in HubSpot. The Tourial Engagement Data captured earlier will be visible on that contact record. 7. How does the Tourial <> HubSpot form integration work? * First, you create a HubSpot form for your tour (this could be an existing form or a new one specific to your tours). Then, in the Tourial builder, after selecting Forms, you'll connect your HubSpot form to Tourial and your form fields will import. 8. So then Tourial has the ability to capture PII Information? * PII is Personal Identifiable Information – we only store PII for customers that create tours within the builder (because you create a Tourial account). As far as any lead data collected through a form in a tour, we collect this info and pass it to HubSpot, and then HubSpot stores it. But, we do not store that information. # Marketo There are 2 Core Integrations with Tourial and Marketo 1. Lead Forms 2. Engagement Data For either, you'll need to begin by setting up the connection between Tourial and Marketo 🚨 IMPORTANT NOTE: Be sure you have your Marketo tracking script added to your website so that visitor tour engagement can be linked to any website forms outside your tour. ## Tourial & Marketo Set up: ### Step 1: Connect your Marketo account to Tourial From your [integrations page](https://app.tourial.com/integrations), select Integrations in the left menu and then click Connect to begin the authentication process and connect your Marketo account to Tourial.
### Step 2: Complete the authentication process 1. Within Marketo, we recommend creating a new User Role (if one does not already exist) with Access API permissions.
*Note: We also recommend check-marking "Access Admin" so that the new Custom Activity for tourialView is auto-approved. However, this is not required, you'll just need to manually approve the new custom activity in Marketo. See Part 6 in this section.*
2. Then create a new user (ex: Tutorial Bot) assigned with the new User Role.
3. Navigate to LaunchPoint and create a New Service with Type: Custom.
4. Acquire the Client ID and Client Secret to complete the authentication process.
5. Close the Details dialog box, select Web Services, and then find and enter the Rest URL and Identity URL. Click Submit to finish authenticating.
6. If you did not add Access Admin to the User Role permissions above, follow this to approve the Tourial Custom Activity.\ ​ 1. In Admin, select Custom Activities in the left side menu or main screen.
2. On the right-hand side, select Tourial View. Then, with that selected, click the Custom Activity Actions dropdown and select Approve Activity.
### Step 3: Turn on Engagement Activity Once you've successfully connected your Marketo account, you'll be redirected back to the Integrations page in the Tourial app. Now, click Manage Integration >> Settings to get to the [Marketo settings page](https://app.tourial.com/integrations/marketo). In the section labeled Engagement Activity, you'll see a dropdown menu to turn Engagement Activity on or off. To ensure Tourial engagement data is captured and sent to Marketo, select Engagement Activity and Content Engagement Activity ON. This must be done before engagement activity can send to Marketo.
Once you're all set up, check out this [Marketo Engagement Tour ](https://websitetours.tourial.com/pages/marketo-integration)to see some of the ways you can use Tourial Engagement Data to create Smart Lists, Flows and more! ### Step 4: Choose your white-label subdomain and add it to Domain Setup in Tourial 🛑 You must be an admin in your account to complete this step. To use the Marketo Engagement Integration, you'll need to serve your Tourials from your own domain rather than the Tourial domain. First, create a new subdomain from which to serve the Tourial such as *tourial.yourcompany.com*. This subdomain can only be used for your Tourials and should not be used for anything else. *Note: Visitors will not interact with the subdomain itself; creating it simply allows you to serve the tour from your domain rather than Tourial's domain.* In the Tourial app, click on the user icon in the upper right-hand corner of your screen and head to Domain Setup.
Once there, you'll see a field where you can enter your subdomain; note that you do not need to include "https\://" or "[www](http://www/)."
Note: Your CNAME record will point to \[youraccount].tourialdns.com *** ## Setup with your Domain Provider ### Step 4: Configure the DNS Once you've determined a subdomain, you'll need to access your domain provider and point the CNAME record for the subdomain to *\[youraccountname].tourialdns.com*. Setting up a CNAME record works a little differently depending on your hosting provider (GoDaddy, HostGator, etc.). Below are guides for some common providers: * [Add a CNAME record in GoDaddy](https://www.godaddy.com/help/edit-a-cname-record-19237) * [Edit a CNAME record in HostGator](https://www.hostgator.com/help/article/how-to-change-dns-zones-mx-cname-and-a-records) * [Updating CNAME in Domain.com](https://www.domain.com/help/article/dns-management-how-to-update-cname-aliases) * [Set up a CNAME record in NameCheap](https://help.talentlms.com/hc/en-us/articles/360014574034-How-to-set-up-your-CNAME-with-NameCheap) * [Add new DNS record in BlueHost](https://www.bluehost.com/help/article/dns-management-add-edit-or-delete-dns-entries#add) * [Create a CNAME record in Google Domains](https://support.google.com/domains/answer/3290350?visit_id=638149334548346772-982645537\&rd=1) If you need assistance setting up a CNAME record and pointing it to Tourial, please reach out to your Customer Success Manager or [submit a ticket here](https://share.hsforms.com/1tVKimHjXRNaxptrIdM5dcg4fcqx?__hstc=13798952.085d481b15c81001b0477390e26679ba.1702654969030.1702660925539.1702666293281.3&__hssc=13798952.3.1702666293281&__hsfp=2323863570). ### Step 5: Make sure the Tourial on your website is using the white-label domain After you've configured the DNS, update your [embed code](/sharing/embed-codes/embedding-interactive-demos) to ensure the Tourial properly loads from the new subdomain. *** What's next? Check out the [Tourial engagement data visible in Marketo](/integrations/map-crm-integrations/marketo/engagement-data-with-marketo)!\ ​\ See how to [connect your Marketo form to Tourial](/integrations/map-crm-integrations/marketo/lead-forms-with-marketo) for easy lead capture. Learn how to [send Slack notifications from Marketo](https://tourial.gitbook.io/tourial-customer-product-documentation/integrations/marketo/engagement-data-with-marketo/slack-notifications-with-marketo). This way, your team can get real-time alerts when someone engages with your tours or submits a form! # Lead Forms with Marketo 👉 [Take a Tour before Getting Started](https://websitetours.tourial.com/pages/marketo-forms)👈 For this, you will need to have a Marketo form created already to map your Tourial form leads into your account. It can be a custom form dedicated to Tourial (ie. Tourial - Marketo Form) or one you're already using (ie. Book a Demo). 1\. In the Tourial studio, select Forms, then Create a new form ![](/files/UXtvcTYp5FH1nb2kopNs) 2\. At the top, add a form name 3\. Below, there are several options to add or edit fields, and style your form. First, click Content to connect your Marketo form [![](/files/G21lfBeqrdfRlzGnoBjf)](https://downloads.intercomcdn.com/i/o/604393845/5542bf766b33e63ab6eba175/tourial-new-form-setup.png) 4\. You can add a headline and description text. Select Integration, then Import field 5\. Choose Marketo for the integration and select a form, then Import Field If you have hidden UTM fields in your form, you'll be able to map these as well. Those fields will be marked Hidden, and then you just need to select the corresponding UTM paramete *Note: Make sure the number of fields in your Tourial form matches the fields in your Marketo form, otherwise you'll potentially send empty data or the integration will fail.* 6\. Style your form as you wish by using the remaining form settings 7\. If you choose to show the confirmation modal, you can edit and style it under the Confirmation tab
8\. Save your form ### Success! 🎉 Confirm the connection by sending a test lead through the form to make sure it goes through to your Marketo account! *** What's next? Learn how to [send Slack notifications from Marketo](https://tourial.gitbook.io/tourial-customer-product-documentation/integrations/marketo/engagement-data-with-marketo/slack-notifications-with-marketo). This way, your team can get real-time alerts when someone engages with your tours or submits a form! Also, take the [Marketo Engagement Tour](https://websitetours.tourial.com/pages/marketo-integration) to see some of the ways you can use Tourial Engagement Data to create Smart Lists, Flows and influence your lead scoring model. # Engagement Data with Marketo 👉 [Take a Tour before Getting Started](https://websitetours.tourial.com/pages/marketo-integration)👈 Once you've completed the [setup of the Marketo Integration](https://tourial.gitbook.io/tourial-customer-product-documentation/integrations/marketo), you'll start to see Tourial engagement data populating in your Marketo account. This data will be visible in the lead or person record activity log, and you'll also be able to create lists and workflows based on a person's engagement with your Tourials. ## Person Record Activity Log A 'Custom Activity' is created each time a person engages with one of your Tourials. You can view those custom activities under the Activity Log. Clicking into the activity itself, you'll be able to see the following data:
### Engagement Data * Time Spent on Tourial * The total amount of time in seconds the visitor spent on the Tourial during that particular session * Total Clicks * Count that refers to the total number of clicks throughout the Tourial * Total CTA Clicks * Count that refers to the number of external link clicks, number of forms viewed, and schedulers opened throughout the Tourial * External Link Clicks * Count that refers to the number of external links clicked on across the Tourial * Total Forms Submitted * Count that refers to the number of forms submitted ### Tourial Metadata * Tourial Name * Name of the Tourial as indicated in your Tourial account * Tourial URL * The shareable URL for the Tourial * Tourial ID * ID of the Tourial from the Tourial database * Session ID * ID of the session from the Tourial database * Visitor ID * ID of the visitor from the Tourial database * Date Viewed * Date the Tourial was viewed * utm\_medium * utm\_source * utm\_campaig ## Lists and Workflows When creating a Smart List or setting up a workflow, you'll have access to the following Tourial engagement data when you Add Constraints. Note that all Tourial data is prefaced with *Tourial*. * Tourial URL - The unique URL for a Tourial which can be used to pull data on a specific Tourial * Tourial Total Seconds - Total time in seconds the contact has spent on a specific Tourial * Total Clicks - Count referring to the total number of any type of click throughout a Tourial * Total CTA Clicks - Number of external link clicks, number of forms viewed, and schedulers opened throughout the Tourial * Total External Links Clicked - Number of clicks on any external link in a Tourial * Total Forms Submitted - Total number of forms submitted in a Tourial * Date Viewed - Date field for when the Tourial was viewed * All Viewed Tourial Names - String field that can be used to search by Tourial name * Total Unique Tourials Viewed - Total number of unique Tourials viewed * Total Sessions - Total number of sessions that contact has had across all Tourials * Last Session Date - Date field that can be used to search by a contact's most recent session on any Tourial * Total Seconds on all Tourials - Total time in seconds the contact has spent on all Tourials * Visitor ID - ID of the visitor from the Tourial database * Session ID - ID of the session from the Tourial database ### Adding Constraints to a Smart List 1. First add the Viewed Tourial filter to your Smart List in the right-side panel. You can select additional filters using Tourial Name and specifying a single Tourial. To add additional constraints, click on Add Constraints.
2. From there, you can select various constraints based on the Tourial engagement data captured ## Tourial Engagement Data Use Cases for Marketo When a buyer decides to engage with a Tourial, they're showing they have a high level of buying intent and that they are actively in a decision-making position. Being able to tie buyer engagement data to specific Person (lead) Records in Marketo allows you to leverage that information to create value in 3 ways: Lead Intelligence for Sales 1. Automatically notify your sales team when buyers interact with your Tourials (both for net new leads and leads already assigned to specific reps). 2. Automatically add buyer engagement data to Salesforce to better visualize each prospect’s journey. High Intent Identification & Attribution for Marketing 1. Identify high-intent leads, group them in Marketo and create targeted campaigns that promise higher conversion rates. 2. They can understand the effect their tours have on their buyer’s journey, answering questions such as: 1. Are people viewing Tours and then converting? 2. Are they converting and then viewing more Tours? Real-time alerts via Slack or email With engagement data from Tourial living inside Marketo (and tied to Person Records), you can automate Slack or email notifications customized to alert based on engagement triggers. Examples: * Anytime a buyer starts a tour session * When a buyer interacts with a Tour for more than a specific amount of time * Anytime a buyer completes a full Tour (or completes a specific % of a Tour) If you have any questions about the engagement data sent to Marketo, feel free to chat with us using the chat bot in the bottom right of your screen, or email . # Slack Notifications with Marketo The Marketo Slack integration uses webhooks from Marketo that are then sent to Slack containing the message to be shared in a direct message or a channel. There are three main parts: creating an app in Slack, creating the Webhook in Marketo, and then building a workflow in Marketo. ## Part 1 - Creating an App in Slack for Marketo 1. Navigating to the [Apps section](https://api.slack.com/apps) of the Slack API center 2. Click “Create an App”
3. Click “From scratch” 4. Enter “Marketo” for the App Name 5. Select your Slack workspace to integrate with Marketo 6. Click “Create App” 7. Click on “Incoming Webhooks” on the follow-up screen or under “Features” in the left-hand navigation tree 8. Toggle on “Activate Incoming Webhooks”
9. Click on “Add New Webhook to Workspace” 10. Select the Slack channel or individual you would like to send notifications to 11. Click “Allow”
12. Copy the “Webhook URL” that appears for this channel/person You will need this “Webhook URL” later on in Marketo when setting up the destination for the webhook.
## Part 2 - Creating a Webhook in Marketo 1. Navigate to the Admin section in Marketo. 2. Click on “Webhooks” under the “Integration” section in the navigation tree on the left-hand side.
3. Click on “New Webhook” at the top of the screen. 4. Name your webhook using the “Webhook Name” field. 5. Enter an optional description if you desire. 6. Paste the “Webhook URL” that you copied from the Slack App in the previous section. 7. Leave the “Request Type” as “Post”. 8. What you put in the “Template” (Payload Template) field will depend on the message you are trying to send to Slack. 1. You can select default Marketo Tokens using the Insert Token button. 2. To send Tourial Enagement Data, you can use Trigger Tokens. See additional details on Trigger Tokens and templates you can copy below. 9. Leave the “Request Token Encoding” field as “None”. 10. Leave the “Response type” field as “None”.
Sample Slack notification 👇\ ​
### Trigger Tokens for Tourial Engagement Data Adding Trigger Tokens is simple, they just need to be included within the “Payload Template” when configuring the webhook. Trigger Name: `{{trigger.Trigger Name}}` Name: `{{trigger.Name}}` Tourial Name: `{{trigger.Tourial Name}}` Total time spent: `{{trigger.Tourial Total Seconds}}` Tourial URL: `{{trigger.Tourial URL}}` Total time spent: `{{trigger.Tourial Total CTA Clicks}}` External links clicked: `{{trigger.Tourial Total External Links Clicked}}` Lead Link MKTO: [https://app-sj36.marketo.com/leadDatabase/loadLeadDetail?leadId={{Lead.Id}}](https://app-sj36.marketo.com/leadDatabase/loadLeadDetail?leadId=%5Cn) 🛑 *Note - replace sj36 in the URL for Lead Link above with your Data Center ID. Find it in Marketo URL after opening a Person Record, or go to Admin > My Account > Scroll to Support Info > Data Center.* To use the message setup from the Sample notification, copy and paste this Payload Template below. Then, update the text and/or tokens. Don't forget to update the Lead Link MKTO URL with your Data Center ID. \ Copy and paste this into the Payload Template field: ``` { "text": "\n\nYour contact engaged with a Tour!\n\n Email: {{lead.Email Address:default=none}}\n Trigger Name: {{trigger.Trigger Name}}\n Tour Name: {{trigger.Name}}\n Time Spent (sec): {{trigger.Tourial Total Seconds}}\n Lead Record: https://app-sj36.marketo.com/leadDatabase/loadLeadDetail?leadId={{Lead.Id}}" } ``` ## Part 3 - Building Interesting Moments in Marketo Once you've setup the Webhook, you can create Interesting Moments using a Smart List and Flow to tell Marketo to listen for a trigger and then send a Slack notification. 1. Select Marketing Activities and select the folder you want to build the workflow in. In our example below, we're building it under Interesting Moments.
2. Click on Smart List and then add the Views Tourial trigger from the righthand panel.
3. From here, use the dropdown menu to determine whether you want to pull all Tourials viewed (in which you could use Tourial Name: *is not empty*), or include and exclude specific Tourials based on the name. \ Select Add Constraints to choose additional Tourial Engagement Data criteria.
4. With your Smart List triggers done, move over to Flow. This is where you add the actions you want to happen when a trigger occurs. 5. Select Add Webhook in the righthand panel and then click the Slack Webhook you just created. \ ​*Tip: Use Tourial Engagement Data to influence your lead scoring model. More engagement, longer sessions, multiple views... these all indicate higher buyer intent!*
6. Under Schedule, be sure to edit the Qualification Rules if you want people to be able to enter this flow more than once.
And that's it! Once you've set up one webhook, you can set up multiple for different Tourial Engagement parameters, or a separate one for when someone submits a form within your product tour. Like this one!
Feel free to copy and paste this payload template too 😎 ``` { "text": "\n\nNew Tourial Form Submission!\n\n Email: {{lead.Email Address:default=none}}\n Trigger Name: {{trigger.Trigger Name}}\n Name: {{trigger.Name}}\n Company: {{company.Company Name:default=none}}\n Lead Record: https://app-sj36.marketo.com/leadDatabase/loadLeadDetail?leadId={{Lead.Id}}" } ``` # Approving Marketo Custom Activities **Why is this important?** Marketo follows an approval process for all changes made within the Marketo Instance. The Tourial application submits a request to your marketo instance for Custom Activities to be added, a Markeo admin must go in and approve those activitie(s) before they can be utilized. ### Step 1: Review & Approve updates in Marketo 1\. In Admin, select Custom Activities in the left side menu or main screen.
2\. On the right-hand side, you should see TWO Tourial-specific custom activities named Tourial Content View and Tourial View. *NOTE: Tourial Content View is specific to Tour Centers and Tourial View is specific to individual tours.* Let's start by selecting the custom activity named Tourial Content View. Then, with that selected, click the Custom Activity Actions dropdown and select Approve Activity.
3\. Next, select the custom activity named Tourial View and repeat the same approval steps as the Tourial Content View activity . \ ​*\*\*Please note: some customers may not need to re-approve the Tourial View custom activity. If the Tourial View custom activity is not showing an approval is needed (State: Approval with Draft), then no action is required.\*\**
*** ### Step 2: Re-enable Engagement Activity in Tourial One more step! Once you've successfully re-approved the Custom Activities in Marketo, you'll need to go to the [Marketo settings page](https://app.tourial.com/integrations/marketo) inside the Tourial app and re-enable Engagement Activities for Marketo. \*\*This must be done before engagement activity can begin sending again to Marketo.
You're all set! If you have any questions, concerns, or need assistance related to these updates, please contact your Customer Success Manager. # Marketo Reporting Setup This guide will help you set up a Marketo dashboard that allows you to track and measure the impact of Tourial on your business NOTE: Since every MAP/CRM setup is different, these instructions may not be 100% accurate based on the setup of your Marketo instance. *** ## Step 1: Create a Marketo Smart List Before you start building your reports, you’ll need to create a Smart List in Marketo to segment your contacts based on Tourial engagement. Here’s how to set up the list: 1. Navigate to the Lead Database\ In Marketo, go to the Lead Database. 2. Create a New Smart List 1. Go to the Smart Lists tab and click on New Smart List. 2. Choose Lead-Based Smart List. 3. Name Your List\ Name the list something meaningful, like Tourial Engagement by Contact. 4. Add Filters\ Set up filters to track contacts who have interacted with your Tourials: 1. Tourial: Last Tourial Viewed is known – This ensures only contacts who have viewed a Tourial are included. 2. Company Name is not any of \[YOUR COMPANY NAME] – This excludes internal employees or non-relevant data. 3. Tourial: Last Session Date is within \[timeframe] – For example, within the last 365 days (or 180, 90, 60 days, depending on your needs). 4. Lead Lifecycle Stage – Filter by lifecycle stages that are important to you (e.g., Lead, MQL, SQL). *** ## Step 2: Create Reports in Marketo Once you've created your Smart List, the next step is to build reports that will provide insight into Tourial's impact on your leads and sales pipeline. Below are several essential reports you can create in Marketo to track Tourial's effectiveness. ### Report 1: Tourial Views by Lifecycle Stage **Goal:** This report displays how many contacts have viewed Tourials, segmented by lifecycle stage, for a given time period (e.g., month-over-month or custom frequency). 1. Data Sources: 1. Leads 2. Opportunities (if using opportunity data) 2. Configuration: 1. Chart Type: Vertical Bar 2. X-axis: Tourial: Last Session Date (broken down by the desired timeframe, like monthly) 3. Y-axis: Count of Leads 4. Break Down By: Lifecycle Stage 3. Filters: 1. Leads: Tourial: Last Session Date is within the last 365 days (or your chosen timeframe) 2. Leads: Is member of \[active list created above] 3. Filter rules: Include data if it matches "ALL of the filters below." *** ### Report 2: Tourial Influenced Pipeline Report **Goal:** This report measures the dollar value of deals influenced by Tourial, broken down by the original source of the lead (e.g., Organic, Paid Search, Referral). 1. Data Sources: 1. Leads 2. Opportunities 2. Configuration: 1. Chart Type: Horizontal Bar 2. X-axis: Sum of Opportunity Amount 3. Y-axis: Opportunity Stage 4. Break Down By: Original Source (e.g., Organic, Referral, Paid Search) 3. Filters: 1. Leads: Number of Associated Opportunities is greater than 0 2. Leads: Is member of \[active list] 3. Opportunities: Opportunity Stage has been updated within the last 365 days (or your chosen timeframe) 4. Opportunities: Opportunity Stage is any of \[selected stages] 5. Filter rules: Include data if it matches "ALL of the filters below." *** ### Report 3: Most Recent Tour Engagement **Goal:** This report shows which specific Tourials have been viewed most recently and how many contacts engaged with each one. 1. Data Sources: 1. Leads 2. Opportunities 2. Configuration: 1. Chart Type: Vertical Bar 2. X-axis: Tourial: Last Tourial Viewed 3. Y-axis: Count of Leads 3. Filters: 1. Leads: Tourial: Last Session Date is within the last 365 days (or your preferred timeframe) 2. Leads: Tourial: Last Tourial Viewed is known (or filter by specific Tourials you want to focus on) 3. Filter rules: Include data if it matches "ALL of the filters below." *** ### Report 4: Tourial Sessions by UTM Source/Medium **Goal:** This report tracks the total number of Tourial sessions based on UTM parameters (UTM Source and UTM Medium), helping you measure the effectiveness of your campaigns. 1. Data Sources: 1. Leads 2. Opportunities 3. Web Activity 2. Configuration: 1. Chart Type: Horizontal Bar 2. X-axis: Sum of Tourial Sessions 3. Y-axis: UTM Medium 4. Break Down By: UTM Source 3. Filters: 1. All Events: Event timestamp is within the last 365 days (or desired timeframe) 2. Leads: Tourial: Last Tourial Viewed is known 3. Page Views: UTM Source doesn’t contain any of \[No value] 4. Leads: UTM Source is known 5. Page Views: UTM Medium doesn’t contain any of \[No value] 6. Filter rules: (1 AND 2 AND 4) OR (1 AND 3 AND 4). *** ### Report 5: Active Deals with Tourial Influence **Goal:** This report shows the total number of deals and the number of unique Tourials viewed at each deal stage, helping you understand Tourial's impact on your pipeline. 1. Data Sources: 1. Leads 2. Opportunities 2. Configuration: 1. Chart Type: Combination (Bar for Deals and Line for Unique Tourials Viewed) 2. X-axis: Opportunity Stage 3. Y-axis 1: Count of Opportunities 4. Y-axis 2: Sum of Tourial: Total Unique Tourials Viewed 3. Filters: 1. All Events: Event timestamp is within the last 365 days (or preferred timeframe) 2. Opportunities: Opportunity Stage is any of \[selected deal stages] 3. Leads: Number of Associated Opportunities is greater than 0 4. Filter rules: Include data if it matches "ALL of the filters below." *** ### Report 6: Lead Count by Tourial Viewed **Goal:** This report shows how many contacts have viewed each specific Tourial, providing insight into which assets are driving the most engagement. 1. Data Sources: 1. Leads 2. Opportunities 2. Configuration: 1. Chart Type: Pie 2. Break Down By: Tourial: Last Tourial Viewed 3. Values: Count of Leads 3. Filters: 1. All Events: Event timestamp is within the last 365 days (or preferred timeframe) 2. Leads: Tourial: Last Tourial Viewed is equal to any of \[specific Tourial names you want to focus on] 3. Filter rules: Include data if it matches "ALL of the filters below." *** ## Step 3: Add Reports to Your Marketo Dashboard Once you’ve created your reports, it’s time to add them to a Marketo dashboard for easy monitoring and analysis. 1. **Go to the Analytics Section**\ In Marketo, navigate to the **Analytics** area. 2. **Create a New Dashboard**\ Click on New Dashboard and give it a name, such as **Tourial Impact Dashboard.** 3. **Add Reports to Your Dashboard**\ After creating the dashboard, click **Add Report** and choose the reports you’ve just created. Arrange them in a layout that best suits your needs. 4. **Customize and Share**\ Once your dashboard is set up, you can further customize its appearance. Share it with your team or set up automated email reports so everyone stays aligned on Tourial's impact. *** ## Conclusion By following these steps, you’ll be able to set up a powerful dashboard in Marketo that helps you measure the effectiveness of Tourial in your marketing and sales processes. Monitoring key metrics like Tourial views, pipeline influence, and UTM performance will provide valuable insights into how Tourial is contributing to your business and help you make data-driven decisions. If you have any questions or need further support, feel free to reach out to our team!
# Pardot There are 2 Core Integrations with Tourial and Pardot: 1. Lead Forms 2. Engagement Data For both of these you will need to begin by setting up the connection between Tourial and Pardot. ## Connecting Tourial and Pardot 👉 [Take a Tour before Getting Started](https://websitetours.tourial.com/pages/pardot-forms/d7fe724b)👈 ## Setup in the Tourial App ### Step 1: Connect your Pardot account to Tourial From your [integrations page](https://app.tourial.com/integrations), click Connect to begin the authentication process and connect your Pardot account to Tourial. ![](/files/SPsdl08a1wF0F0eXRAAm) Then enter your Pardot Business Unit ID
You can find it by following the instructions below: 1. Log into Salesforce using the same account you use to log into Pardot. 2. Click on the Setup tab. 3. Find the Pardot dropdown and click Pardot Account Setup Once submitted, you'll be asked to sign into SFDC (Pardot) account to finish the authentication process ### Step 2: Create a Marketing App Extension Before turning on Engagement Data in Tourial, you'll need to [create a Marketing App Extension](https://help.salesforce.com/s/articleView?id=sf.pardot_external_activity_create.htm\&type=5) with the following parameters: * Extension Name: Tourial * Extension type/API Name: TourialView 🛑 Note that these parameters are case-sensitive and need to be entered in exactly as shown or the integration will fail. Please make sure that you’ve entered these parameters exactly as written here. ### Step 3: Create your Pardot Form Handler Like all Pardot Form integrations, you'll need to use Pardot 'Form Handlers' instead of regular Pardot Forms. Pardot Form Handlers are leveraged by APIs/Integrations - regular Pardot forms are not. \ ​*Note: You must be a Pardot Administrator or Marketing role to create Form Handler* ### Step 3: Choose your subdomain and add it to Domain Setup in Tourial 🛑 You must be an admin in your account to complete this step. To receive contact-level Tourial engagement data via Pardot, you'll need to serve your Tourials from your own domain rather than the Tourial domain. First, you need to decide what you'd like your custom subdomain to be. For example, *tours.yourcompany.com* or *tourial.yourcompany.com* This subdomain can only be used for your Tourials and should not be used for anything else. *Note: Visitors will not interact with the subdomain itself; creating it simply allows you to serve the tour from your domain rather than Tourial's domain.* In the Tourial app, click on the user icon in the upper right-hand corner of your screen and head to Domain Setup. [![](/files/w1iIn1OoZHmyZTK0SnWD)](https://downloads.intercomcdn.com/i/o/737304231/417056eae9c5cbb5a66c976f/image.png) Once there, you'll see a field where you can enter your subdomain; note that you do not need to include "https\://" or "www Note: Your CNAME record will point to \[youraccount].tourialdns.com *** ## Setup with your Domain Provider (DNS) ### Step 1: Configure CNAME Record Once you've determined a subdomain, you'll need to log in to your domain provider and point a CNAME record for your chosen subdomain to *\[youraccountname].tourialdns.com*. For example, a CNAME record for the account, Acme (acme.com), where they've chosen the subdomain to be "tours" would be: Subdomain: tours CNAME: acme.tourialdns.com Setting up a CNAME record works a little differently depending on your hosting provider (GoDaddy, HostGator, etc.). Below are guides for some common providers:\ ​ * [Add a CNAME record in GoDaddy](https://www.godaddy.com/help/edit-a-cname-record-19237) * [Edit a CNAME record in HostGator](https://www.hostgator.com/help/article/how-to-change-dns-zones-mx-cname-and-a-records) * [Updating CNAME in Domain.com](https://www.domain.com/help/article/dns-management-how-to-update-cname-aliases) * [Set up a CNAME record in NameCheap](https://help.talentlms.com/hc/en-us/articles/360014574034-How-to-set-up-your-CNAME-with-NameCheap) * [Add new DNS record in BlueHost](https://www.bluehost.com/help/article/dns-management-add-edit-or-delete-dns-entries#add) * [Create a CNAME in CloudFlare](https://developers.cloudflare.com/dns/manage-dns-records/how-to/create-subdomain/) * [Create a CNAME record in Google Domains](https://support.google.com/domains/answer/3290350?visit_id=638149334548346772-982645537\&rd=1) If you need assistance setting up a CNAME record and pointing it to Tourial, please reach out to your Customer Success Manager or email . ### Note: If you had a Tour(s) embedded anywhere prior to adding a subdomain and configuring your DNS see below. The [embed code](https://intercom.help/tourial/en/articles/5188654-how-to-embed-a-tour-onto-your-website) changes once you've created a subdomain. So make sure you use the updated version wherever you have tours already embedded to ensure it properly loads from the new subdomain. # Lead Forms in Pardot 👉 [Take a Tour before Getting Started](https://websitetours.tourial.com/pages/pardot-forms)👈 For this, you will need to have a Pardot Form Handler created to map your Tourial form leads into your account. We recommend a custom form handler dedicated to Tourial (ie. Tourial - Pardot Form). ## Connect your Pardot Form Handler to Tourial 1\. Back in Tourial, select Forms, then Create a new form ![](/files/UXtvcTYp5FH1nb2kopNs) 2\. At the top, add a form name 3\. Below, there are several options to add or edit fields, and style your form. First, click Content to connect your Pardot Form Handler ![](/files/G21lfBeqrdfRlzGnoBjf) 4\. You can add a headline and description text. Select Integration, then Import field 5\. Select the Tourial Form Handler you create If you added any text fields to your Pardot Form Handler for the purpose of capturing UTMs, you'll be able to map these as well. Select Hidden from the dropdown in the form editor and then pick the corresponding UTM paramete *Note: Make sure the number of fields in your Tourial form matches the fields in your Pardot form, otherwise you'll potentially send empty data or the integration will fail.* 6\. Style your form as you wish by using the remaining form settings 7\. If you choose to show the confirmation modal, you can edit and style it under the Confirmation ta 8\. Save your form ### Success! 🎉 Confirm the connection by sending a test lead through the form to make sure it goes through to your Pardot account! # Engagement Data with Pardot 👉 [Take a Tour before Getting Started](https://websitetours.tourial.com/pages/pardot-integration)👈 Once you've completed the [setup of the Pardot Integration](/integrations/map-crm-integrations/pardot), you'll start to see Tourial engagement data for known contacts in your Pardot account. This data will be visible on a contact under external activity, and you'll be able to create lists, engagement programs, and reports based on a contact's engagement with your Product Tours.\ ​\ Tourial Engagement Data is sent to Pardot through a cookie that Tourial sets. Once your account is connected to Pardot, Tour engagement activity will be recorded for any cookied visitor. ## Contact Record Activity Feed An external activity is created each time a contact engages with one of your Tourials. You'll see a Tourial activity item under External Activities with the following information: * Tourial Name * Name of the Tourial as indicated in your Tourial account (this will display up to 30 characters max of your Tourial name) * Completion Rate * The range percentage of your Tour the visitor engaged with based on the number of steps completed against the total number of steps in your Tourial * < 10%, 10-24%, 25-49%, 50-74%, 75-99%, or 100% Note: The date and time are stamped by Pardot and shown under Date/Time to the right of the external activity. ### Form Submissions When someone submits a Tourial form and it's connected to your Pardot Form Handler, that activity will show under Prospect Activities above External Activities. ## Using Engagement Data You can use Tourial Engagement Data in Pardot to segment contacts, start a Pardot Engagement Program, or as a part of Automation Rules. Using Automation Rules, or within Engagement Programs, you can send emails, notify your team, or even adjust their Score within a Scoring Category. \ ​ #### Using Tourial Engagement Data within Pardot Engagement Program You can create a Trigger (or listening event) when a Tourial View occurs and then add actions as neede #### Using Tourial Engagement Data within Pardot Engagement Program Within Automation Rules, you can use the values for Engagement Data to take action based on set criteria that either match all, or match any. We suggest creating one for each Completion Rate range you'd like to take action on for each live Tour to ensure all scenarios are covered. For example, create for any *when value is* \[tour name | percent range]: ``` Acme Tour | < 10% Acme Tour | 10-24% Acme Tour | 25-49% Acme Tour | 50-74% Acme Tour | 75-99% Acme Tour | 100% ``` #### NOTE: Tour Center Engagement Data is not sent into Pardot. However, Engagement Data for individual tours within a Tour Center is sent into Pardot. #### Send Slack notifications to your team automatically If you're a Slack user, you can connect Pardot to Slack and create an automatic notification to a Slack channel when someone submits your Tourial Form handler. [Follow these instructions on adding the Slack Connector.](https://help.salesforce.com/s/articleView?id=sf.pardot_slack_add_connector.htm\&type=5) [This article also walks through the connection process and ways to create custom messages using Merge Fields.](https://www.salesforceben.com/the-drip/pardot-to-slack/) After connecting Slack, add the completion action Notify Slack channel to your Form Handler, select a channel, and add your custom message Boom, instant alerts in Slack so your team can act on interested buyers.
# How to Create a Pardot Dashboard to Measure Tourial's Impact This guide will walk you through the process of creating a dashboard in Pardot to track and measure the impact of Tourial on your business. NOTE: Since every MAP/CRM setup is different, these instructions may not be 100% accurate based on the setup of your Pardot instance. *** ## Step 1: Create a Pardot Dynamic List Before diving into reports, the first step is to create a Dynamic List in Pardot to segment contacts who have interacted with your Tourials. This list will be used to filter and refine the data you’ll analyze in your reports. 1. Navigate to Pardot Lists\ In Pardot, go to the Prospects tab and select Segmentation Lists. 2. Create a New Dynamic List\ Click + Add List and choose Dynamic List. 3. Name Your List\ Name the list something relevant, like Tourial Engagement by Contact. 4. Add Filters\ Add filters to segment contacts who have viewed or engaged with a Tourial: 1. Tourial: Last Tourial Viewed is known – This filter ensures that only contacts who have interacted with a Tourial are included. 2. Company Name is not any of \[YOUR COMPANY NAME] – Exclude internal employees or irrelevant data. 3. Tourial: Last Session Date is within \[your chosen timeframe] – For example, within the last 365 days (or 180, 90, 60 days, depending on your needs). 4. Lifecycle Stage – You can filter by lifecycle stage (e.g., Lead, MQL, SQL, Opportunity) if needed. *** ## Step 2: Create Reports in Pardot With your dynamic list in place, you can now create the key reports to track Tourial's impact across various stages of your marketing and sales processes. Below are some essential reports to include in your Pardot dashboard. ### Report 1: Tourial Views by Lifecycle Stage Goal: This report shows how many contacts have viewed Tourials, segmented by lifecycle stage, over a given time period (e.g., monthly, quarterly). 1. Data Sources: 1. Prospects 2. Opportunities (if available) 2. Configuration: 1. Chart Type: Bar Chart 2. X-axis: Tourial: Last Session Date (broken down by month, quarter, etc.) 3. Y-axis: Count of Prospects 4. Break Down By: Lifecycle Stage 3. Filters: 1. Prospects: Tourial: Last Session Date is within the last 365 days (or another timeframe) 2. Prospects: Is member of \[the dynamic list created above] 3. Filter rules: Include data if it matches "ALL of the filters below." *** ### Report 2: Tourial Influenced Pipeline Report Goal: This report tracks how Tourial influences your revenue pipeline by associating Tourial sessions with deal stages and opportunity value. 1. Data Sources: 2. * Prospects * Opportunities 3. Configuration: 4. * Chart Type: Horizontal Bar * X-axis: Opportunity Amount (sum of opportunity values) * Y-axis: Opportunity Stage * Break Down By: Original Source (e.g., Organic, Paid Search, Referral) 5. Filters: 6. * Prospects: Number of Associated Opportunities is greater than 0 * Prospects: Is member of \[dynamic list] * Opportunities: Opportunity Stage has been updated in the last 365 days (or your desired timeframe) * Opportunities: Opportunity Stage is any of \[selected deal stages] * Filter rules: Include data if it matches "ALL of the filters below." *** ### Report 3: Most Recent Tour Engagement Goal: This report identifies which Tourials have been viewed most recently and how many contacts engaged with each one, providing insights into the popularity and engagement of your assets. 1. Data Sources: 1. Prospects 2. Opportunities 2. Configuration: 1. Chart Type: Bar Chart 2. X-axis: Tourial: Last Tourial Viewed 3. Y-axis: Count of Prospects 3. Filters: 1. Prospects: Tourial: Last Session Date is within the last 365 days (or your preferred timeframe) 2. Prospects: Tourial: Last Tourial Viewed is known (or filter by specific Tourials you want to analyze) 3. Filter rules: Include data if it matches "ALL of the filters below." *** ### Report 4: Tourial Sessions by UTM Source/Medium Goal: This report shows the total number of Tourial sessions segmented by UTM source and medium, helping you understand how your campaigns are driving engagement with your Tourials. 1. Data Sources: 1. Prospects 2. Opportunities 3. Website Activity 2. Configuration: 1. Chart Type: Horizontal Bar 2. X-axis: Sum of Tourial Sessions 3. Y-axis: UTM Medium 4. Break Down By: UTM Source 3. Filters: 1. All Events: Event timestamp is within the last 365 days (or your preferred timeframe) 2. Prospects: Tourial: Last Tourial Viewed is known 3. Page Views: UTM Source doesn’t contain any of \[No value] 4. Prospects: utm\_source is known 5. Page Views: UTM Medium doesn’t contain any of \[No value] 6. Filter rules: (1 AND 2 AND 4) OR (1 AND 3 AND 4). *** ### Report 5: Active Deals with Tourial Influence Goal: This report shows the number of deals and the number of unique Tourials viewed at each deal stage, offering insight into Tourial’s direct influence on your sales pipeline. 1. Data Sources: 1. Prospects 2. Opportunities 2. Configuration: 1. Chart Type: Combination (Bar for Opportunities and Line for Unique Tourials Viewed) 2. X-axis: Opportunity Stage 3. Y-axis 1: Count of Opportunities 4. Y-axis 2: Sum of Tourial: Total Unique Tourials Viewed 3. Filters: 1. All Events: Event timestamp is within the last 365 days (or desired timeframe) 2. Opportunities: Opportunity Stage is any of \[selected deal stages] 3. Prospects: Number of Associated Opportunities is greater than 0 4. Filter rules: Include data if it matches "ALL of the filters below." *** ### Report 6: Lead Count by Tourial Viewed Goal: This report shows the total number of leads who have viewed each specific Tourial, helping you assess which assets are resonating with your audience. 1. Data Sources: 1. Prospects 2. Opportunities 2. Configuration: 1. Chart Type: Pie Chart 2. Break Down By: Tourial: Last Tourial Viewed 3. Values: Count of Prospects 3. Filters: 1. All Events: Event timestamp is within the last 365 days (or your chosen timeframe) 2. Prospects: Tourial: Last Tourial Viewed is equal to any of \[specific Tourials you want to analyze] 3. Filter rules: Include data if it matches "ALL of the filters below." *** ## Step 3: Add Reports to Your Pardot Dashboard Once you’ve created your reports, you can add them to a Pardot dashboard for easy access and monitoring. 1. Go to Pardot Analytics\ In Pardot, navigate to the Reports section. 2. Create a New Dashboard\ Click on Create New Dashboard and give it a name, such as Tourial Engagement Dashboard. 3. Add Reports to the Dashboard\ After creating the dashboard, click Add Report and choose the reports you’ve created. Arrange them in a layout that suits your needs. 4. Customize and Share\ Once your dashboard is set up, you can customize the layout to fit your workflow. Share the dashboard with your team or set up automated email reports to keep everyone informed. *** ### Conclusion By following these steps, you’ll have a comprehensive Pardot dashboard that tracks and measures the impact of Tourial on your marketing and sales processes. Monitoring key metrics like Tourial views, pipeline influence, and UTM source/medium performance will provide valuable insights into how Tourial contributes to your business growth. This will help you make informed, data-driven decisions to improve your ROI. If you have any questions or need further assistance, feel free to contact our support team!
--- [Next Page](/llms-full.txt/1)