Laravel Driver.js

Appearance

Welcome Modal ​

In this example, we'll create a simple centered welcome modal that appears when a user first visits your application. This is a great way to greet new users and set expectations before they explore your app.

Step 1: Controller ​

php
<?php

namespace App\Http\Controllers;

use RealRashid\LaravelDriverJs\Facades\DriverJs;

class WelcomeController extends Controller
{
    public function index()
    {
        $modalHtml = '';

        if (! DriverJs::tourCompleted('welcome-modal')) {
            $modalHtml = DriverJs::tour('welcome-modal')
                ->overlayColor('#0f172a')
                ->overlayOpacity(0.9)
                ->modal('Welcome to MyApp! 🎉', 'We\'re thrilled to have you here. Our platform helps you manage your projects, collaborate with your team, and track your progress — all in one place. Ready to get started?')
                ->render();
        }

        return view('welcome', compact('modalHtml'));
    }
}

Step 2: View ​

blade
@extends('layouts.app')

@section('content')
    <!-- Your page content -->

    {!! $modalHtml !!}
@endsection

Step 3: Route ​

php
use App\Http\Controllers\WelcomeController;

Route::get('/', [WelcomeController::class, 'index'])->name('welcome');

Announcement Modal ​

You can also use modals for announcements or release notes:

php
if (! DriverJs::tourCompleted('v2-announcement')) {
    DriverJs::tour('v2-announcement')
        ->overlayColor('#1a1a2e')
        ->overlayOpacity(0.85)
        ->modal("What's New in v2.0 🚀", 'We\'ve added dark mode, export to PDF, enhanced search, and a brand new dashboard. Explore the new features to see what\'s changed!')
        ->render();
}

Welcome Modal with Tour Follow-Up ​

A common pattern is to show a welcome modal first, then immediately start a guided tour:

php
public function dashboard()
{
    $tourHtml = '';

    if (! DriverJs::tourCompleted('welcome-and-tour')) {
        $tourHtml = DriverJs::tour('welcome-and-tour')
            ->showProgress()
            ->nextBtnText('Show Me Around →')
            ->doneBtnText('Start Using the App')
            // Step 1: Centered welcome modal
            ->addStep()
                ->title('Welcome to MyApp! 👋')
                ->description("We're excited to have you! Let us take you on a quick tour of the key features.")
                ->side('over')
            // Step 2: Highlight the navigation
            ->addStep('#main-nav')
                ->title('Navigation')
                ->description('Use these links to move between sections of the app.')
                ->side('bottom')
            // Step 3: Highlight the dashboard
            ->addStep('#dashboard')
                ->title('Your Dashboard')
                ->description('This is where you\'ll see your latest updates and metrics.')
                ->side('right')
            // Step 4: Highlight settings
            ->addStep('#settings')
                ->title('Settings')
                ->description('Customize your experience from the settings panel.')
                ->side('left')
            ->render();
    }

    return view('dashboard', compact('tourHtml'));
}

Dismissible Announcement with Custom Styling ​

php
DriverJs::tour('maintenance-notice')
    ->popoverClass('announcement-popover')
    ->modal('Scheduled Maintenance 🔧', 'We\'ll be performing maintenance this Saturday from 2-4 AM UTC. Your data is safe and will not be affected.')
    ->showButtons(['close'])
    ->render();
css
.announcement-popover {
    max-width: 400px;
    border: 2px solid #f59e0b;
    box-shadow: 0 4px 20px rgba(245, 158, 11, 0.3);
}

.announcement-popover .driver-popover-title {
    color: #92400e;
}

That's it! You're now equipped to create welcome modals and announcements using Laravel Driver.js.