Feature Spotlight

In this example, we'll demonstrate how to highlight a newly released feature using a single-element highlight. This is perfect for drawing attention to new additions without requiring a full tour.

Step 1: Controller

<?php

namespace App\Http\Controllers;

use RealRashid\LaravelDriverJs\Facades\DriverJs;

class FeatureController extends Controller
{
    public function index()
    {
        $highlightHtml = '';

        // Only show the highlight if the user hasn't seen this feature yet
        if (! DriverJs::tourCompleted('dark-mode-feature')) {
            $highlightHtml = DriverJs::tour('dark-mode-feature')
                ->overlayColor('#1a1a2e')
                ->overlayOpacity(0.6)
                ->stagePadding(15)
                ->stageRadius(12)
                ->addStep('#dark-mode-toggle')
                    ->title('New: Dark Mode! 🌙')
                    ->description('You can now switch between light and dark themes using this toggle. Try it out!')
                    ->side('bottom')
                    ->alignCenter()
                    ->showButtons(['close'])
                    ->doneBtnText('Got it!')
                ->render();
        }

        return view('features', compact('highlightHtml'));
    }
}

Step 2: View

@extends('layouts.app')

@section('content')
    <div class="flex justify-between items-center mb-6">
        <h1 class="text-2xl font-bold">Features</h1>
        <button id="dark-mode-toggle" class="bg-gray-800 text-white px-4 py-2 rounded-lg">
            🌙 Dark Mode
        </button>
    </div>

    <!-- Rest of the page content -->

    {!! $highlightHtml !!}
@endsection

Step 3: Route

use App\Http\Controllers\FeatureController;

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

Quick Highlight with Blade Directive

For simpler cases, you can use the @driverjsHighlight Blade directive directly in your template:

<div id="new-feature">
    <!-- Your new feature content -->
</div>

@driverjsHighlight('#new-feature', 'New Feature!', 'Check out this exciting new addition to our app.')

Highlighting Multiple Features

To spotlight multiple features in sequence, create a short tour:

DriverJs::tour('new-features-v2')
    ->showProgress()
    ->nextBtnText('Next Feature →')
    ->doneBtnText('Awesome!')
    ->addSteps([
        [
            'element' => '#dark-mode-toggle',
            'title' => 'Dark Mode 🌙',
            'description' => 'Switch between light and dark themes.',
            'side' => 'bottom',
        ],
        [
            'element' => '#export-button',
            'title' => 'Export to PDF 📄',
            'description' => 'You can now export your reports as PDF files.',
            'side' => 'right',
        ],
        [
            'element' => '#search-bar',
            'title' => 'Enhanced Search 🔍',
            'description' => 'Search is now faster and supports filters!',
            'side' => 'bottom',
        ],
    ])
    ->render();

That's it! You're now equipped to create feature spotlights using Laravel Driver.js.