Onboarding your users is one of the most important things you can do in your SaaS or application. After all, first impressions matter!
Caleb Porzio has created an onboard package for Laravel which we (at Spatie) recently took over development and maintenance on.
You can find the new version here at spatie/laravel-onboard. We've tagged a completely compatible v1, and a v2 with some extra features and refactors.
Creating an onboarding experience#
The first step to creating your onboarding experience, is registering all the steps a User (or any other model, for example a "Team") has to take to complete the onboarding. This can be done in your AppServiceProvider or inside a middleware.
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;
});
As you can see, it's fairly straightforward to register steps, the most basic things they need is a name and a check to see if it's complete with completeIf
A small addition we've made on top of Caleb's code here is that the completeIf callback only gets run once per request, this way if you call to check completeness in multiple locations, any queries or expensive work will only be done once.
Adding your onboarding experience to a model#
Your onboarding steps are now registered, but you'll still need to attach them to your model. This is done by adding our interface and trait:
class User extends Model implements \Spatie\Onboard\Concerns\Onboardable
{
use \Spatie\Onboard\Concerns\GetsOnboarded;
...
Once this is done, you'll be able to call $user->onboarding() to get the onboarding instance.
Showing the onboarding#
Once everything is set up, you can display the onboarding in your application, here is a very basic example:
@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
Here's a sneak peek at how we'll be using this in the upcoming version of Mailcoach:
For some other examples and an example of how you can add this to a middleware to redirect users to their incomplete steps, check out the package.
This isn't the first package that our team has built or taken over. On our company website, check out all our open source packages in this long list. If you want to support us, consider picking up any of our paid products.