Laravel Driver.js

Appearance

Confirm Before Exit ​

A common pattern in product tours is to ask the user for confirmation before they exit the tour. Driver.js supports this through the onDestroyStarted hook, and Laravel Driver.js provides a convenient helper to generate the confirm dialog pattern.

A tour using confirmBeforeDestroy with a custom overlay colour

The onDestroyStarted Hook ​

The onDestroyStarted hook is special: if defined, calling destroy() will trigger this hook and NOT actually destroy the driver. You must call driver.destroy() again (inside the hook) to actually destroy it. This enables "confirm before exit" patterns.

Method Signature ​

php
DriverJs::onDestroyStarted(string $callback);

Manual Example ​

php
use RealRashid\LaravelDriverJs\Facades\DriverJs;

DriverJs::tour('onboarding')
    ->onDestroyStarted('function(element, step, opts) { if (confirm("Are you sure you want to exit the tour?")) { opts.driver.destroy(); } }')
    ->step('#header', 'Welcome')
    ->step('#nav', 'Navigation')
    ->render();

Using the StepHooks Helper ​

Laravel Driver.js provides a StepHooks helper class with a built-in confirm-before-destroy pattern:

php
use RealRashid\LaravelDriverJs\Support\StepHooks;

DriverJs::tour('onboarding')
    ->onDestroyStarted(StepHooks::confirmBeforeDestroy())
    ->step('#header', 'Welcome')
    ->step('#nav', 'Navigation')
    ->render();

Custom Confirmation Message ​

You can pass a custom message to the confirmBeforeDestroy() method:

php
use RealRashid\LaravelDriverJs\Support\StepHooks;

DriverJs::tour('onboarding')
    ->onDestroyStarted(StepHooks::confirmBeforeDestroy('Are you sure? The tour will help you get started!'))
    ->step('#header', 'Welcome')
    ->step('#nav', 'Navigation')
    ->render();

How It Works ​

When the user tries to close the tour (by clicking the overlay, pressing Escape, or clicking the Close button):

  1. Driver.js calls the onDestroyStarted hook instead of destroying the tour.
  2. The hook displays a browser confirm() dialog with the specified message.
  3. If the user clicks "OK", the hook calls opts.driver.destroy() which actually destroys the tour.
  4. If the user clicks "Cancel", the tour continues as if nothing happened.

Custom Exit Handler ​

For more complex exit handling (like showing a custom modal instead of the browser's confirm() dialog), you can write your own JavaScript function:

php
DriverJs::tour('onboarding')
    ->onDestroyStarted('customExitHandler')
    ->step('#header', 'Welcome')
    ->render();
javascript
// In your JavaScript
function customExitHandler(element, step, opts) {
    // Show a custom modal
    Swal.fire({
        title: 'Exit Tour?',
        text: 'Are you sure you want to exit? You can always restart it later.',
        icon: 'warning',
        showCancelButton: true,
        confirmButtonText: 'Yes, exit',
        cancelButtonText: 'Continue tour'
    }).then((result) => {
        if (result.isConfirmed) {
            opts.driver.destroy();
        }
    });
}

That's it! You're now equipped to add confirm-before-exit behavior to your tours using Laravel Driver.js.