How to use filament notifications with new template/view

[elegisandi]

Use Case Scenario:

Your Livewire app and filamentphp admin panel share the same codebase, but they have different themes.

Disclaimer: Some of the instructions below can be found in the official documentation.

Let's get started!

1. Create your new blade template.

   We'll save it at resources/views/notifications/snackbar.blade.php.

    <x-filament-notifications::notification
        :notification="$notification"
        class="flex w-80 rounded-lg transition duration-200"
        x-transition:enter-start="opacity-0"
        x-transition:leave-end="opacity-0"
    >
        <h4>{{ $getTitle() }}</h4>
        <p>{{ $getDate() }} </p>
        <p>{{ $getBody() }}</p>
        <span x-on:click="close">Close</span>
    </x-filament-notifications::notification>
   

2. Create a custom Notification class.

    <?php
   
    namespace App\Notifications;
   
    use Filament\Notifications\Notification as BaseNotification;
   
    class Notification extends BaseNotification
    {
        protected array $safeViews = [
   
            'notifications.snackbar',
            
        ];
    }
   

   NOTE: If you have to create more views, just add them in the $safeViews array.

3. Register the custom Notification class inside a service provider's register() method:

    <?php
   
    use App\Notifications\Notification;
    use Filament\Notifications\Notification as BaseNotification;
   
    ...
   
    public function register(): void
    {
        ...
   
        $this->app->bind(BaseNotification::class, Notification::class);
    }
   

4. Now you are ready to use your custom Notification class using a new blade template.

   Set the view path using the view() method just like below:

    <?php
   
    use App\Notifications\Notification;
   
    ...
   
    Notification::make()
        ->view('notifications.snackbar')
        ->title('Title goes here')
        ->body('Description goes here')
        ->duration(3000)
        ->send();
   

   NOTE: You may use either the base Notification class or the custom one.

Hope this helps, cheers!