Customize Laravel Default Verification Email (Change The Header)

I’m trying to change and modify the default verification email in Laravel, I’ve found the file when you can change the contents of the default email but inside the file it has only the Subject and the lines I couldn’t found the header of the email to change it, so where can I find the line of header and change it?

The header I meant:

The “Hello” word

The Code of the file which is in

Vendor/Laravel/Framework/src/illuminate/Auth/Notifications/VerifyEmail.php

protected function buildMailMessage($url)
    {
        return (new MailMessage)
            ->subject(Lang::get('Verify Email Address'))
            ->line(Lang::get('Please click the button below to verify your email address.'))
            ->action(Lang::get('Verify Email Address'), $url)
            ->line(Lang::get('If you did not create an account, no further action is required.'));
    }

Answer

To Customize Laravel Notification Email Templates (Header and Footer) Initially Laravel will use their components hidden in the core of the framework, that you can export by doing

    php artisan vendor:publish --tag=laravel-mail

It will create a mail and markdown folders inside your resources/view/vendor folder. Inside you will find component like layout or header etc.

Creating Notification What you want to do, is either create a notification, event or a mail class in order to fire off an email when something happens. I decided to go with a notification. When creating any notification (You can read more about how to create a notification via artisan) you will get a class like this:

<?php

namespace AppNotifications;

use IlluminateBusQueueable;
use IlluminateNotificationsNotification;
use IlluminateContractsQueueShouldQueue;
use IlluminateNotificationsMessagesMailMessage;

class UserRegistered extends Notification {
    use Queueable;

    public $user;

    public function __construct($user) {
        $this->user = $user;
    }


    public function via($notifiable) {
        return ['mail'];
    }

    /**
     * Get the mail representation of the notification.
     *
     * @param mixed $notifiable
     * @return IlluminateNotificationsMessagesMailMessage
     */
    public function toMail($notifiable) {
        return (new MailMessage)
            ->from('[e-mail]', 'Admin')
            ->subject('Welcome to the the Portal')
            ->markdown('mail.welcome.index', ['user' => $this->user]);
    }

    /**
     * Get the array representation of the notification.
     *
     * @param mixed $notifiable
     * @return array
     */
    public function toArray($notifiable) {
        return [
            //
        ];
    }
}

Here, pay attention to the toMail method as well as the constructor of the class because we will pass an object to it. Also, note that we are using ->markdown(‘some.blade.php’); The next step is to push this notification to work. Somewhere in your RegisterController, you might want to call this (Not going into how you will execute it, either sync or queued … ). Don’t forget to include the namespace of the notification at the top.

  $user = User::create([
        'name' => $data['name'],
        'email' => $data['email'],
        'lastname' => $data['lastname'],
        'password' => bcrypt($data['password']),
    ]);

  $user->notify(new UserRegistered($user));

Why am I going so deep? Well because I also want to show you how to pass your data into the email template.

Next you can go to resources/views/mail/welcome/index.blade.php (It can be any folder and filename you want) and pasting this:

@component('mail::layout')
{{-- Header --}}
@slot('header')
    @component('mail::header', ['url' => config('app.url')])
        Header Title
    @endcomponent
@endslot

{{– Body –}} This is our main message {{ $user }}

{{-- Subcopy --}}
@isset($subcopy)
    @slot('subcopy')
        @component('mail::subcopy')
            {{ $subcopy }}
        @endcomponent
    @endslot
@endisset

  {{-- Footer --}}
    @slot('footer')
    @component('mail::footer')
        © {{ date('Y') }} {{ config('app.name') }}. Super FOOTER!
    @endcomponent
    @endslot
    @endcomponent

You can now easily add any image to your header or change the link inside the footer etc. Hope this helps.