Creating Tours

Hussain

Beacons are visual indicators that draw user attention to specific UI elements. They help users discover new features and guide them to important actions without being intrusive.<h2>What are beacons?</h2><img src="https://s3.us-west-1.amazonaws.com/unheard-assets/uploads/d7959d98-ed2c-4f03-a968-91bd4705cf78/913a462b-58ef-4f84-be89-3860d522940f/beacon-overview.png" width="100%" align="center" caption="" aspectratio="1.8840579710144927">Beacons are small, attention-grabbing visual elements that pulse, glow, or display labels to highlight specific features. When clicked, they can trigger a tour step or simply draw attention to an element.<h3>When to use beacons</h3><ul><li>New feature announcements: Highlight recently launched features</li><li>Feature discovery: Draw attention to underutilized features</li><li>Guided navigation: Direct users to the next step in a workflow</li><li>Persistent hints: Keep important options visible</li></ul><h3>Benefits</h3><ul><li>Non-intrusive user guidance</li><li>Increases feature discoverability</li><li>Reduces support tickets</li><li>Works alongside or independently from tours</li></ul><h2>Beacon types</h2>Userorbit offers three beacon types for different use cases. Each type serves a specific purpose and visual style.<h3>Badge beacons</h3><img src="https://s3.us-west-1.amazonaws.com/unheard-assets/uploads/d7959d98-ed2c-4f03-a968-91bd4705cf78/99fb12cc-763e-43ed-81e7-01052c499779/badge-beacon.png" width="100%" align="center" caption="" aspectratio="3.5617283950617282">Small circular indicators with icons and optional text labels. The most versatile beacon type.Available icons:<h4>ℹ️ Info</h4><ul><li>Best for: General information, feature explanations, documentation, help guides</li><li>Example text: "Info", "i"</li></ul><h4>✨ Sparkles</h4><ul><li>Best for: New features, product updates, premium features, highlights</li><li>Example text: "New", "Pro"</li></ul><h4>💡 Lightbulb</h4><ul><li>Best for: Tips and tricks, best practices, suggestions, insights</li><li>Example text: "Tip", "!"</li></ul><h4>❓ Question</h4><ul><li>Best for: Help and support, unclear functionality, FAQ links</li><li>Example text: "?", "Help"</li></ul>Common text combinations:<ul><li>"New" → New features (✨ Sparkles)</li><li>"!" → Important tips (💡 Lightbulb)</li><li>"?" → Help available (❓ Question)</li><li>"i" → Info available (ℹ️ Info)</li><li>"Pro" → Premium features (✨ Sparkles)</li><li>"1", "2", "3" → Step numbers (Any icon)</li><li>"Beta" → Beta features (✨ Sparkles, use "β" for short)</li></ul><h3>Hotspot beacons</h3><img src="https://s3.us-west-1.amazonaws.com/unheard-assets/uploads/d7959d98-ed2c-4f03-a968-91bd4705cf78/6591cf89-f811-43be-b634-2dd596f58338/hotspot-beacon.png" width="100%" align="center" caption="" aspectratio="3.78343949044586">Pulsing circular indicators that draw attention without text. Clean, minimal design.Best for: Minimal interfaces, subtle attention, small elements, clean aesthetics<h3>Label beacons</h3><img src="https://s3.us-west-1.amazonaws.com/unheard-assets/uploads/d7959d98-ed2c-4f03-a968-91bd4705cf78/e113bdfe-1e06-46e0-93bf-22dcc712ca1d/label-beacon.png" width="100%" align="center" caption="" aspectratio="3.5636363636363635">Text-based indicators with backgrounds for custom context. Direct messaging approach.Best for: Custom text needs, clear instructions, step indicators, direct calls-to-action<h2>Beacon positioning</h2>Beacons can be positioned in 13 locations around the target element for maximum flexibility and visibility.<h3>All 13 Beacon Positions</h3>Basic 9 positions:<ul><li>Top row: Top-left, Top, Top-right</li><li>Middle row: Left, Center, Right</li><li>Bottom row: Bottom-left, Bottom, Bottom-right</li></ul>Additional 4 positions:<ul><li>Center-left: Left of center</li><li>Center-right: Right of center</li><li>Center-top: Above center</li><li>Center-bottom: Below center</li></ul><h3>Position Selection Guide</h3>Quick selection guide:<ul><li>Top-right: Default choice (buttons, cards, menu items)</li><li>Center: Maximum visibility (large panels, cards)</li><li>Right: Clean aesthetic (navigation items)</li><li>Top/Bottom: Wide elements, banners</li></ul><h3>Choosing the Right Position</h3>Recommended positions by element type:<ul><li>Button → Top-right (Doesn't cover button text)</li><li>Icon → Top-right or center (Highlights the icon)</li><li>Menu item → Right (Doesn't cover text)</li><li>Card → Top-right or center (Visible but not intrusive)</li><li>Input field → Top-right (Doesn't block label)</li><li>Dropdown → Top-right (Doesn't interfere with expansion)</li><li>Large panel → Center (Maximum visibility)</li><li>Navigation item → Right (Clean, clear indicator)</li><li>Header element → Bottom-right (Stands out from content)</li><li>Footer element → Top-right (Above the element)</li></ul><h3>Position Best Practices</h3>Do:<ul><li>Start with top-right as default</li><li>Test on different screen sizes</li><li>Use center positions for large, important elements</li><li>Consider what users click on - don't block clickable areas</li></ul>Don't:<ul><li>Block the element's primary function</li><li>Place too close to screen edge</li><li>Use center on tiny elements</li><li>Position over text user needs to read</li></ul><h3>Mobile Positioning Considerations</h3>Recommended mobile positions:<ul><li>Top-right (still works well)</li><li>Center (more reliable on small screens)</li><li>Avoid extreme edge positions</li></ul><h2>Configuring beacons</h2>To add a beacon to your tour step, follow these configuration steps:<h3>Step 1: Enable beacons</h3><ol><li>Create or edit a tour step</li><li>Navigate to Behavior tab</li><li>Select type as Pointer/Tooltip</li><li>Toggle "Show beacon" to enable</li></ol><h3>Step 2: Choose beacon type</h3>Badge: Circular icon with optional text<ul><li>Best for: Feature highlights, new badges, tips</li></ul>Hotspot: Pulsing circle indicator<ul><li>Best for: Minimal design, subtle hints</li></ul>Label: Text label with optional icon<ul><li>Best for: Descriptive hints, custom messages</li></ul><h3>Step 3: Set position</h3>Position dropdown options:Basic 9 positions:<ul><li>Top row: Top-left, Top, Top-right</li><li>Middle row: Left, Center, Right</li><li>Bottom row: Bottom-left, Bottom, Bottom-right</li></ul>Additional 4 positions:<ul><li>Center-left: Left of center</li><li>Center-right: Right of center</li><li>Center-top: Above center</li><li>Center-bottom: Below center</li></ul>Total: 13 position options available<h3>Step 4: Customize appearance</h3>Configuration options vary by beacon type:<h4>Badge Beacons</h4>Icon selection: Info (ℹ️), Sparkles (✨), Lightbulb (💡), Question (❓)Badge text (optional): 1-4 characters - Examples: "New", "!", "?", "Pro"Colors: Badge background and text color with WCAG AA compliance<h4>Hotspot Beacons</h4>Beacon background: Single color selection that will pulse to draw attention<h5>Label Beacons</h5><ul><li>Label text: Main message (2-5 words recommended)</li><li>Badge text (optional): Short prefix (1-4 characters)</li><li>Icon selection: Same as badge beacons</li><li>Colors: Badge and label background/text colors</li></ul><h3>Step 5: Configure behavior</h3><h5>Show Step with Beacon</h5><ul><li>When enabled (default): Clicking beacon opens the tour step</li><li>When disabled: Beacon is display-only, tour step shows automatically</li></ul><h5>Beacon Click Action</h5><ul><li>Open tour step (default): Shows the associated tooltip</li><li>Navigate to URL: Opens a link when beacon is clicked</li><li>Trigger custom event: Fires JavaScript event for analytics</li><li>Do nothing: Beacon is non-interactive</li></ul><h3>Step 6: Test the beacon</h3>Before publishing:<ol><li>Preview the tour in the builder</li><li>Check beacon visibility on the target element</li><li>Test beacon click behavior</li><li>Verify positioning on different screen sizes</li><li>Test on mobile devices</li></ol><h3>Advanced: Multiple Beacons</h3>Best practices for multiple beacons:<ul><li>Limit to 2-3 visible at once (avoid clutter)</li><li>Use different positions to spread them out</li><li>Use consistent icon meanings</li><li>Remove old beacons before adding new ones</li></ul><h2>Styling beacons</h2>Customize appearance to match your brand:Badge background: Fill color for badge beacons Badge text: Text color for readability Beacon background: Background for hotspots and labels Badge radius: Corner roundness (0 = square, high = circular)Best practices:<ul><li>Use brand colors for consistency</li><li>Ensure WCAG AA contrast (minimum 4.5:1)</li><li>Test on light and dark backgrounds</li></ul><h2>Best practices</h2><h3>Do's</h3><ul><li>Limit to 1-3 visible beacons at once</li><li>Match your brand colors</li><li>Make them actionable</li><li>Remove after feature adoption</li><li>Use sparkles for new features</li><li>Use question mark for help</li></ul><h3>Don'ts</h3><ul><li>Too many beacons create visual noise</li><li>Don't use for critical info (can be missed)</li><li>Don't cover important UI</li><li>Don't make them permanent</li></ul><h2>Combining with tour steps</h2>Progressive disclosure pattern:<ol><li>Beacon appears → draws attention</li><li>User clicks beacon → opens tour step</li><li>Tour educates → provides context</li><li>Beacon disappears → after engagement</li></ol><h2>Use cases</h2><h5>1. New feature announcement</h5>Beacon setup: Badge type, "New" label, Top-right position, Opens tour<h5>2. Onboarding assistance</h5>Beacon setup: Hotspot type, Center position, Opens profile completion tour<h5>3. Pro feature promotion</h5>Beacon setup: Label type, "Pro" text, Sparkles icon, Opens upgrade prompt<h5>4. Help and support</h5>Beacon setup: Badge type, "?" text, Question icon, Opens help tour<h2>Troubleshooting</h2>Beacon not appearing:<ul><li>Verify element selector in DevTools</li><li>Check if beacons are enabled in tour settings</li><li>Add delay before showing</li></ul>Beacon in wrong position:<ul><li>Choose different position option</li><li>Test on various screen sizes</li></ul>Beacon click not working:<ul><li>Check browser console for errors</li><li>Verify tour configuration</li><li>Check click action settings</li></ul><h2>Complete Beacon Configuration Examples</h2><h3>Example 1: New Feature Announcement</h3><img src="https://s3.us-west-1.amazonaws.com/unheard-assets/uploads/d7959d98-ed2c-4f03-a968-91bd4705cf78/a2c421ed-02dc-4f1b-85aa-e641ebe1b4c9/new-feature-demo.png" width="100%" align="center" caption="" aspectratio="1.8873239436619718">Badge beacon with sparkles icon highlighting a dashboard feature.<h3>Example 2: Contextual Help</h3><img src="https://s3.us-west-1.amazonaws.com/unheard-assets/uploads/d7959d98-ed2c-4f03-a968-91bd4705cf78/bc49fddd-278b-4ab5-be46-7935f43519c4/question-badge-demo.png" width="100%" align="center" caption="" aspectratio="1.8350877192982455">Question badge positioned to provide contextual help for complex settings.<h2>Beacon Analytics and Optimization</h2><h3>Tracking Beacon Effectiveness</h3>Monitor these metrics to optimize beacon performance:Key metrics:<ul><li>Beacon click-through rate</li><li>Tour completion rate from beacon clicks</li><li>Feature adoption after beacon interaction</li><li>Time to first click</li></ul><h3>When to Remove Beacons</h3>Remove "New" beacons when:<ul><li>Feature is no longer new (2-4 weeks typically)</li><li>Adoption reaches target threshold</li><li>Next "new" feature launches</li></ul>Keep persistent beacons for:<ul><li>Complex features that always need help</li><li>Premium features requiring upgrade</li></ul><h2>Wrapping Up</h2>Beacons are powerful tools for drawing attention and guiding feature discovery. Use them strategically - start with 1-2 well-placed beacons and expand based on user behavior.Key takeaways:<ul><li>13 positions give you complete flexibility for any element</li><li>3 beacon types (badge, hotspot, label) match different use cases</li><li>4 icon types (info, sparkles, lightbulb, question) convey meaning</li><li>Customizable behavior controls click actions and step display</li><li>Test positioning on all screen sizes before publishing</li></ul>Remember: Effective beacon usage is about balance. Too few, and users miss features. Too many, and they create noise.Best practices recap:<ol><li>Use top-right as default position (works for most elements)</li><li>Match icon to purpose (sparkles = new, lightbulb = tip, question = help)</li><li>Keep badge text short (1-4 characters maximum)</li><li>Ensure color contrast for accessibility (WCAG AA: 4.5:1)</li><li>Limit to 2-3 visible beacons at once</li><li>Remove "New" badges after feature adoption</li><li>Test on mobile devices and small screens</li><li>Use consistent icon meanings across your app</li></ol>Next steps:<ul><li><a target="_blank" rel="noopener noreferrer nofollow" class="prose-link" href="https://portal.userorbit.help/configuring-product-tour-steps-on-userorbit-bqXJpHcQqe">Configure step behavior →</a></li><li><a target="_blank" rel="noopener noreferrer nofollow" class="prose-link" href="https://portal.userorbit.help/how-to-configure-product-tour-settings-and-best-practices-on-userorbit-XzuQ6Mi9DT">Set up tour targeting →</a></li></ul>Want to track beacon effectiveness? Check out our <a target="_blank" rel="noopener noreferrer nofollow" class="prose-link" href="/help/article/product-tour-analytics">product tour analytics guide</a>!Need more help? <a target="_blank" rel="noopener noreferrer nofollow" class="prose-link" href="/contact">Contact our support team</a> or click on the chat bubble below for personalized assistance.Happy beaconing! ✨

