Documentation

Build With Confidence

Everything you need to integrate Tourify seamlessly into your application

Quick Start

Get up and running in 5 minutes

API Reference

Complete API documentation

Guides

Step-by-step tutorials

Quick Start

Get Started in 3 Minutes

Follow these simple steps to integrate Tourify into your application

Installation

Add Tourify to your project

1npm install @tourify/react
2# or
3yarn add @tourify/react
4# or
5pnpm add @tourify/react

Configuration

Set up your tour configuration

1import { TourProvider } from '@tourify/react';
2
3function App() {
4  return (
5    <TourProvider
6      apiKey="your-api-key"
7      theme="dark"
8      showProgress={true}
9    >
10      {/* Your app */}
11    </TourProvider>
12  );
13}

Add Steps

Define your tour steps

1import { TourStep } from '@tourify/react';
2
3function App() {
4  return (
5    <>
6      <TourStep
7        stepId="welcome"
8        title="Welcome!"
9        content="Let's explore the app together"
10        target="#get-started"
11      >
12        <button id="get-started">
13          Get Started
14        </button>
15      </TourStep>
16      
17      {/* More steps */}
18    </>
19  );
20}

Need Help?

Our team is here to help you get started. Join our community or contact support.

API Reference

Complete API Documentation

Everything you need to integrate and customize Tourify

POST/api/tours

Create Tour

Create a new onboarding tour

Example Request

fetch('https://api.tourify.com/api/tours', {
  method: 'POST',
  headers: {
    'Authorization': 'Bearer YOUR_API_KEY',
    'Content-Type': 'application/json'
  }
})

GET/api/tours/{id}

Get Tour

Retrieve tour details and steps

Example Request

fetch('https://api.tourify.com/api/tours/{id}', {
  method: 'GET',
  headers: {
    'Authorization': 'Bearer YOUR_API_KEY',
    'Content-Type': 'application/json'
  }
})

PUT/api/tours/{id}

Update Tour

Update tour configuration

Example Request

fetch('https://api.tourify.com/api/tours/{id}', {
  method: 'PUT',
  headers: {
    'Authorization': 'Bearer YOUR_API_KEY',
    'Content-Type': 'application/json'
  }
})

DELETE/api/tours/{id}

Delete Tour

Remove a tour permanently

Example Request

fetch('https://api.tourify.com/api/tours/{id}', {
  method: 'DELETE',
  headers: {
    'Authorization': 'Bearer YOUR_API_KEY',
    'Content-Type': 'application/json'
  }
})

POST/api/analytics

Track Event

Send analytics data

Example Request

fetch('https://api.tourify.com/api/analytics', {
  method: 'POST',
  headers: {
    'Authorization': 'Bearer YOUR_API_KEY',
    'Content-Type': 'application/json'
  }
})

GET/api/users/{id}/tours

User Tours

Get tours for specific user

Example Request

fetch('https://api.tourify.com/api/users/{id}/tours', {
  method: 'GET',
  headers: {
    'Authorization': 'Bearer YOUR_API_KEY',
    'Content-Type': 'application/json'
  }
})

Live Examples

Real-World Implementations

See how top companies use Tourify to onboard millions of users

E-commerce Onboarding

Guide users through your store with product discovery tours

Example

// E-commerce product tour
const tour = new Tourify({
  steps: [
    {
      id: 'welcome',
      title: 'Welcome to Our Store!',
      content: 'Discover amazing products with our guided tour',
      target: '.hero-section',
      position: 'bottom'
    },
    {
      id: 'categories',
      title: 'Browse Categories',
      content: 'Explore products by category',
      target: '.category-nav',
      position: 'right'
    },
    {
      id: 'search',
      title: 'Smart Search',
      content: 'Find exactly what you need',
      target: '.search-bar',
      position: 'bottom'
    },
    {
      id: 'cart',
      title: 'Easy Checkout',
      content: 'Add items and checkout in seconds',
      target: '.cart-button',
      position: 'left'
    }
  ],
  theme: {
    primaryColor: '#f59e0b',
    backgroundColor: '#1a1a1a'
  }
});

SaaS Product Tour

Onboard users to complex SaaS applications

Example

// SaaS application onboarding
const saasTour = {
  steps: [
    {
      id: 'dashboard',
      title: 'Welcome to Your Dashboard',
      content: 'Everything you need in one place',
      target: '#main-dashboard',
      position: 'center',
      action: () => console.log('Dashboard viewed')
    },
    {
      id: 'analytics',
      title: 'Real-time Analytics',
      content: 'Track your performance metrics',
      target: '.analytics-widget',
      position: 'right',
      action: () => loadAnalytics()
    },
    {
      id: 'team',
      title: 'Team Collaboration',
      content: 'Invite team members and collaborate',
      target: '.team-section',
      position: 'left',
      action: () => showTeamModal()
    },
    {
      id: 'settings',
      title: 'Customize Settings',
      content: 'Tailor the app to your needs',
      target: '.settings-menu',
      position: 'top',
      action: () => openSettings()
    }
  ],
  onComplete: () => trackTourCompletion('saas-onboarding')
};

Mobile App Tour

Native-like onboarding for mobile web apps

Example

// Mobile-optimized tour
const mobileTour = {
  steps: [
    {
      id: 'welcome-mobile',
      title: 'Welcome! 👋',
      content: 'Swipe to learn about our app features',
      target: 'body',
      position: 'center',
      mobile: true
    },
    {
      id: 'navigation',
      title: 'Easy Navigation',
      content: 'Tap the menu to explore',
      target: '.mobile-nav',
      position: 'bottom',
      mobile: true,
      arrow: false
    },
    {
      id: 'actions',
      title: 'Quick Actions',
      content: 'Perform actions with single taps',
      target: '.action-buttons',
      position: 'top',
      mobile: true
    }
  ],
  mobileConfig: {
    tapOutsideToClose: true,
    showBackdrop: true,
    borderRadius: '16px'
  }
};

Framework Integration

Works seamlessly with your favorite frontend framework

⚛️

React

Full React component library with hooks

Official Package

import { TourProvider, useTour } from '@tourify/react';

function App() {
  const { start, next, previous } = useTour();
  
  return (
    <TourProvider steps={steps}>
      <button onClick={start}>Start Tour</button>
    </TourProvider>
  );
}

Features