Tourial Product Documentation
  • 👋Welcome to Tourial!
    • Planning Tours with AI
    • Building Tours with AI
  • 🏁Best Practices & Launching
    • Tour Building Best Practices
    • Before you Launch Check-List
  • 🏗️Building
    • Interactive Tours
      • Record
        • Chrome Extension
          • Downloading the Chrome Extension
          • Troubleshooting
            • Full page screenshot not working
        • Importing Media
      • Edit
        • Interactive Tools
          • Advanced Features
        • Timed Tools
        • Video Trimming
      • Branding
      • Mobile-Optimization
      • HTML Demos (Experimental)
        • Chrome Extension (Capture)
        • Building & Editing
    • Tour Centers
      • Interactive Topics
      • Editing Styles
      • Navigation & Format
      • Supported Content in Tour Centers
        • Adding Google Slides to your Tour Center
      • Upfront Prompts
      • Mobile Optimization
  • 🌎Sharing
    • Embedding Demos
      • Embedding Interactive Demos
        • Lightbox Embed
        • Website Embed
      • Embedding Tour Centers
      • Updating your Embed Code when changes are made
    • Tour Link Sharing
    • Tour Center Link Sharing
    • Share Links
      • How to create a share link
  • GIF Generation
  • 🔢Analytics
    • Tour Analytics
    • Tour Center Analytics
  • ⚙️Admin & Settings
    • Inviting your team
    • Setting your Account Branding
    • Workspaces
      • Create & Add Users to a Workspace
    • User Management
    • White Label Your Account & Content
    • Tourial Forms
      • Form Fails
      • Hyperlinking in Tourial Forms
  • ➕Integrations
    • HubSpot
      • Instant Scheduling with HubSpot Scheduler
      • Tour Engagement Data
        • Slack Notifications with HubSpot
        • Triggering HubSpot Workflows
        • Pushing Engagement Data from HubSpot to SFDC
      • HubSpot Reporting Setup
      • TourPlayer Engagement Data
      • Lead Forms with HubSpot
      • How do I hide the chatbot?
      • How do I hide the Cookie Banner?
      • FAQs
    • Marketo
      • Lead Forms with Marketo
      • Engagement Data with Marketo
        • Slack Notifications with Marketo
        • Approving Marketo Custom Activities
      • Marketo Reporting Setup
    • Partners
      • G2
      • TrustRadius
    • Pardot
      • Lead Forms in Pardot
      • Engagement Data with Pardot
      • How to Create a Pardot Dashboard to Measure Tourial's Impact
    • Salesforce
      • Leads Forms in Salesforce
      • Engagement Data with Salesforce
        • Add Tourial Engagement to record's Lightning page
        • Add Tourial Engagement as Salesforce tab
        • Create an SFDC report using Engagement Data
      • How to Create a Salesforce Dashboard to Measure Tourial's Impact
    • Zapier
    • Calendly
    • Chili Piper
    • Cross-Frame Events
      • Tours
      • Tour Centers
    • Slack
  • Security
    • SSO (Single Sign-on)
    • Uptime Reports
    • Form Compliance
Powered by GitBook
On this page
  • Step 1: Enable Mobile
  • Step 2: Make Optimizations
  • Step 3: Finishing Touches

Was this helpful?

  1. Building
  2. Interactive Tours

Mobile-Optimization

This article walks you through how to optimize your interactive tours for mobile to ensure flawless experiences across the board.

PreviousBrandingNextHTML Demos (Experimental)

Last updated 8 months ago

Was this helpful?

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!

🏗️