Using Beacons in Product Tours on Userorbit

Product tours are powerful tools for user onboarding and feature adoption. Userorbit offers multiple tour types and step types, each designed for specific use cases. Let's explore when and how to use each one!<h2>Understanding Tour Types vs Step Types</h2>Tour-level types (set for the entire tour):<ul><li>Tour: Standard sequential multi-step experience</li><li>Slideout: Side panel that slides in from screen edge</li><li>Banner: Persistent top or bottom bar</li></ul>Step-level types (can vary per step within a tour):<ul><li>Dialog: Modal window in center or corners</li><li>Pointer/Tooltip: Contextual tooltips attached to UI elements</li><li>Banner: Individual banner steps</li></ul>Key insight: A single tour can have a mix of step types. Start with a dialog welcome, use pointers to highlight features, end with a banner reminder.<h2>Tour-Level Types</h2><h3>Tour (Standard)</h3>The default and most flexible option for multi-step experiences.When to use: Standard onboarding flows, feature tutorials, educational contentBest for: Most use cases - this is your default choice<h3>Slideout</h3><img src="https://s3.us-west-1.amazonaws.com/unheard-assets/uploads/d7959d98-ed2c-4f03-a968-91bd4705cf78/59dff99d-00ab-41b8-8506-aa3708202ed7/slideout-modal.png" width="100%" align="center" caption="" aspectratio="1.6355013550135502">A side panel that appears from the edge of the screen, creating a non-blocking experience.When to use: Contextual help, progressive onboarding, resource centers, reference materialPositions available: Bottom-right (most common), Bottom-left, Top-right, Top-leftBest for: Non-blocking guidance where users can still see and interact with the main interface<h3>Banner (Tour-level)</h3>A tour composed primarily of banner-type steps.When to use: Site-wide announcements, persistent reminders, non-critical updates, simple CTAsBest for: Announcements, notifications, simple messages<h2>Step-Level Types</h2><h3>Dialog/Modal Steps</h3><img src="https://s3.us-west-1.amazonaws.com/unheard-assets/uploads/d7959d98-ed2c-4f03-a968-91bd4705cf78/6cf67392-ba29-4d0c-8083-0e94a5414743/dialog-tour-type.png" width="100%" align="center" caption="" aspectratio="1.6282578875171467">Modal or slideout windows that capture user attention.<h3>When to use Dialog/Slideout</h3><ul><li>First-time onboarding: Welcome new users</li><li>Major announcements: Showcase significant updates</li><li>Multi-step workflows: Guide through complex processes</li><li>Educational content: Detailed explanations</li><li>Collecting information: Setup preferences or profiles</li></ul><h3>Position options for Dialog steps</h3><ul><li>Center: Full modal in the middle (most common)</li><li>Bottom-right: Slideout panel from bottom-right corner</li><li>Bottom-left: Slideout panel from bottom-left corner</li><li>Top-right: Slideout panel from top-right corner</li><li>Top-left: Slideout panel from top-left corner</li></ul><h3>Dialog vs Slideout Positioning</h3>Center (Full Modal):<ul><li>Takes over the screen, demands full attention</li><li>Use for critical onboarding and important announcements</li></ul>Corner Slideouts:<ul><li>Less intrusive, users can still see main interface</li><li>Good for contextual help and multi-step flows</li></ul><h3>Best practices for Dialog steps</h3><ul><li>Keep to 3-5 steps per tour</li><li>Use compelling visuals for engagement</li><li>Always provide clear exit option</li><li>Use center for critical info, corners for less intrusive content</li><li>Avoid showing on every page load</li></ul><h3>Example use cases</h3>Center dialogs: Welcome tours, feature launches, setup wizards, premium upsellsSlideouts: Contextual help, progressive disclosure, resource centers<h2>Pointer/Tooltip Steps</h2><img src="https://s3.us-west-1.amazonaws.com/unheard-assets/uploads/d7959d98-ed2c-4f03-a968-91bd4705cf78/20f463fe-fd6e-41df-bd70-a53676fdda58/tooltip-tour-type.png" width="100%" align="center" caption="" aspectratio="2.16839378238342">Pointer steps attach directly to specific UI elements, highlighting them with tooltips.<h3>When to use Pointer/Tooltip</h3><ul><li>Feature discovery: Point out hidden or new features</li><li>Contextual help: Provide help exactly where needed</li><li>Quick tips: Share bite-sized information</li><li>UI explanations: Clarify what buttons or controls do</li><li>Progressive onboarding: Teach features as users encounter them</li></ul><h3>Positioning and attachment</h3><ul><li>Attach using CSS selectors (ID, class, or data attributes)</li><li>Auto-adjust position to stay visible</li><li>Support for different sides (top, bottom, left, right, auto)</li></ul><h3>Tooltip Side Positioning</h3>Available positions:<ul><li>Auto (Recommended): Automatically chooses best position</li><li>Bottom: Tooltip below element</li><li>Top: Tooltip above element</li><li>Left: Tooltip to the left</li><li>Right: Tooltip to the right</li></ul>Best practice: Start with "Auto" and only override if needed<h3>Best practices for Pointer steps</h3><ul><li>Use stable CSS selectors (prefer IDs or data attributes)</li><li>Keep content brief and scannable</li><li>Enable "Wait for element" for dynamic content</li><li>Test on different screen sizes</li><li>Don't chain more than 3-4 pointers in sequence</li><li>Use "Auto" positioning for reliability</li></ul><h3>Example use cases</h3><ul><li>New button highlights with instructions</li><li>Hidden feature discoveries</li><li>Navigation assistance</li><li>Form field help</li><li>Feature highlights with beacons</li></ul><h2>Banner Steps</h2><img src="https://s3.us-west-1.amazonaws.com/unheard-assets/uploads/d7959d98-ed2c-4f03-a968-91bd4705cf78/b9e3eafa-cede-420f-ac92-3330d7da39ba/banner-tour-type.png" width="100%" align="center" caption="" aspectratio="4.769230769230769">Banner steps appear as horizontal bars at the top or bottom of your application.<h3>When to use Banner</h3><ul><li>Announcements: Share updates without blocking UI</li><li>Persistent reminders: Keep information visible</li><li>System status: Display maintenance notices</li><li>Quick actions: Prompt simple tasks</li><li>Promotional messages: Highlight offers or events</li></ul><h3>Positioning options</h3><ul><li>Top: Most visible, good for important messages</li><li>Bottom: Less intrusive, good for persistent reminders</li></ul><h3>Banner Content Justification</h3>Available options:<ul><li>Justify Between (Most common): Content spreads, message left, CTA right</li><li>Left: All content left-aligned, simple announcements</li><li>Right: All content right-aligned (rare)</li><li>Justify Around/Evenly: Balanced, centered feel</li></ul>When to use:<ul><li>Justify Between: Message + CTA (recommended for most banners)</li><li>Left: Simple announcements, single button</li><li>Justify Around/Evenly: Very balanced, centered feel</li></ul><h3>Best practices for Banner steps</h3><ul><li>Keep message concise (one line if possible)</li><li>Use clear, action-oriented language</li><li>Include single, obvious CTA</li><li>Make dismissible unless critical</li><li>Use contrasting colors</li><li>Use "Justify Between" for message + CTA layout</li><li>Test on mobile</li></ul><h3>Example use cases</h3><ul><li>Trial reminders</li><li>Incomplete setup prompts</li><li>System status notices</li><li>Event promotions</li><li>Cookie notices</li></ul><h2>Choosing the right type</h2><h3>Choose Dialog (Center Modal) when:</h3><ul><li>Users need to focus without distraction</li><li>Presenting critical onboarding information</li><li>Content includes rich media (videos, images, forms)</li><li>You need guaranteed attention</li></ul><h3>Choose Slideout (Corner Position) when:</h3><ul><li>Users need to reference UI while reading</li><li>Providing contextual help they might revisit</li><li>Content is helpful but not critical</li><li>Want less intrusive than center modal</li></ul><h3>Choose Pointer/Tooltip when:</h3><ul><li>Teaching without disrupting workflow</li><li>Information tied to specific UI element</li><li>Users already familiar with your app</li><li>Highlighting subtle features</li><li>Demonstrating where features are located</li></ul><h3>Choose Banner when:</h3><ul><li>Message is brief and actionable (&lt; 10 words)</li><li>Users should see it while working</li><li>Information is time-sensitive</li><li>Want minimal disruption</li><li>Making announcements or notifications</li></ul><h3>Decision Flowchart</h3>Quick decision tree:<ol><li>Message brief (&lt; 10 words)? → Banner</li><li>Tied to specific UI element? → Pointer/Tooltip</li><li>Need complete focus? → Dialog (Center)</li><li>Otherwise → Slideout (Corner)</li></ol><h2>Combining step types in one tour</h2>You can mix step types within a single tour for maximum effectiveness.<h3>Multi-type Tour Examples</h3>Example 1: New feature adoption<ol><li>Dialog (Center): Welcome message</li><li>Pointer: Highlight feature location</li><li>Pointer: Show action button</li><li>Slideout: Detailed options</li><li>Banner: Persistent reminder</li></ol>Example 2: Onboarding flow<ol><li>Dialog (Center): Welcome + value proposition</li><li>Slideout: Setup instructions</li><li>Pointer: Profile completion</li><li>Pointer: Settings location</li><li>Banner: Completion message</li></ol>Why mix types?<ul><li>Grab attention (Dialog) → Show location (Pointer) → Remind (Banner)</li><li>Matches natural learning progression</li><li>Keeps engagement high with variety</li></ul>Best practices for mixed tours:<ul><li>Start with attention-grabbing (Dialog center)</li><li>Use Pointers for "where is it?" questions</li><li>End with gentle reminders (Banner or slideout)</li><li>Don't mix more than 3 types in one tour</li><li>Test the flow for natural transitions</li></ul><h2>Tour Type Selection Guide</h2>Common tour type combinations by use case:<h3>Welcome New Users</h3><ul><li>Tour Type: Tour</li><li>Step Type: Dialog</li><li>Position: Center</li><li>Why: Full attention needed for onboarding</li></ul><h3>Contextual Help</h3><ul><li>Tour Type: Tour</li><li>Step Type: Pointer</li><li>Position: Auto</li><li>Why: Tied to specific UI element</li></ul><h3>Site Announcement</h3><ul><li>Tour Type: Banner</li><li>Step Type: Banner</li><li>Position: Top</li><li>Why: Brief, non-blocking notification</li></ul><h3>Multi-Step Tutorial</h3><ul><li>Tour Type: Tour</li><li>Step Type: Mixed (Dialog + Pointer)</li><li>Position: Various</li><li>Why: Comprehensive learning experience</li></ul><h3>Feature Highlight</h3><ul><li>Tour Type: Tour</li><li>Step Type: Pointer</li><li>Position: Auto</li><li>Why: Show exactly where feature is located</li></ul><h3>Persistent Reminder</h3><ul><li>Tour Type: Banner</li><li>Step Type: Banner</li><li>Position: Bottom</li><li>Why: Stays visible without blocking content</li></ul><h3>Resource Center</h3><ul><li>Tour Type: Slideout</li><li>Step Type: Dialog</li><li>Position: Bottom-right</li><li>Why: Reference material that doesn't interrupt workflow</li></ul><h3>Upsell Message</h3><ul><li>Tour Type: Tour</li><li>Step Type: Dialog</li><li>Position: Center or Slideout</li><li>Why: Needs explanation and clear call-to-action</li></ul><h3>Quick Tip</h3><ul><li>Tour Type: Tour</li><li>Step Type: Pointer</li><li>Position: Auto</li><li>Why: Contextual and brief information</li></ul><h2>Best practices across all types</h2><h3>General best practices</h3><ol><li>Know your audience: Segment tours based on user experience level</li><li>Test thoroughly: Preview on different devices and screen sizes</li><li>Respect user control: Always provide skip and close options</li><li>Monitor analytics: Track completion rates to optimize</li><li>Iterate based on data: Refine tours based on user behavior</li><li>Keep it fresh: Update tours as your product evolves</li><li>Mix step types: Use the right type for each step's purpose</li><li>Consider mobile: Test on small screens</li></ol><h3>Type-specific best practices</h3>Dialog steps:<ul><li>Keep to 3-5 steps per tour</li><li>Include visual media for engagement</li><li>Always provide exit option</li><li>Use center for critical info</li></ul>Pointer steps:<ul><li>Use stable CSS selectors</li><li>Keep content brief</li><li>Test positioning on all screen sizes</li><li>Don't chain more than 3-4 in a row</li></ul>Banner steps:<ul><li>One line of text maximum</li><li>Clear, single CTA</li><li>Use "Justify Between" for layout</li><li>Make dismissible</li></ul><h2>Common pitfalls to avoid</h2><ul><li>Using Dialog for everything: Save modals for important moments</li><li>Too many Pointers in sequence: Limit to 3-4 tips</li><li>Permanent Banners: Make dismissible unless critical</li><li>Ignoring mobile: Test all tour types on mobile devices</li><li>No exit strategy: Always let users skip or dismiss</li></ul><h2>Wrapping Up</h2>Understanding product tour types and step types empowers you to create engaging, effective user experiences.Key insights:<ul><li>✨ Tour-level types (Tour, Slideout, Banner) set overall experience</li><li>✨ Step-level types (Dialog, Pointer, Banner) can be mixed within one tour</li><li>✨ Positioning matters: Center vs corners vs edges changes perception</li><li>✨ Match type to purpose: Dialog for attention, Pointer for location, Banner for announcements</li><li>✨ Combine for impact: Start Dialog, use Pointers to teach, end with Banner</li></ul>Quick decision guide:<ul><li>Need full attention? → Dialog (Center)</li><li>Show where something is? → Pointer</li><li>Quick announcement? → Banner</li><li>Contextual help? → Slideout or Pointer</li><li>Multi-step tutorial? → Tour with mixed step types</li></ul>Key takeaways:<ol><li>Mix Dialog, Pointer, and Banner steps in one tour</li><li>Center modals demand attention, slideouts are less intrusive</li><li>Pointers work best with "Auto" positioning</li><li>Banners use content justification for layout</li><li>Test all types on mobile devices before launching</li></ol>Remember: The best tour uses the right type for each moment in the user journey. Start strong with Dialog, guide with Pointers, and remind with Banners.Next steps:<ul><li><a target="_blank" rel="noopener noreferrer nofollow" class="prose-link" href="https://portal.userorbit.help/how-to-create-a-product-tour-on-userorbit-0pNd1OjuXx">Create your first tour →</a></li><li><a target="_blank" rel="noopener noreferrer nofollow" class="prose-link" href="https://portal.userorbit.help/configuring-product-tour-steps-on-userorbit-bqXJpHcQqe">Configure step behavior →</a></li><li><a target="_blank" rel="noopener noreferrer nofollow" class="prose-link" href="https://portal.userorbit.help/how-to-configure-product-tour-settings-and-best-practices-on-userorbit-XzuQ6Mi9DT">Set up targeting and buttons →</a></li></ul>Need help choosing the right tour type? <a target="_blank" rel="noopener noreferrer nofollow" class="prose-link" href="https://userorbit.com/contact">Contact our support team</a> or click the chat bubble below for personalized assistance.Happy touring! 🚀

