PHPackages taoshan98/laravel-onboarding-tour - PHPackages - PHPackages [Skip to content](#main-content)[PHPackages](/)[Directory](/)[Categories](/categories)[Trending](/trending)[Leaderboard](/leaderboard)[Changelog](/changelog)[Analyze](/analyze)[Collections](/collections)[Log in](/login)[Sign up](/register) 1. [Directory](/) 2. / 3. taoshan98/laravel-onboarding-tour ActiveLibrary taoshan98/laravel-onboarding-tour ================================= Interactive, highly configurable visual onboarding tour package for Laravel applications. v1.1.1(today)114↑2685.7%MITPHP ^8.2 Since Jul 22Compare [ Source](https://github.com/Taoshan98/laravel-onboarding-tour)[ Packagist](https://packagist.org/packages/taoshan98/laravel-onboarding-tour)[ RSS](/packages/taoshan98-laravel-onboarding-tour/feed)WikiDiscussions Synced today READMEChangelog (7)Dependencies (3)Versions (10)Used By (0) Laravel Onboarding Tour ======================= [](#laravel-onboarding-tour) [![Latest Version on Packagist](https://camo.githubusercontent.com/515fe27f50cff90bad0c0cebc1681eee02ce8e4433b25101f7b52b7da0e99e81/68747470733a2f2f696d672e736869656c64732e696f2f7061636b61676973742f762f74616f7368616e39382f6c61726176656c2d6f6e626f617264696e672d746f75722e7376673f7374796c653d666c61742d737175617265)](https://packagist.org/packages/taoshan98/laravel-onboarding-tour)[![Total Downloads](https://camo.githubusercontent.com/ba0d1ba2517297257cb22c6d25a8c4d191dfd8da798a2e5d581ebf894b0d05f5/68747470733a2f2f696d672e736869656c64732e696f2f7061636b61676973742f64742f74616f7368616e39382f6c61726176656c2d6f6e626f617264696e672d746f75722e7376673f7374796c653d666c61742d737175617265)](https://packagist.org/packages/taoshan98/laravel-onboarding-tour)[![License](https://camo.githubusercontent.com/2a8d442c7037e488f22ccce279b37227c8f832dc80a003a975b19e02857b3cf6/68747470733a2f2f696d672e736869656c64732e696f2f7061636b61676973742f6c2f74616f7368616e39382f6c61726176656c2d6f6e626f617264696e672d746f75722e7376673f7374796c653d666c61742d737175617265)](LICENSE) An interactive onboarding tour package for Laravel. Build guided tours visually in the browser — no code required. Features a live visual builder, multi-language support, theme customization, keyboard navigation, media lightbox, and Livewire v3 SPA compatibility. **Zero JS/CSS dependencies.** Works on any Laravel app with or without Tailwind, Bootstrap, or Flux. --- Features -------- [](#features) - **Visual Builder** — Click any element on your page to create tour steps. Drag & drop to reorder. Live preview. - **Multi-Language (i18n)** — Auto-discovers host locales from `lang/` directories and config. Per-step titles, descriptions, and media URLs for each language. - **Theme Customization** — Global and per-tour themes. Card styles (auto, glass, dark, light), accent colors, backdrop presets, highlight styles, live preview. - **Keyboard Shortcuts** — Full hotkey navigation with an interactive shortcuts palette (`?`). - **Media Lightbox** — Expandable full-screen viewer for images, GIFs, YouTube, Vimeo, and MP4 videos. - **Dark Mode** — Automatically follows your host app's theme (`.dark` class or `[data-theme="dark"]`). - **Livewire v3** — Seamless re-init on `wire:navigate` page swaps. - **Cache Optimized** — Tour data cached with configurable TTL. Auto-invalidation on theme/tour changes. - **Secure** — HTTPS enforcement, XSS protection, dangerous scheme filtering on all URLs. --- Screenshots ----------- [](#screenshots) ### Demo [](#demo) [![Demo](screenshots/demo.gif)](screenshots/demo.gif) ### Visual Builder Mode [](#visual-builder-mode) Click the **Builder** button to enter inspector mode. A floating toolbar appears at the top with quick actions. [![Builder Mode](screenshots/02-builder-mode.png)](screenshots/02-builder-mode.png) ### Step Configuration Modal [](#step-configuration-modal) Click any element to configure a tour step. The default language (`EN ★`) is shown first, with tabs for all discovered locales. [![Step Builder Modal](screenshots/03-step-builder-modal.png)](screenshots/03-step-builder-modal.png) ### Steps Manager Drawer [](#steps-manager-drawer) Manage all steps in a side drawer. Drag to reorder, edit, delete, or preview individual steps. [![Steps Drawer](screenshots/04-steps-drawer.png)](screenshots/04-steps-drawer.png) ### Theme Customization [](#theme-customization) Customize card style, accent color, highlight effect, and backdrop with a live preview. [![Theme Editor](screenshots/05-theme-editor.png)](screenshots/05-theme-editor.png) ### Keyboard Shortcuts Palette [](#keyboard-shortcuts-palette) Press `?` to open the interactive shortcuts reference. [![Keyboard Shortcuts](screenshots/06-keyboard-shortcuts.png)](screenshots/06-keyboard-shortcuts.png) --- Requirements ------------ [](#requirements) - PHP >= 8.2 - Laravel 10, 11, or 12 --- Installation ------------ [](#installation) ``` composer require taoshan98/laravel-onboarding-tour php artisan migrate ``` Optionally publish configuration and translations: ``` php artisan vendor:publish --tag="onboarding-tour-config" php artisan vendor:publish --tag="onboarding-tour-lang" ``` Other publishable assets: ``` # Blade views (for customization) php artisan vendor:publish --tag="onboarding-tour-views" # JS/CSS assets (to serve from public/ instead of inline) php artisan vendor:publish --tag="onboarding-tour-assets" ``` --- Usage ----- [](#usage) ### 1. Add the component to your layout [](#1-add-the-component-to-your-layout) Place `` in your main layout file (e.g. `resources/views/layouts/app.blade.php`): ``` {{ $slot }} ``` This injects the CSS, JS, and runtime configuration invisibly (headless). ### 2. Place trigger buttons in your navigation [](#2-place-trigger-buttons-in-your-navigation) ``` @can('manage-tours') @endcan ``` ### 3. Build a tour [](#3-build-a-tour) 1. Click the **Builder** button (or press `B`) to enter inspector mode 2. Click any element on the page to select it as a step target 3. Fill in the title, description, and optional media URL for each language 4. Click **Add Step** — repeat for all steps 5. Press `Ctrl+S` (or `Cmd+S`) or click **Save Tour** to persist The tour is saved via the REST API and cached automatically. --- Multi-Language (i18n) --------------------- [](#multi-language-i18n) The package automatically discovers all locales available in your host application: 1. **Explicit config** — `config('onboarding-tour.locales')` (highest priority) 2. **Host app config** — `config('app.locales')`, `config('app.available_locales')`, or `config('app.supported_locales')` 3. **Filesystem scan** — Subdirectories and `.json` files in your `lang/` folder 4. **Always included** — `app()->getLocale()` and `config('app.fallback_locale')` ### Default language indicator [](#default-language-indicator) The language configured in `config('app.locale')` (your `config/app.php` default) is shown **first** in the builder modal with a **★** badge. If an admin fills in content only for the default language, that content is used as fallback for all other languages. ### Setting locales explicitly [](#setting-locales-explicitly) ``` // config/onboarding-tour.php 'locales' => ['en', 'it', 'de', 'fr'], // null = auto-discover ``` --- Keyboard Shortcuts ------------------ [](#keyboard-shortcuts) Press `?` to open the interactive shortcuts palette. KeyActionContext`→` / `L` / `Space`Next stepActive tour`←` / `H`Previous stepActive tour`Enter`Finish tourActive tour`ESC`Dismiss / CloseTour, modal, drawer`?` / `Shift+/`Toggle shortcuts paletteGlobal`B`Toggle builder modeAdmin`S`Open steps drawerBuilder mode`T`Open theme drawerBuilder mode`Ctrl+S` / `Cmd+S`Save tourBuilder modeAll interactive elements support **Tab / Shift+Tab** focus trapping and ARIA attributes for accessibility. --- Theme Customization ------------------- [](#theme-customization-1) Themes are managed entirely through the **admin UI** — no config files needed. The global theme is persisted to the database and cached for performance. Per-tour overrides are also supported. ### Card styles [](#card-styles) StyleDescription`auto`Follows host app theme (light/dark)`glass`Glassmorphism with backdrop blur`dark`Always dark card`light`Always light card### Highlight styles [](#highlight-styles) StyleDescription`minimal`Thin border with subtle shadow`ring`Border with outer ring`glow`Pulsing glow effect`dashed`Dashed border with tinted background`none`No highlight border### Backdrop presets [](#backdrop-presets) PresetColor🌌 Midnight Slate`#0f172a`🔮 Deep Indigo`#1e1b4b`🌲 Emerald Night`#022c22`🌪️ Soft Charcoal`#334155`Opacity is adjustable from 20% to 95% via the live preview slider. --- Configuration ------------- [](#configuration) ``` // config/onboarding-tour.php return [ // Master switch 'enabled' => env('ONBOARDING_TOUR_ENABLED', true), // API routes 'route_prefix' => 'api/onboarding-tour', 'middleware' => ['web', 'auth'], // Locales: null = auto-discover from host app 'locales' => null, // Cache 'cache_ttl' => 86400, // 24 hours (seconds) 'cache_prefix' => 'onboarding_tour:', // Redis key prefix ]; ``` > **Note:** Theme settings are not in the config file — they are managed through the admin UI and persisted to the database automatically. --- REST API -------- [](#rest-api) All endpoints use the configured `route_prefix` and `middleware`. MethodEndpointDescription`GET``/config?route_name={route}`Get tour data, theme, translations, and locales for a route`POST``/save`Create or update a tour with steps`POST``/save-global-theme`Update the global theme settings`POST``/complete`Mark a tour as completed or dismissed for the current user`POST``/delete`Delete a tour by route name--- How It Works ------------ [](#how-it-works) ### Architecture [](#architecture) ``` ┌─────────────────────────────────────────────┐ │ Blade Component: │ │ Inlines CSS + JS + config JSON │ └──────────────────┬──────────────────────────┘ │ ┌────────────▼────────────┐ │ tour-engine.js │ │ (Vanilla JS, IIFE) │ │ │ │ • Tour runner │ │ • Visual builder │ │ • Theme editor │ │ • Keyboard shortcuts │ │ • Media lightbox │ └────────────┬────────────┘ │ fetch() ┌────────────▼────────────┐ │ TourApiController │ │ (REST API) │ └────────────┬────────────┘ │ ┌────────────▼────────────┐ │ TourCacheService │ │ • Cache layer │ │ • Locale discovery │ │ • Translation resolver │ └────────────┬────────────┘ │ ┌────────────▼────────────┐ │ Eloquent Models │ │ • OnboardingTour │ │ • OnboardingTourStep │ │ • OnboardingTourUser │ └─────────────────────────┘ ``` ### Tour lifecycle [](#tour-lifecycle) 1. `` loads cached tour data for the current route 2. If a tour exists and the user hasn't completed/dismissed it, the **Start Tour** button appears 3. User clicks start (or tour auto-starts) → spotlight overlay + popover card 4. User navigates steps with buttons or keyboard 5. On finish/dismiss → `POST /complete` marks the user's status 6. Admin builder saves/updates tours via `POST /save` ### Caching [](#caching) - Tour data is cached per-route with the configured TTL - Global theme is persisted to the database and cached forever - If the cache is cleared, theme data is automatically rebuilt from the database - Saving a tour automatically flushes the route's cache - Updating the global theme flushes all route caches --- Customizing Views ----------------- [](#customizing-views) Publish and edit the Blade templates: ``` php artisan vendor:publish --tag="onboarding-tour-views" ``` This copies the views to `resources/views/vendor/onboarding-tour/` where you can customize: - `components/tour-runner.blade.php` — Main component (CSS/JS injection) - `components/tour-trigger.blade.php` — Start tour button - `components/tour-builder-toggle.blade.php` — Admin builder toggle button --- Customizing Translations ------------------------ [](#customizing-translations) Publish and edit translation files: ``` php artisan vendor:publish --tag="onboarding-tour-lang" ``` Available languages: `en`, `it`. Add more by creating new files in `lang/vendor/onboarding-tour/{locale}/messages.php`. --- Security -------- [](#security) - All media URLs are sanitized: only `https://`, relative paths (`/`), and `data:image/` are allowed - `http://` URLs are automatically upgraded to `https://` - Dangerous schemes (`javascript:`, `data:text/html`, etc.) are blocked - External links use `rel="noopener noreferrer"` protection If you discover a security vulnerability, please email directly. --- License ------- [](#license) The MIT License (MIT). See [LICENSE](LICENSE) for details. ### Health Score 44 — FairBetter than 90% of packages Maintenance100 Actively maintained with recent releases Popularity10 Limited adoption so far Community2 Small or concentrated contributor base Maturity51 Maturing project, gaining track record How is this calculated?**Maintenance (25%)** — Last commit recency, latest release date, and issue-to-star ratio. Uses a 2-year decay window. **Popularity (30%)** — Total and monthly downloads, GitHub stars, and forks. Logarithmic scaling prevents top-heavy scores. **Community (15%)** — Contributors, dependents, forks, watchers, and maintainers. Measures real ecosystem engagement. **Maturity (30%)** — Project age, version count, PHP version support, and release stability. ### Release Activity Cadence Every ~0 days Total 8 Last Release 0d ago ### Community Maintainers ![](https://www.gravatar.com/avatar/ec8deb2b4139351fe8bc873ec640aada2a457949d3bbaf04d920ac703bd9c12e?d=identicon)[Taoshan98](/maintainers/Taoshan98) ### Embed Badge ![Health badge](/badges/taoshan98-laravel-onboarding-tour/health.svg) ``` [![Health](https://phpackages.com/badges/taoshan98-laravel-onboarding-tour/health.svg)](https://phpackages.com/packages/taoshan98-laravel-onboarding-tour) ``` ### Alternatives [mike-bronner/laravel-model-caching Automatic caching for Eloquent models. 2.4k96.5k1](/packages/mike-bronner-laravel-model-caching)[psalm/plugin-laravel Psalm plugin for Laravel 3345.3M347](/packages/psalm-plugin-laravel)[aedart/athenaeum Athenaeum is a mono repository; a collection of various PHP packages 255.2k](/packages/aedart-athenaeum)[api-platform/laravel API Platform support for Laravel 58174.6k17](/packages/api-platform-laravel) PHPackages © 2026 [Directory](/)[Categories](/categories)[Trending](/trending)[Changelog](/changelog)[Analyze](/analyze)