Laravel Driver.js

Appearance

Onboarding Tour ​

In this example, we'll demonstrate how to create a comprehensive onboarding tour for new users of your Laravel application. This is the most common use case for Laravel Driver.js.

Step 1: Define the Tour in a Controller ​

php
<?php

namespace App\Http\Controllers;

use Illuminate\Http\Request;
use RealRashid\LaravelDriverJs\Facades\DriverJs;

class TourController extends Controller
{
    public function dashboard()
    {
        $tourHtml = '';

        if (! DriverJs::tourCompleted('onboarding')) {
            $tourHtml = DriverJs::tour('onboarding')
                ->showProgress()
                ->progressText('Step {{current}} of {{total}}')
                ->nextBtnText('Continue →')
                ->prevBtnText('← Go Back')
                ->doneBtnText('Get Started!')
                ->smoothScroll()
                ->step('#welcome-banner', 'Welcome to Your Dashboard!', 'This is your central hub for managing everything. Let us show you around.')
                ->step('#main-nav', 'Navigation Menu', 'Use these links to navigate between different sections of the application.')
                ->step('#quick-actions', 'Quick Actions', 'Access your most frequently used features right from here.')
                ->step('#notifications', 'Notifications', 'Stay updated with the latest alerts and messages.')
                ->step('#user-profile', 'Your Profile', 'Manage your account settings and preferences from here.')
                ->step('#help-button', 'Need Help?', "Click this button anytime you need assistance. That's all — you're ready to go!")
                ->render();
        }

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

Step 2: Include in Your View ​

blade
@extends('layouts.app')

@section('content')
    <div id="welcome-banner" class="bg-blue-500 text-white p-6 rounded-lg mb-6">
        <h1 class="text-2xl font-bold">Welcome to Your Dashboard</h1>
        <p>Manage everything from one place.</p>
    </div>

    <nav id="main-nav" class="flex space-x-4 mb-6">
        <a href="#" class="text-blue-600 hover:underline">Home</a>
        <a href="#" class="text-blue-600 hover:underline">Reports</a>
        <a href="#" class="text-blue-600 hover:underline">Settings</a>
    </nav>

    <div id="quick-actions" class="grid grid-cols-3 gap-4 mb-6">
        <!-- Quick action cards -->
    </div>

    <div id="notifications" class="mb-6">
        <!-- Notifications panel -->
    </div>

    <div class="flex justify-between items-center">
        <div id="user-profile">
            <!-- User profile section -->
        </div>
        <button id="help-button" class="bg-gray-200 px-4 py-2 rounded">
            Help
        </button>
    </div>

    {{-- Include the tour --}}
    {!! $tourHtml !!}
@endsection

Step 3: Include Assets in Your Layout ​

blade
<head>
    <!-- Your other head content -->
    @driverjsAssets
</head>

Step 4: Route ​

php
use App\Http\Controllers\TourController;

Route::get('/dashboard', [TourController::class, 'dashboard'])->name('dashboard');

How It Works ​

  1. When a user visits the dashboard, the controller checks if the 'onboarding' tour has been completed.
  2. If not completed, the tour is built with 6 steps and rendered as HTML.
  3. The tour automatically starts when the page loads, guiding the user through each section.
  4. When the user completes (or closes) the tour, an AJAX request marks it as completed.
  5. On subsequent visits, the tour is not shown again.

You can also provide a "Restart Tour" button:

blade
<form action="{{ route('tour.restart', 'onboarding') }}" method="POST">
    @csrf
    <button type="submit">Restart Tour</button>
</form>
php
public function restart($tour)
{
    DriverJs::tour($tour)->resetCompletion();
    return redirect()->back();
}

That's it! You now have a fully functional onboarding tour for your Laravel application.