Guided Tours

The admin panel includes Driver.js for interactive guided tours that onboard users to the interface.

How It Works

Driver.js is bundled via Vite (resources/js/filament-tour.js) and loaded on every admin page through a render hook in AdminPanelProvider. An Alpine.js component (filamentTour) exposes a start(tourName) method that any Filament page can trigger from a header action button.

Tour definitions live in resources/js/filament-tour.js as plain JavaScript objects under window.__filamentTours. Steps that target missing DOM elements are automatically skipped, so tours degrade gracefully if the UI changes.

Key Files

File	Purpose
resources/js/filament-tour.js	Tour definitions and Alpine component
resources/views/filament/scripts/tour.blade.php	Blade partial that loads the JS via @vite
app/Providers/Filament/AdminPanelProvider.php	Registers the Blade partial via HEAD_END render hook

Adding a Tour to a Page

1. Define the tour in resources/js/filament-tour.js:

window.__filamentTours['my-tour'] = {
    showProgress: true,
    steps: [
        { popover: { title: 'Welcome', description: 'Let us show you around.' } },
        { element: '.some-selector', popover: { title: 'Feature', description: 'This does X.' } },
    ],
};

2. Add a header action button to the Filament page:

protected function getHeaderActions(): array
{
    return [
        Action::make('startTour')
            ->label('Start Tour')
            ->icon('heroicon-o-question-mark-circle')
            ->color('gray')
            ->extraAttributes([
                'x-data' => 'filamentTour',
                'x-on:click.stop' => "start('my-tour')",
            ]),
    ];
}

3. Rebuild assets: sail npm run build

Future Possibilities

• Per-page tours explaining resource fields and actions
• Role-based tours (different tours for admin vs supplier-manager)
• Tour completion tracking via localStorage or database
• Onboarding flow that triggers on first login