Skip to content

Conditional Tour

In this example, we'll demonstrate how to conditionally show tours based on user roles, account age, or other application logic. This is useful for targeting specific user segments with different onboarding experiences.

Step 1: Role-Based Tour

Show different tours based on the user's role:

php
<?php

namespace App\Http\Controllers;

use RealRashid\LaravelDriverJs\Facades\DriverJs;

class HomeController extends Controller
{
    public function index()
    {
        $tourHtml = '';

        if (auth()->check()) {
            $tourHtml = match (auth()->user()->role) {
                'admin' => $this->getAdminTour(),
                'manager' => $this->getManagerTour(),
                'user' => $this->getUserTour(),
                default => '',
            };
        }

        return view('home', compact('tourHtml'));
    }

    protected function getAdminTour(): string
    {
        if (DriverJs::tourCompleted('admin-onboarding')) {
            return '';
        }

        return DriverJs::tour('admin-onboarding')
            ->showProgress()
            ->step('#admin-panel', 'Admin Panel', 'Access all administrative features from here.')
            ->step('#user-management', 'User Management', 'Manage users, roles, and permissions.')
            ->step('#system-settings', 'System Settings', 'Configure application-wide settings.')
            ->render();
    }

    protected function getManagerTour(): string
    {
        if (DriverJs::tourCompleted('manager-onboarding')) {
            return '';
        }

        return DriverJs::tour('manager-onboarding')
            ->showProgress()
            ->step('#team-dashboard', 'Team Dashboard', 'Monitor your team performance and metrics.')
            ->step('#reports', 'Reports', 'Generate and view detailed reports.')
            ->render();
    }

    protected function getUserTour(): string
    {
        if (DriverJs::tourCompleted('user-onboarding')) {
            return '';
        }

        return DriverJs::tour('user-onboarding')
            ->showProgress()
            ->step('#my-tasks', 'My Tasks', 'View and manage your assigned tasks.')
            ->step('#calendar', 'Calendar', 'Keep track of your schedule and deadlines.')
            ->render();
    }
}

Step 2: Time-Based Conditional Tour

Show a tour only for new users (registered within the last 7 days):

php
public function dashboard()
{
    $tourHtml = '';

    $isNewUser = auth()->check()
        && auth()->user()->created_at->diffInDays(now()) <= 7;

    if ($isNewUser && ! DriverJs::tourCompleted('new-user-tour')) {
        $tourHtml = DriverJs::tour('new-user-tour')
            ->showProgress()
            ->overlayColor('#1e3a5f')
            ->overlayOpacity(0.8)
            ->step('#header', 'Welcome, New User!', 'We noticed you just joined. Let us show you around!')
            ->step('#get-started', 'Getting Started', 'Complete these steps to set up your account.')
            ->step('#help-center', 'Help Center', 'Find answers to common questions here.')
            ->render();
    }

    return view('dashboard', compact('tourHtml'));
}

Step 3: Feature-Flag Controlled Tour

Only show the tour if a feature flag is enabled:

php
public function index()
{
    $tourHtml = '';

    if (Feature::active('new-ui-tour') && ! DriverJs::tourCompleted('new-ui-tour')) {
        $tourHtml = DriverJs::tour('new-ui-tour')
            ->showProgress()
            ->step('#new-layout', 'New Layout', "We've updated our interface! Here's what changed.")
            ->step('#new-sidebar', 'New Sidebar', 'The sidebar now supports drag-and-drop customization.')
            ->render();
    }

    return view('index', compact('tourHtml'));
}

Step 4: Multiple Tours on One Page

You can render multiple independent tours on the same page:

php
public function dashboard()
{
    $tours = [];

    // Onboarding tour for new users
    if (! DriverJs::tourCompleted('onboarding')) {
        $tours[] = DriverJs::tour('onboarding')
            ->showProgress()
            ->step('#header', 'Welcome!')
            ->step('#nav', 'Navigation')
            ->render();
    }

    // Feature announcement tour (separate tracking)
    if (! DriverJs::tourCompleted('export-feature-v2')) {
        $tours[] = DriverJs::tour('export-feature-v2')
            ->step('#export-button', 'New Export Feature!', 'You can now export to PDF and Excel.')
            ->showButtons(['close'])
            ->render();
    }

    $tourHtml = implode('', $tours);

    return view('dashboard', compact('tourHtml'));
}

That's it! You're now equipped to create conditional tours based on any application logic using Laravel Driver.js.