Laravel Driver.js

Appearance

JavaScript Output ​

Laravel Driver.js generates JavaScript code that creates and starts a Driver.js instance on the frontend. Understanding the output methods gives you full control over how and where the JavaScript is rendered.

Output Methods ​

toJavaScript(?int $startStep = null) ​

Generates the raw JavaScript code as a string. Useful when you need to embed the script in a specific location or combine it with other JavaScript.

php
$js = DriverJs::tour('onboarding')
    ->step('#header', 'Welcome')
    ->step('#nav', 'Navigation')
    ->toJavaScript();

// $js = "const driverInstance = window.driver.js.driver({...steps...});driverInstance.drive();"

Starting from a specific step:

php
$js = DriverJs::tour('onboarding')
    ->step('#header', 'Step 0')
    ->step('#nav', 'Step 1')
    ->step('#content', 'Step 2')
    ->toJavaScript(1); // Starts from step 1

toScriptTag(?int $startStep = null) ​

Wraps the generated JavaScript in a <script> tag:

php
$html = DriverJs::tour('onboarding')
    ->step('#header', 'Welcome')
    ->toScriptTag();

// $html = "<script>const driverInstance = window.driver.js.driver(...);driverInstance.drive();</script>"

render(?int $startStep = null) ​

The full rendering method. Includes CDN asset links (if configured) and the tour script tag:

php
$html = DriverJs::tour('onboarding')
    ->step('#header', 'Welcome')
    ->render();

// Includes: <link rel="stylesheet" ...> + <script src="..."></script> + <script>tour code</script>

Renders only the CDN CSS and JS link tags (without any tour script):

php
$assets = app('driverjs')->renderAssetLinks();

// <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/driver.js@1.4.0/dist/driver.css">
// <script src="https://cdn.jsdelivr.net/npm/driver.js@1.4.0/dist/driver.js.iife.js"></script>

Generated JavaScript Structure ​

Tour Output ​

For a tour, the generated JavaScript looks like:

javascript
const driverInstance = window.driver.js.driver({
    "animate": true,
    "overlayColor": "#000",
    "overlayOpacity": 0.7,
    "showProgress": true,
    "steps": [
        { "element": "#header", "popover": { "title": "Welcome!" } },
        { "element": "#nav", "popover": { "title": "Navigation" } }
    ]
});
driverInstance.drive();

Highlight Output ​

For a single highlight, the generated JavaScript uses driverInstance.highlight():

javascript
const driverInstance = window.driver.js.driver({});
driverInstance.highlight({
    "element": "#feature",
    "popover": { "title": "New Feature!", "description": "Check this out!" }
});

Controlling Output in Blade ​

Use {!! !!} to output raw HTML (the script tags must not be escaped):

blade
{!! DriverJs::tour('onboarding')->step('#header', 'Welcome')->render() !!}

Or use the @driverjsAssets and @driverjsTour directives:

blade
<head>
    @driverjsAssets
</head>
<body>
    @driverjsTour('onboarding')
</body>

That's it! You're now equipped to control JavaScript output using Laravel Driver.js.