Understanding Product Tour Types on Userorbit

The "Edit in App" feature lets you build and configure product tours directly within your live application using a visual, point-and-click interface. Instead of manually writing CSS selectors, you can select elements and configure tours right where they'll appear.<h2>What is Edit in App?</h2><img src="https://s3.us-west-1.amazonaws.com/unheard-assets/uploads/d7959d98-ed2c-4f03-a968-91bd4705cf78/521aeb39-8e3c-442b-86c8-504e76fa625b/edit-in-app.png" width="100%" align="center" caption="" aspectratio="1.8274111675126903"><h2></h2>Edit in App is a visual tour builder that opens your application with special editing capabilities enabled through the Userorbit Chrome Extension. You can:<ul><li>Select elements visually by clicking on them</li><li>Position tooltips with real-time preview</li><li>Configure step settings with immediate changes</li><li>Navigate multi-page tours in actual user flow</li><li>Test tour behavior in real environment</li></ul><h2>Prerequisites</h2><h3>1. Userorbit Chrome Extension</h3>Install the extension:<ol><li>Visit the <a target="_blank" rel="noopener noreferrer nofollow" class="prose-link" href="https://chromewebstore.google.com/search/Userorbit%20Builder">Userorbit Chrome Extension</a> page</li><li>Click "Add to Chrome"</li><li>Pin the extension to your toolbar</li></ol><h3>2. Application URL</h3>You'll need the URL of your application where you want to build the tour (e.g., <a target="_blank" rel="noopener noreferrer nofollow" class="prose-link" href="https://app.example.com/dashboard"><code spellcheck="false">https://app.example.com/dashboard</code></a>).<h3>3. Application Access</h3><ul><li>Application must be accessible in browser</li><li>Be logged in if authentication required</li><li>Application should be in stable, testable state</li></ul><h2>How to Use Edit in App</h2><h3>Understanding the App URL Modal</h3><img src="https://s3.us-west-1.amazonaws.com/unheard-assets/uploads/d7959d98-ed2c-4f03-a968-91bd4705cf78/dee7b2a3-efe6-489d-b062-c905f83087b2/app-url-modal.png" width="100%" align="center" caption="" aspectratio="1.6240369799691834">When you click "Edit in App", a modal dialog appears asking for your application URL. This is where your tour will be built and tested.What to enter:<ul><li>Full URL of your application (e.g., <a target="_blank" rel="noopener noreferrer nofollow" class="prose-link" href="https://app.example.com"><code spellcheck="false">https://app.example.com</code></a>)</li><li>Specific page where you want to start building</li></ul>Best practices:<ul><li>Use exact URL where users will see tour</li><li>Start at first page of tour flow</li><li>Ensure you're logged in before starting</li><li>Don't use <a target="_blank" rel="noopener noreferrer nofollow" class="prose-link" href="http://localhost">localhost</a> URLs for production</li><li>Avoid URLs with temporary parameters</li></ul><h3>Opening the Visual Builder</h3><ol><li>Navigate to your tour in Userorbit dashboard</li><li>Click "Edit in App" button</li><li>Enter your App URL in the modal</li><li>Click "Start tour builder"</li><li>New browser window opens with your application</li><li>Tour builder panel appears on the right side</li></ol><h3>Selecting Elements</h3><img src="https://s3.us-west-1.amazonaws.com/unheard-assets/uploads/d7959d98-ed2c-4f03-a968-91bd4705cf78/4629a7a6-55cf-4c94-bd31-b36f62a18db3/element-selection.png" width="310" align="center" caption="" aspectratio="2.0264900662251657">When attaching tooltips to elements:<ol><li>Click "Select in app" for CSS Selector field</li><li>Hover over elements (they highlight in blue)</li><li>Click the element you want to select</li><li>CSS selector automatically generates</li></ol>Selection tips:<ul><li>Choose stable elements (avoid dynamic IDs)</li><li>Select parent containers for reliability</li><li>Hover carefully for precise selection</li></ul><h3>Configuring Steps Visually</h3>Step Type &amp; Position:<ul><li>Select step type (Dialog, Tooltip, Banner)</li><li>Choose position (top, bottom, left, right, auto)</li><li>See instant preview</li></ul>Content Editing:<ul><li>Edit content in builder panel</li><li>Changes appear in real-time</li><li>Adjust text, buttons, formatting visually</li></ul>Styling &amp; Theme:<ul><li>Customize colors, fonts, spacing</li><li>See immediate visual feedback</li><li>Test different styles without saving</li></ul><h3>Working with Multi-Page Tours</h3><ol><li>Start editing in app</li><li>Configure first step</li><li>Navigate to next page in your application</li><li>Click "Add Step" in builder</li><li>New step automatically configured for current page</li><li>Repeat for each page</li></ol>Best practice: Follow actual user journey through your app while building.<h3>Previewing Tours</h3><ol><li>Click "Preview" in builder panel</li><li>Tour plays as users will see it</li><li>Navigate through all steps</li><li>Test buttons and interactions</li><li>Verify positioning on different screen sizes</li></ol><h2>Edit in App Interface Overview</h2><h3>Builder Panel</h3><ul><li>Step Navigator: Switch between steps</li><li>Content Editor: Edit with rich text</li><li>Behavior Settings: Configure type, position, progression</li><li>Styling Options: Customize appearance</li><li>Advanced Settings: Set URLs, delays, behaviors</li></ul><h3>Selection Mode</h3><ul><li>Blue Highlight: Selectable elements</li><li>Selection Tool: Active when selecting</li><li>CSS Path Display: Shows selector for current element</li></ul><h3>Top Toolbar</h3><ul><li>Save: Save tour changes</li><li>Preview: Test tour as users see it</li><li>Close: Exit builder (prompts for unsaved changes)</li></ul><h2>Common Use Cases</h2><h3>Creating Feature Announcements</h3><ol><li>Click "Edit in App" on your tour</li><li>Navigate to new feature</li><li>Select feature element visually</li><li>Add tooltip explaining feature</li><li>Preview and save</li></ol><h3>Building Onboarding Flows</h3><ol><li>Start at app entry point</li><li>Add first step introducing interface</li><li>Navigate following user journey</li><li>Add subsequent steps</li><li>Test complete flow</li></ol><h3>Configuring Complex Tooltips</h3><ol><li>Select target element visually</li><li>Choose tooltip position (auto recommended)</li><li>Add content in editor</li><li>Adjust styling to match app</li><li>Test on different screen sizes</li></ol><h2>Tips for Effective Visual Editing</h2><h3>Element Selection Best Practices</h3>Choose stable selectors:<ul><li>Use consistent class names</li><li>Select semantic HTML elements</li><li>Prefer ID-based selectors when available</li><li>Avoid dynamic generated IDs</li><li>Don't select temporary elements</li></ul><h3>Positioning &amp; Layout</h3>Tooltip positioning:<ul><li>Test on different screen sizes</li><li>Ensure tooltips don't cover critical UI</li><li>Use "auto" position when possible</li></ul>Content &amp; Styling:<ul><li>Write content while viewing in context</li><li>Use app's color scheme for consistency</li><li>Test readability on actual backgrounds</li></ul><h2>Troubleshooting</h2><h3>App URL Modal Issues</h3>Can't enter URL:<ul><li>Click input field to focus</li><li>Use complete URL with <code spellcheck="false">https://</code></li><li>Refresh page and try again</li></ul>Button not working:<ul><li>Ensure valid URL format</li><li>Check popup blockers</li><li>Use Chrome browser</li></ul><h3>Extension Issues</h3>Extension not responding:<ol><li>Check extension installed and enabled</li><li>Refresh application page</li><li>Try reinstalling extension</li></ol><h3>Element Selection Issues</h3>Can't select element:<ul><li>Element may be hidden/covered</li><li>Try selecting parent container</li><li>Use browser DevTools to inspect</li></ul>Wrong element selected:<ul><li>Hover more carefully</li><li>Zoom in for small elements</li><li>Select parent or child element</li></ul><h3>Tour Issues</h3>Tour doesn't show:<ul><li>Verify App URL is correct</li><li>Check page URL matches step pattern</li><li>Ensure elements exist on page</li></ul>Positioning problems:<ul><li>Try "Auto" position for tooltips</li><li>Add delay if element loads after page</li><li>Test on actual user screen size</li></ul><h2>Best Practices</h2><h3>Before Starting</h3><ol><li>Plan tour flow - Map user journey</li><li>Know App URL - Have exact URL ready</li><li>Test app - Ensure stable state</li><li>Prepare content - Draft messaging</li><li>Use Chrome - Required for extension</li></ol><h3>During Editing</h3><ol><li>Save frequently - Don't lose work</li><li>Preview often - Test after each change</li><li>Use consistent styling - Apply theme globally</li><li>Follow user path - Navigate as users would</li></ol><h3>After Building</h3><ol><li>Test thoroughly - Preview complete tour</li><li>Check screen sizes - Resize and test</li><li>Verify URLs - Steps appear on correct pages</li><li>Get feedback - Team review before publishing</li><li>Monitor analytics - Track completion rates</li></ol><h2>Security &amp; Privacy</h2>Edit in App is designed with security in mind:<ul><li>Temporary tokens - Expire after editing session</li><li>No data collection - Don't capture app data</li><li>Local processing - Selection happens in browser</li><li>Secure communication - Encrypted data transit</li></ul><h2>Wrapping Up</h2>Edit in App transforms tour creation from guesswork into visual, intuitive experience. Build tours directly within your application to:<ul><li>Create accurate, pixel-perfect positioning</li><li>Build multi-page flows following actual user journey</li><li>Iterate quickly with real-time preview</li><li>Reduce errors from manual CSS entry</li><li>Test in exact user environment</li></ul>The visual builder eliminates technical barriers, letting you focus on crafting helpful, engaging user experiences.Key takeaways:<ul><li>Visual selection eliminates CSS guesswork</li><li>Real-time preview shows exactly how tours appear</li><li>Multi-page support follows actual user flows</li><li>Chrome extension enables seamless editing</li><li>Instant feedback speeds up iteration process</li></ul>Next steps:<ol><li><a target="_blank" rel="noopener noreferrer nofollow" class="prose-link" href="https://chromewebstore.google.com/search/Userorbit%20Builder">Install the Userorbit Chrome Extension</a></li><li><a target="_blank" rel="noopener noreferrer nofollow" class="prose-link" href="https://portal.userorbit.help/how-to-create-a-product-tour-on-userorbit-0pNd1OjuXx">Create your first tour</a></li><li>Use Edit in App to visually configure your steps</li><li><a target="_blank" rel="noopener noreferrer nofollow" class="prose-link" href="https://portal.userorbit.help/configuring-product-tour-steps-on-userorbit-bqXJpHcQqe">Preview and test thoroughly</a></li><li><a target="_blank" rel="noopener noreferrer nofollow" class="prose-link" href="https://portal.userorbit.help/how-to-configure-product-tour-settings-and-best-practices-on-userorbit-XzuQ6Mi9DT">Publish to your users</a></li></ol>Need help getting started? <a target="_blank" rel="noopener noreferrer nofollow" class="prose-link" href="https://userorbit.com/contact">Contact our support team</a> or click the chat bubble below for personalized assistance.Happy building!

Edit Product Tours Directly in Your App with Visual Builder

Mukesh

Product Tours are a great way to onboard new users and showcase your app's features. With Userorbit's Product Tour feature, you can easily guide users through your app without any coding. Let's walk through how to set up your first tour!<h2>Getting Started</h2>First, head over to the Userorbit dashboard and navigate to the Product Tours section. Click the "Create New Tour" button to begin.<img src="https://s3.us-west-1.amazonaws.com/unheard-assets/uploads/d7959d98-ed2c-4f03-a968-91bd4705cf78/ed63a5ec-fa0d-4470-bac6-762d35d7e3f6/tour-create-button.png" width="100%" align="center" caption="" aspectratio="12.854961832061068"><h2>Design Your Tour</h2><img src="https://s3.us-west-1.amazonaws.com/unheard-assets/uploads/d7959d98-ed2c-4f03-a968-91bd4705cf78/65d49668-9daf-4ccb-94f4-272772b4e256/tour-creation-page.png" width="100%" align="center" caption="" aspectratio="1.3635371179039302"><ol><li>Name Your Tour</li></ol>Give your tour a catchy title and brief description. Remember, users will see this when you share the tour, so make it clear and enticing!<ol start="2"><li>Choose Your Starting Point</li></ol>Select the page where you want your tour to begin. This is usually your app's main dashboard or a key feature page.<ol start="3"><li>Add Tour Steps</li></ol>Now for the fun part - adding steps to your tour! You have three options:<ul><li>Posts: Great for introducing new sections or concepts</li><li>Pointers: Perfect for highlighting specific UI elements</li><li>Video Pointers: Add a personal touch with short video explanations</li></ul>For each step, you can:<ul><li>Add text content (keep it concise!)</li><li>Insert images or GIFs</li><li>Embed videos</li><li>Personalize with user attributes</li></ul><h2>Configure Tour Settings</h2>Before launching, configure your tour settings:<ul><li>Targeting: Choose who sees the tour (e.g., new users, specific user segments)</li><li>Trigger: Decide when the tour starts (e.g., on page load, after a specific action)</li><li>Appearance: Customize colors to match your brand</li><li>Completion: Add a celebratory message or action when users finish the tour</li></ul><h2>Test and Launch</h2>Always preview your tour before launching. Click through each step to ensure everything looks and works as expected. Once you're satisfied, hit that "Publish" button and watch your users become product experts!<h2>Best Practices</h2><ol><li>Keep it short: Aim for 3-5 steps to avoid overwhelming users</li><li>Be specific: Highlight one feature or action per step</li><li>Use visuals: Images and GIFs can explain concepts quickly</li><li>Offer an exit: Always allow users to exit the tour if they choose</li></ol><h2>Wrapping Up</h2>Creating a Product Tour on Userorbit is straightforward and can significantly improve your user onboarding experience. Remember, the best tours evolve with your product and user feedback, so don't be afraid to iterate and improve over time.Need more help? <a target="_blank" rel="noopener noreferrer nofollow" class="prose-link" href="https://userorbit.com/contact">contact our support team</a> or click on the chat bubble below for personalized assistance.Happy touring!

How to create a Product Tour on Userorbit?

Multi‑page tours help users learn flows that span multiple screens (e.g., signup → settings → first action). This guide shows how to build a tour that continues seamlessly across pages in your app.If you’re new to tours, start with the basics here: <a target="_blank" rel="noopener noreferrer nofollow" class="prose-link" href="https://userorbit.com/help/how-to-create-product-tour">How to create a Product Tour</a>. This article focuses only on multi‑page flow setup.<h2>Step 1: Create a new tour</h2><ol><li>Go to Product Tours and click "Create New Tour"</li><li>Give it a clear name (e.g., "Onboarding – First Value Flow") and description</li><li>Choose the first page where the tour should start</li></ol><h2>Step 2: Configure URL matching per step</h2>Each step must know which page it belongs to. Use URL rules so the step only appears on the intended page.<ul><li>URL match types supported:<ul><li>Exact match: <a target="_blank" rel="noopener noreferrer nofollow" class="prose-link" href="https://app.yourdomain.com/dashboard"><code spellcheck="false">https://app.yourdomain.com/dashboard</code></a></li><li>Contains / Path match: <code spellcheck="false">/settings/billing</code></li><li>Pattern: <code spellcheck="false">/projects/:projectId/overview</code></li><li>Query rules (optional): <code spellcheck="false">?plan=premium</code></li></ul></li></ul>Tips:<ul><li>Prefer path‑based rules over fragile query parameters</li><li>Keep patterns specific enough to avoid firing on unintended pages</li></ul><h2>Step 3: Add steps that continue across pages</h2>Add your steps in the target order they should appear. For each step:<ol><li>Select the step type:<ul><li>Posts (modal): Introduce a screen or concept</li><li>Pointer (tooltip): Highlight a specific UI element</li><li>Video Pointer: Add short demos where useful</li></ul></li><li>Set the URL rule for this step’s page</li><li>For pointer steps, set a reliable selector (e.g., <code spellcheck="false">#save-button</code>, <code spellcheck="false">[data-uo="invite-btn"]</code>)</li><li>Write concise copy with a clear action (what/why/next)</li><li>Choose navigation behavior:<ul><li>Next moves within the page</li><li>Continue on next page (described below)</li></ul></li></ol><h2>Cross‑page navigation options</h2>There are three supported ways to progress a tour across pages. Pick the one that matches your UX and technical setup:<ol><li>Guide users to click in‑app navigation (recommended)<ul><li>Use a pointer on the nav/link/button that routes to the next screen</li><li>Copy: explain what they should click and why</li><li>Configuration: keep the current step on the source page; set the next step's URL rule to the destination page so the tour resumes after navigation</li></ul></li><li>Allow users to reach the next page later<ul><li>Use a modal (post) to educate and let users continue whenever they naturally get to the destination page</li><li>Configuration: enable frequency "until completed"; set the next step with the destination URL rule—when the user eventually visits that page, the tour resumes there</li></ul></li><li>Open the next page from the tour's Next button<ul><li>Use a CTA on the step (e.g., "Go to Billing") that programmatically navigates to the destination URL</li><li>Configuration: toggle "Continue on next page"; set the next step's URL rule for the destination page so the tour resumes immediately after navigation</li></ul></li></ol><h2>Step 4: Enable "Continue on next page"</h2>For steps that require navigation to a new page (e.g., user clicks a link or button that routes elsewhere):<ol><li>Toggle "Continue on next page" on the current step</li><li>In the next step, set the URL rule for the destination page</li><li>If using a pointer, ensure its selector exists on that destination page</li></ol>How it works:<ul><li>When the user clicks Next (or a CTA you configure), the tour waits for the destination URL to match the next step’s rule, then resumes automatically</li><li>If the user navigates manually to the correct page, the tour also resumes there</li></ul><h2>Step 5: SPA vs MPA considerations</h2><ul><li>SPA (client‑side routing): Ensure your router updates the URL (e.g., Next.js/React Router). The tour listens for URL changes</li><li>MPA (full reloads): The snippet must be present on every page. The tour resumes after reload when the URL matches the next step</li></ul><h2>Step 6: Timing &amp; readiness</h2>Use these options to avoid flicker or missing targets:<ul><li>Step delay: Add a short delay (e.g., 300–600ms) before showing a pointer</li><li>Element readiness: Enable "Wait for element" so the step appears only after the selector is present</li><li>Retry window: Keep retries short to avoid user frustration, but long enough for slower screens</li></ul><h2>Step 8: Test end‑to‑end</h2>Use Preview and a test account to validate:<ul><li>Steps appear on the correct pages only</li><li>Cross‑page transitions resume reliably (both SPA and MPA paths)</li><li>Pointer selectors resolve correctly after navigation</li><li>Completion triggers fire at the final step</li></ul><h2>Troubleshooting</h2><ul><li>Step doesn’t show after navigation: Confirm the next step’s URL rule and that the app updates the URL</li><li>Pointer fails to attach: Use a more stable selector (prefer ids or <code spellcheck="false">data-*</code> attributes). Avoid index‑based selectors</li><li>Tour appears on the wrong page: Narrow the URL pattern (avoid overly broad <code spellcheck="false">contains</code> rules)</li><li>Tour restarts from the beginning: Ensure frequency is set to "until completed" and avoid clearing local/session storage during route changes</li></ul><h2>Best Practices</h2><ol><li>Keep each step focused on a single action</li><li>Use modals (posts) to introduce a new page; pointers to drive specific clicks</li><li>Prefer <code spellcheck="false">data-uo</code> attributes for long‑term stable selectors</li><li>Minimize cross‑page hops—2–3 pages is ideal for completion</li><li>Always provide an exit; respect user choice to skip</li></ol><h2>Go‑live checklist and common mistakes</h2><ul><li>Ensure the Userorbit snippet is installed on all pages included in the tour</li><li>Decide the exact flow and the pages/URLs you want to cover</li><li>Identify stable selectors for highlighted elements (ids, data‑attributes)</li></ul><h2>Wrapping Up</h2>Multi‑page tours help users succeed in real flows. With URL rules, element readiness, and cross‑page continuation enabled, your tour will feel seamless across screens. Iterate using analytics to improve completion and time‑to‑value.Need more help? <a target="_blank" rel="noopener noreferrer nofollow" class="prose-link" href="https://userorbit.com/contact">contact our support team</a> or click the chat bubble below.

How to create a Multi‑page Product Tour on Userorbit?

Default Theme

Modern Theme

Dark

Userorbit is a customer communication and engagement platform
that makes product adoption easy.

Userorbit

Create tours, types, visual builder, and beacons