Tourify - Product Onboarding Made Simple

Getting Started

Tourify makes it incredibly easy to create engaging product tours that guide your users through your application. In just a few minutes, you'll have a fully functional onboarding experience up and running.

Quick Overview

1.Sign up and access your dashboard
2.Create a tour with a name and description
3.Add at least 5 steps with CSS selectors
4.Copy the generated script tag
5.Paste it into your website's HTML

Dashboard Setup

Your dashboard is mission control for all your product tours. Here's where you'll create, manage, and monitor the performance of your onboarding experiences.

Create Tours

Design multi-step walkthroughs with our intuitive interface

Configure Steps

Set up each step with selectors, positions, and content

Get Your Script

Generate a unique embed code for each tour

Track Analytics

Monitor completion rates and user engagement

Go to Dashboard

Creating Your First Tour

Every tour in Tourify consists of two main components: tour metadata and individual steps. Let's break down how to set up each one.

Tour Properties

Name

A descriptive title for your tour (e.g., "Welcome Tour", "Feature Discovery", "New User Onboarding"). This helps you organize multiple tours in your dashboard.

Description

A brief explanation of what this tour covers. This is for your internal reference and won't be shown to end users unless you choose to display it.

Example Tour Configuration

// Tour Details

Name: "Welcome to Your Dashboard"

Description: "A quick walkthrough of key features"

Steps: 5 (minimum required)

Configuring Steps

Each tour must contain at least 5 steps. Steps are the individual tooltips or modals that appear to guide users through your product. Here's what you can configure for each step:

1. Selector (Required)

The most critical property of any step. This tells Tourify which element on your page to highlight and attach the tooltip to. Selectors use standard CSS syntax.

// ID Selector

#signup-button

// Class Selector

.dashboard-header

// More Specific Selector

.sidebar .nav-item:first-child

⚠️Important: Make sure these selectors exist in your codebase before launching the tour. If Tourify can't find the element, that step will be skipped.

2. Position (Optional)

Control where the tooltip appears relative to the selected element. Choose from:

top

bottom

left

right

If not specified, Tourify will automatically choose the best position based on available screen space.

3. Title

A short, attention-grabbing headline for this step.

"Welcome to your dashboard!"

4. Description (Recommended)

The main content of your tooltip. Explain what this element does and why it matters. Keep it concise—2-3 sentences work best.

"This is your main navigation. Click any menu item to explore different sections of your account."

Complete Step Example

{
                      "selector": "#create-tour-button",
                      "position": "bottom",
                      "title": "Create Your First Tour",
                      "description": "Click here to start building your first product tour. You'll be guided through each step of the process."
                }

Understanding Selectors

Selectors are the foundation of your tours. They tell Tourify exactly which elements to highlight. Here's everything you need to know to use them effectively.

How to Find Selectors

1.
Open Developer Tools
Right-click any element and select "Inspect" (or press F12)
2.
Look for ID or Class
Find id="..." or class="..." attributes
3.
Format for Tourify
Use # for IDs,. for classes

Good Selectors

#user-profile
.dashboard-nav
#settings-button
.card-header h2

❌Avoid These

div (too generic)
.btn (too common)
#random-123 (non-existent)
body > div > div (too fragile)

Installation

Once you've created your tour in the dashboard, you'll receive a unique script tag. Adding it to your website takes just seconds.

Step 1: Copy Your Script Tag

After creating your tour, the dashboard will generate a unique embed code that looks like this:

HTML

<script 
  src="https://cdn.tourify.app/embed.js" 
  data-tour-id="your-unique-tour-id"
></script>

Step 2: Add to Your HTML

Paste the script tag before the closing </body> tag in your HTML file. This ensures all page elements are loaded before the tour starts.

<!DOCTYPE html>
<html>
<head>
  <title>Your App</title>
</head>
<body>
  
  <!-- Your app content -->
  
  <!-- Add Tourify script here -->
  <script 
    src="https://cdn.tourify.app/embed.js" 
    data-tour-id="your-unique-tour-id"
  ></script>
</body>
</html>

That's it!

Your tour will automatically start when users visit your page for the first time. The script is lightweight (less than 30KB) and won't impact your page load speed.

Real-World Examples

Here are some common tour scenarios to inspire your implementation:

Welcome Tour for New Users

// Tour: "Welcome to Dashboard"
Steps:
1. #user-avatar → "This is your profile"
2. .sidebar-menu → "Navigate through sections"
3. #create-button → "Create your first item"
4. .notification-bell → "Stay updated"
5. #settings-link → "Customize your experience"

Feature Announcement Tour

// Tour: "New Analytics Dashboard"
Steps:
1. .analytics-tab → "Check out our new analytics"
2. #chart-container → "Visual insights"
3. .export-button → "Export your data"
4. .date-filter → "Filter by date range"
5. .share-button → "Share with your team"

API Reference

Advanced users can programmatically control tours using the Tourify JavaScript API.

Get Started with Tourify