Getting started
Advanced example
Below you can find a complete and more advanced onboarding example.
The below code is used to generate the cards in the onboarding widget:
php
Track::make([
Step::make('Create list', 'widget::create-list')
->description("Create a list to gather your subscribers.")
->performStepActionLabel('Create list')
->url(fn () => ListResource::getUrl('create'))
->icon('tabler-list-check')
->columnSpan(2)
->completeIf(fn () => auth()->user()->workspaces()->exists()),
Step::make('Connect Notion', 'widget::connect-notion')
->description("Sign in with Notion and grant access to your workspace.")
->performStepActionLabel('Add workspace →')
->url(route('callbacks.notion.authorize'))
->icon('tabler-brand-notion')
->columnSpan(2)
->completeIf(fn () => auth()->user()->workspaces()->exists()),
Step::make('Embed form on site', 'widget::embed-form')
->description("Collect subscribers via the form or API. Or import subscribers from other software.")
->performStepActionLabel('Copy code')
->performStepAction(function (Action $action) {
return $action
->action(function (OnboardTrackWidget $livewire) {
$livewire->dispatch('copy-code', code: '<div>...</div>')
});
})
->icon('tabler-code')
->columnSpan(3)
->completeIf(fn () => auth()->user()->copied_embed_form !== null),
Step::make('Tweak the design', 'widget::tweak-design')
->description("Make your newsletter completely personal.")
->performStepActionLabel('Create a new design')
->url(fn () => DesignResource::getUrl('create'))
->icon('tabler-color-swatch')
->columnSpan(3)
->completeIf(fn () => auth()->user()->designs->first->created_at->lt(auth()->user()->designs->first->updated_at)),
Step::make('Send newsletters', 'widget::send-newsletters')
->description("Enjoy the stellar Notion writing experience and send beautifully-designed newsletters!")
->icon('tabler-send')
->columnSpan(4)
->completeIf(fn () => auth()->user()->created_at->lt(now()->subWeek(2))),
])->columns(7)->compact(false);
The below code is used for the onboarding part outside the admin panel:
php
use Filament\Forms\Components\Wizard\Step as WizardStep;
Onboard::make()
->addTrack([
Step::make('Connect to Notion', 'onboard::connect-notion')
->description('Click the button below to give Newsly access to your workspace')
->performStepActionLabel('Add workspace →')
->url(route('callbacks.notion.authorize'))
->icon('tabler-brand-notion')
->completeIf(fn () => user()->workspaces()->exists()),
Step::make('Create email list', 'onboard::create-email-list')
->wizard([
WizardStep::make("Create list")
->icon('tabler-list-check')
->statePath('list')
->schema([
TextInput::make('name')
->columnSpan(2)
->label("List name")
->reactive()
->required(),
TextInput::make('slug')
->columnSpan(2)
->helperText('NB.: Changing the slug will also change the URL of your subscribe page.')
->required(),
]),
WizardStep::make("Configure design")
->icon('tabler-color-swatch')
->statePath('design')
->schema(DesignResource::form(Form::make())->getSchema()),
])
->wizardFillFormUsing(fn () => [
'list' => [
'name' => auth()->user()->defaultList?->name,
'slug' => auth()->user()->defaultList?->slug,
],
'design' => [
'user_id' => auth()->id(),
'name' => 'Main design',
'accent_color' => '#666EE8',
'brand_color' => '#FFFFFF',
'accent_color_text' => 'light',
'font_family' => 'sans',
],
])
->wizardSubmitFormUsing(function (array $state, \RalphJSmit\Filament\Onboard\Http\Livewire\Wizard $livewire) {
auth()->user()->defaultList->update($state['list'] ?? []);
$design = auth()->user()->designs()->create($state['design'] ?? []);
$livewire->redirectRoute('filament.pages.dashboard');
})
->wizardSubmitButton('Submit')
->completeIf(fn () => user()->designs()->exists())
->cardWidth('2xl'),
])
->completeBeforeAccess();