Set Up an Onboarding Flow for Application's Users in Laravel

Onboarding your users is one of the most important things you can do in your SaaS or application. After all, first impressions matter! Spatie has created an onboard package for Laravel that lets you set up an onboarding flow for your application’s users.

Installation

You can install the package via composer:

composer require spatie/laravel-onboard

Usage

Add the Spatie\Onboard\Concerns\GetsOnboarded trait and Spatie\Onboard\Concerns\Onboardable interface to any model or class in your app, for example, the User model:

class User extends Model implements \Spatie\Onboard\Concerns\Onboardable
{
    use \Spatie\Onboard\Concerns\GetsOnboarded;
    ...

Configuration

Configure your steps in your App\Providers\AppServiceProvider.php

use App\User;
use Spatie\Onboard\Facades\Onboard;

class AppServiceProvider extends ServiceProvider
{
    // ...

    public function boot()
    {
	    Onboard::addStep('Complete Profile')
	    	->link('/profile')
	    	->cta('Complete')
	    	/**
             * The completeIf will pass the class that you've added the
             * interface & trait to. You can use Laravel's dependency
             * injection here to inject anything else as well.
             */
	    	->completeIf(function (User $model) {
	    		return $model->profile->isComplete();
	    	});

	    Onboard::addStep('Create Your First Post')
	    	->link('/post/create')
	    	->cta('Create Post')
	    	->completeIf(function (User $model) {
	    		return $model->posts->count() > 0;
	    	});

Example

Here’s an example of how it’s set up:

use App\User;
use Spatie\Onboard\Facades\Onboard;

Onboard::addStep('Complete Profile')
    ->link('/profile')
    ->cta('Complete')
    ->completeIf(function (User $user) {
        return $user->profile->isComplete();
    });

Onboard::addStep('Create Your First Post')
    ->link('/post/create')
    ->cta('Create Post')
    ->completeIf(function (User $user) {
        return $user->posts->count() > 0;
    });

You can then render this onboarding flow however you want in your templates:

@if (auth()->user()->onboarding()->inProgress())
    <div>
        @foreach (auth()->user()->onboarding()->steps as $step)
            <span>
                @if($step->complete())
                    <i class="fa fa-check-square-o fa-fw"></i>
                    <s>{{ $loop->iteration }}. {{ $step->title }}</s>
                @else
                    <i class="fa fa-square-o fa-fw"></i>
                    {{ $loop->iteration }}. {{ $step->title }}
                @endif
            </span>

            <a href="{{ $step->link }}" {{ $step->complete() ? 'disabled' : '' }}>
                {{ $step->cta }}
            </a>
        @endforeach
    </div>
@endif

For more details, Visit Github.