Laravel Driver.js

Appearance

Dashboard Tour ​

In this example, we'll create a comprehensive dashboard tour with custom overlay styling, positioned popovers, and a welcome modal as the first step.

Step 1: Define the Tour ​

php
<?php

namespace App\Http\Controllers;

use RealRashid\LaravelDriverJs\Facades\DriverJs;
use RealRashid\LaravelDriverJs\Support\StepHooks;

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

        if (! DriverJs::tourCompleted('dashboard-tour')) {
            $tourHtml = DriverJs::tour('dashboard-tour')
                ->overlayColor('#0f172a')
                ->overlayOpacity(0.85)
                ->stagePadding(12)
                ->stageRadius(8)
                ->smoothScroll()
                ->showProgress()
                ->progressText('{{current}} of {{total}}')
                ->nextBtnText('Next →')
                ->prevBtnText('← Previous')
                ->doneBtnText('Start Using Dashboard')
                ->popoverClass('dashboard-tour-popover')
                ->onDestroyStarted(StepHooks::confirmBeforeDestroy('Exit the tour? You can restart it later from Settings.'))
                // Step 1: Centered welcome modal (no element)
                ->addStep()
                    ->title('Welcome to Your Dashboard! 🎉')
                    ->description("We've redesigned your dashboard to be more powerful and intuitive. Let us take you on a quick tour of what's new.")
                // Step 2: Sidebar
                ->addStep('#sidebar')
                    ->title('Sidebar Navigation')
                    ->description('All your main sections are accessible from here. The sidebar collapses on mobile for more screen space.')
                    ->side('right')
                    ->alignStart()
                // Step 3: Stats cards
                ->addStep('#stats-cards')
                    ->title('Key Metrics')
                    ->description('See your most important KPIs at a glance. Click any card to drill down into the details.')
                    ->side('bottom')
                    ->alignCenter()
                // Step 4: Chart
                ->addStep('#revenue-chart')
                    ->title('Revenue Chart')
                    ->description('Track your revenue trends over time. Use the date picker to customize the range.')
                    ->side('top')
                    ->alignCenter()
                // Step 5: Recent activity
                ->addStep('#recent-activity')
                    ->title('Recent Activity')
                    ->description('Stay on top of the latest events in your account. New activities appear here in real time.')
                    ->side('left')
                    ->alignStart()
                // Step 6: Settings
                ->addStep('#settings-link')
                    ->title('Settings & Preferences')
                    ->description("Customize your dashboard, manage notifications, and configure your account. You can also restart this tour from here.")
                    ->side('right')
                    ->alignEnd()
                ->render();
        }

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

Step 2: Custom CSS for the Popover ​

Add custom styles in your CSS file to style the dashboard-tour-popover class:

css
.dashboard-tour-popover {
    border: 2px solid #2563eb;
    box-shadow: 0 4px 20px rgba(37, 99, 235, 0.3);
}

.dashboard-tour-popover .driver-popover-title {
    color: #1e3a5f;
    font-weight: 700;
}

.dashboard-tour-popover .driver-popover-next-btn {
    background-color: #2563eb;
    color: white;
    border-color: #2563eb;
    border-radius: 6px;
    padding: 5px 12px;
}

.dashboard-tour-popover .driver-popover-close-btn {
    color: #64748b;
}

Step 3: View ​

blade
@extends('layouts.app')

@section('content')
    <div class="flex">
        <aside id="sidebar" class="w-64 bg-gray-100 p-4">
            <!-- Sidebar content -->
        </aside>

        <main class="flex-1 p-6">
            <div id="stats-cards" class="grid grid-cols-4 gap-4 mb-6">
                <!-- Stats cards -->
            </div>

            <div id="revenue-chart" class="mb-6">
                <!-- Chart -->
            </div>

            <div id="recent-activity">
                <!-- Activity feed -->
            </div>
        </main>
    </div>

    <a id="settings-link" href="{{ route('settings') }}" class="fixed bottom-4 right-4">
        Settings
    </a>

    {!! $tourHtml !!}
@endsection

Step 4: Route ​

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

This example demonstrates several advanced features:

  • Centered modal as the first step (no element selector)
  • Custom overlay color and opacity
  • Positioned popovers with different sides and alignments for each step
  • Custom popover CSS class for branded styling
  • Confirm before exit using the StepHooks helper
  • Tour completion tracking to only show the tour once

That's it! You now have a polished, branded dashboard tour for your Laravel application.