Looking to hire Laravel developers? Try LaraJobs

laravel-onboarding-tour maintained by taoshan98

Description
Interactive, highly configurable visual onboarding tour package for Laravel applications.
Author
Taoshan
Last update
2026/07/22 16:03 (dev-main)
License
MIT
Links
GitHub - Packagist
Downloads
0

dev-main

Last update
2026/07/22 16:03
License
MIT
Require
  • php ^8.2
  • illuminate/support ^10.0|^11.0|^12.0
  • illuminate/database ^10.0|^11.0|^12.0
  • illuminate/cache ^10.0|^11.0|^12.0
v1.0.5

Last update
2026/07/22 16:03
License
MIT
Require
  • php ^8.2
  • illuminate/support ^10.0|^11.0|^12.0
  • illuminate/database ^10.0|^11.0|^12.0
  • illuminate/cache ^10.0|^11.0|^12.0
v1.0.4

Last update
2026/07/22 15:55
v1.0.3

Last update
2026/07/22 15:44
v1.0.2

Last update
2026/07/22 15:36
v1.0.1

Last update
2026/07/22 15:28
v1.0.0

Last update
2026/07/22 15:00
License
MIT
Require
  • php ^8.2
  • illuminate/support ^10.0|^11.0|^12.0
  • illuminate/database ^10.0|^11.0|^12.0
  • illuminate/cache ^10.0|^11.0|^12.0
Comments
comments powered by Disqus

Laravel Onboarding Tour

Latest Version on Packagist Total Downloads License

An interactive, visual onboarding tour package for Laravel applications. Features an in-browser live visual builder, customizable popover cards, expandable media lightboxes, Redis/Cache optimization, and Livewire v3 SPA support.

🚀 Key Features

  • Visual Inspector & Tour Builder: Point and click on any DOM element to create guided onboarding steps.
  • Sticky Live Theme Preview: Customize colors, card sizes, backdrop colors, opacities, and spotlight styles in real-time.
  • Global & Per-View Theme Scope: Configure a global application theme or customize themes per view route.
  • Expandable Media Lightbox: Support for images, GIFs, YouTube, Vimeo, and MP4 videos with full-screen lightbox viewing.
  • Livewire v3 SPA Support: Seamlessly handles page swaps (wire:navigate) without losing event listeners or state.
  • High Performance & Cache Ready: Instant tour fetching with Laravel Cache / Redis integration.
  • Zero Third-Party JS/CSS Dependencies: Built with 100% Vanilla JS and Vanilla CSS.

🛠️ Installation

Install the package via Composer:

composer require taoshan98/laravel-onboarding-tour

Run the database migrations:

php artisan migrate

Optionally publish the configuration file or translations:

php artisan vendor:publish --tag="onboarding-tour-config"
php artisan vendor:publish --tag="onboarding-tour-lang"

💻 Usage

Include the <x-onboarding-tour /> component in your main layout file (e.g. resources/views/layouts/app.blade.php):

<!DOCTYPE html>
<html>
<head>
    <!-- ... -->
</head>
<body>
    {{ $slot }}

    <!-- Onboarding Tour Component -->
    <x-onboarding-tour />
</body>
</html>

Adding Builder & Trigger Buttons

Place trigger buttons anywhere in your navigation bar or header:

<!-- Start Tour Button -->
<x-onboarding-tour-trigger />

<!-- Admin Visual Tour Builder Toggle Button -->
<x-onboarding-tour-admin-toggle />

⚙️ Configuration

config/onboarding-tour.php:

return [
    'enabled' => env('ONBOARDING_TOUR_ENABLED', true),
    'route_prefix' => 'api/onboarding-tour',
    'middleware' => ['web'],
    'cache_prefix' => 'onboarding_tour:',
    'cache_ttl' => 86400,
    
    'theme' => [
        'use_custom_theme' => false,
        'card_style'       => 'auto', // 'auto', 'glass', 'dark', 'light'
        'card_size'        => 'md',   // 'sm', 'md', 'lg', 'xl'
        'accent_color'     => '#2563eb',
        'highlight_style'  => 'minimal',
        'backdrop_hex'     => '#0f172a',
        'backdrop_opacity' => 75,
    ],
];

📄 License

The MIT License (MIT). Please see License File for more information.