Filament Plugins

Purchase

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();
© FilamentPlugins.com ✦ 2022 – 2026
PrivacyTerms & Conditions
All rights reserved.