Laravel Driver.js

Appearance

Get Started with TourDeck ​

TourDeck is a self-contained Laravel 12 application that demonstrates every mode laravel-driverjs supports. It lives in its own repository — clone it on its own; you do not need a copy of the package repository.

Prerequisites ​

Step 1 — Clone the Repository ​

bash
git clone https://github.com/realrashid/tour-deck.git
cd tour-deck

Step 2 — Install Dependencies ​

bash
composer install

This pulls in Laravel and realrashid/laravel-driverjs.

Working on the package itself?

If you have the laravel-driverjs repository checked out locally and want TourDeck to use it, keep the two side by side and TourDeck's composer.json path repository will symlink your working copy into vendor/:

your-projects/
├── packages/
│   └── laravel-driverjs/
└── tour-deck/

Step 3 — Set Up Environment Variables ​

Copy the example environment file and open it for editing:

bash
cp .env.example .env

The defaults in .env.example work out of the box for local development. Sessions are stored on disk (no database required).

Step 4 — Generate Application Key ​

bash
php artisan key:generate

Step 5 — Start the Server ​

bash
php artisan serve

Open http://localhost:8000 in your browser.

Step 6 — Explore the Demo ​

The dashboard includes four interactive tour demonstrations. Click the buttons in the Tour Demonstrations panel to trigger each one.

DemoTour TypeHow It Works
Onboarding TourMulti-step tracked tourAuto-starts on first visit. Tracked via session so it won't repeat.
Highlight StatsSingle-element highlightManually triggered. Uses highlight() with no navigation buttons.
Feature ModalCentred modalManually triggered. Uses modal() with no element target.
Confirm-Exit TourTour with exit guardStepHooks::confirmBeforeDestroy() asks before closing the tour.

How It Works ​

Tracked Onboarding Tour — View Composer Pattern ​

The welcome tour is configured in app/Providers/AppServiceProvider.php using Laravel's View Composer. The composer runs for every request that renders the dashboard view and, if the tour hasn't been completed yet, attaches five steps to the singleton:

php
use Illuminate\Support\Facades\View;

public function boot(): void
{
    View::composer('dashboard', function () {
        $driver = app('driverjs');

        if (! $driver->tourCompleted('welcome-tour')) {
            $driver->tour('welcome-tour')
                ->showProgress()
                ->progressText('Step {{current}} of {{total}}')
                ->step('#dashboard-header', 'Welcome to TourDeck! 👋',
                    'This demo showcases <strong>laravel-driverjs</strong>.')
                ->step('#stats-grid',        'Key Metrics',
                    'Track your essential metrics at a glance.')
                ->step('#projects-section',  'Projects',
                    'Monitor all active projects and their current status.')
                ->step('#activity-feed',     'Activity Feed',
                    'See recent events in chronological order.', ['side' => 'left'])
                ->step('#tour-controls',     'Tour Controls',
                    'Explore all tour types supported by this package!', ['side' => 'top']);
        }
    });
}

In the dashboard.blade.php view, the @driverjsTour directive renders and auto-starts the tour if it has not been completed:

blade
@driverjsTour('welcome-tour')

Because the View Composer has already set up the singleton by the time the directive fires, the tour renders with all five steps. After the user finishes, the package marks it as complete in the session — so the next page load skips the tour entirely.

Manually Triggered Tours ​

Highlight, modal, and confirm-exit tours are triggered by JavaScript functions defined at the bottom of dashboard.blade.php using toJavaScript():

blade
<script>
function triggerHighlight() {
    {!! app('driverjs')
        ->highlight('#stats-grid', 'Key Metrics',
            'Your essential dashboard metrics.')
        ->toJavaScript() !!}
}

function triggerModal() {
    {!! app('driverjs')
        ->modal('Feature Showcase ✨',
            'This centered modal uses the <strong>modal()</strong> method.')
        ->toJavaScript() !!}
}

function triggerConfirmTour() {
    {!! app('driverjs')
        ->tour('confirm-tour')
        ->onDestroyStarted(
            \RealRashid\LaravelDriverJs\Support\StepHooks::confirmBeforeDestroy(
                'Exit this guided tour?'
            )
        )
        ->step('#settings-section',  'Settings', 'Configure your app preferences here.')
        ->step('#feature-showcase',  'New Features', 'Explore the latest capabilities.')
        ->step('#stats-grid',        'Performance', 'Review your key metrics.')
        ->toJavaScript() !!}
}
</script>

Each function is bound to a button's onclick attribute in the Tour Demonstrations panel.

Resetting Tour Completion ​

A reset button at the top of the dashboard page posts to /reset-all-tours, which calls resetCompletion() on each tracked tour name:

php
public function resetAllTours(): RedirectResponse
{
    foreach (['welcome-tour'] as $tourName) {
        app('driverjs')->tour($tourName)->resetCompletion();
    }

    return redirect()->route('dashboard')
        ->with('success', 'All tours have been reset.');
}

After redirecting back, the View Composer re-attaches the welcome tour steps and @driverjsTour renders it again on the very next page load.