README

amjadiqbal/laravel-driver-js

Professional Laravel wrapper for Driver.js (v1.3+). Easily create interactive product tours, feature highlights, and user onboarding flows using a fluent PHP API.

• SEO: Laravel product tours, interactive onboarding, feature highlights, guided walkthroughs, Driver.js for Laravel
• Website: https://driverjs.com

Issues • Install • Usage • API • Config

Requirements

• PHP ^8.2
• Laravel 10 or 11
• Driver.js v1.3+

Installation

composer require amjadiqbal/laravel-driver-js
php artisan vendor:publish --tag=driver-js-config
php artisan vendor:publish --tag=driver-js-views

Features

• Fluent PHP API mirroring Driver.js options and actions
• Blade component for quick start
• Config publishing with sensible defaults and CDN control
• Callback wiring from PHP config to global JS functions
• Pest tests via Orchestra Testbench
• GitHub Actions CI and Laravel Pint code style

Usage

Fluent API

use AmjadIqbal\DriverJS\Facades\Driver;

$tour = Driver::make()
    ->allowClose(true)
    ->overlayColor('rgba(0,0,0,0.6)')
    ->addStep('#selector', 'Title', 'Description')
    ->addStep('.cta', 'Get Started', 'Click here to begin')
    ->drive();

$json = $tour->toJson();

Blade Component

<x-driver-js :steps="$steps" :config="['overlayColor' => 'rgba(0,0,0,0.6)']" />

Where $steps is an array:

$steps = [
    [
        'element' => '#selector',
        'popover' => [
            'title' => 'Title',
            'description' => 'Description',
        ],
    ],
];

Configuration

config/driver-js.php

return [
    'cdn_js' => 'https://unpkg.com/driver.js/dist/driver.min.js',
    'cdn_css' => 'https://unpkg.com/driver.js/dist/driver.min.css',
    'allowClose' => true,
    'overlayColor' => 'rgba(0, 0, 0, 0.5)',
    'opacity' => 0.6,
];

You can override any of these values per-tour via the Blade :config prop or by constructing a builder with initial config: Driver::make(['overlayColor' => '...']).

CDN keys (cdn_js, cdn_css) are used by the Blade component to load assets and are not forwarded to the Driver constructor.

Methods Mapping

Blade Component Props

• steps: array of Driver.js steps (as shown above)
• config: array of overrides; merged with config('driver-js')

Callbacks

• Provide callback names as strings, e.g. onHighlighting('onHighlight')
• Ensure a matching global function exists: window.onHighlight = function (element) { ... }
• The component resolves names to window functions before initializing Driver

Step Options

• The addStep method supports an options array to pass step-level options supported by Driver.js (e.g., popover position, padding). These are forwarded as-is to the step object.

Documentation

• API Docs: https://driverjs.com
• YouTube: Tutorials and walkthroughs on product tours and onboarding
• DEV Community: Implementation guides and tips

CI & Code Style

• Tests: GitHub Actions workflow runs Pest on supported PHP versions
• Code Style: Laravel Pint workflow validates formatting (non-mutating with --test)
• Local commands:

composer test
composer lint

License

MIT