Laravel 5.4^ - How to customize notification email layout?

Question

I am trying to customize the HTML email layout that is used when sending notifications via email.

I have published both the mail and notification views.

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

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

If I modify the /resources/views/vendor/notifications/email.blade.php file, I can only change the BODY content of the emails that get sent. I am looking to modify the footer, header, and every other part of the email layout as well.

I tried also modifying the views inside /resources/vendor/mail/html/, but whenever the notification gets sent, it is not even using these views and instead uses the default laravel framework ones.

I am aware I can set a view on the MailMessage returned by my Notification class, but I want to keep the standard line(), greeting(), etc. functions.

Does anyone know how I can get my notifications to send email using the views in /resources/vendor/mail/html ?

The following is my /resources/views/vendor/notifications/email.blade.php file, but it does not have anywhere to customize the header/footer/ overall layout.

@component('mail::message')
{{-- Greeting --}}
@if (! empty($greeting))
# {{ $greeting }}
@else
@if ($level == 'error')
# Whoops!
@else
# Hello!
@endif
@endif

{{-- Intro Lines --}}
@foreach ($introLines as $line)
{{ $line }}

@endforeach

{{-- Action Button --}}
@if (isset($actionText))
<?php
    switch ($level) {
        case 'success':
            $color = 'green';
            break;
        case 'error':
            $color = 'red';
            break;
        default:
            $color = 'blue';
    }
?>
@component('mail::button', ['url' => $actionUrl, 'color' => $color])
{{ $actionText }}
@endcomponent
@endif

{{-- Outro Lines --}}
@foreach ($outroLines as $line)
{{ $line }}

@endforeach

<!-- Salutation -->
@if (! empty($salutation))
{{ $salutation }}
@else
Regards,<br>{{ config('app.name') }}
@endif

<!-- Subcopy -->
@if (isset($actionText))
@component('mail::subcopy')
If you’re having trouble clicking the "{{ $actionText }}" button, copy and paste the URL below
into your web browser: [{{ $actionUrl }}]({{ $actionUrl }})
@endcomponent
@endif
@endcomponent

Answer 1

Run this command

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

update for laravel 5.7+

php artisan vendor:publish

and then you will get:

  [<number>] Tag: laravel-mail
  [<number>] Tag: laravel-notifications

and then just type in that number in front to publish the file for editing

---

and then in

/resources/views/vendor/mail/html/

you can edit all the components and customize anything you want. For example i have edited the sentence "All rights reserved". to "All test reserved" at the bottom of that image inside this file:

/resources/views/vendor/mail/html/message.blade.php

and this is what i got:

Answer 2

Make sure to have the right configuration in your config/mail.php :

'markdown' => [
    'theme' => 'default',
    'paths' => [
        resource_path('views/vendor/mail'),
    ]
],

Answer 3

I wrote an article on how to create a notification and modify your template including the header and footer.

It includes the explanation on how the Laravel components work and how to pass your data to a new email template.

https://medium.com/@adnanxteam/how-to-customize-laravel-5-4-notification-email-templates-header-and-footer-158b1c7cc1c

The most important part is placing the following code inside your email template:

@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 check the medium article in case you want more details on how the components work and how to properly pass the data.

Answer 4

@Brian You can just make change to the @component directives in your template file to use your custom templates. For example:

Replace @component('mail::message') with @component('vendor.mail.html.message'), assuming your template is located at /resources/views/vendor/mail/html/message.blade.php

Answer 5

I ended up just using a custom view rather than trying to get the built in Laravel ones to work.

I added the following use statement to my Notification class

use Illuminate\Support\Facades\View;
use Illuminate\Support\HtmlString;
use TijsVerkoyen\CssToInlineStyles\CssToInlineStyles;

Then in the toMail method:

public function toMail($notifiable)
    {
        $view_file = 'emails.teamInvitation';
        $view = View::make($view_file, ['sender' => $this->sender, 'invitationToken' => $this->invitationToken, 'team' => $this->team ]);

        $view =  new HtmlString(with(new CssToInlineStyles)->convert($view));

        return (new MailMessage)
            ->subject('PreSource Invitation From ' . $this->sender->name )
            ->view('emails.htmlBlank', ['bodyContent' => $view]);
    }

emails.teamInvitation is my actual email template.

I compile the view in to a string, and then convert the stylesheets to be inline.

emails.htmlBlank is a view file but all it does is echo out bodyContent. This is necessary because the MailMessage->view method expects a view file, and not an HtmlString.

Answer 6

Do NOT do what is suggested here.

This works. Just remember that you should edit the templates contained in the 'vendor/mail/html' folder AND NOT the contents of the 'vendor/mail/markdown' folder, unless of course you are using markdown instead of the line() / greeting() email building functions

Instead, run the artisan commands and then edit the generated files in your resources folder that you end up with. Never overwrite the vendor files, as if you are working on a local version, then push it to a live server and run composer install, you will not have those changes anymore.

Laravel's inheritance allows you to easily overwrite pre-defined methods and files, so take advantage of that for cleaner version control and better ability to roll back changes to core functionality.

Answer 7

You are making email based on component @component('mail::message') This is a default and this is only one described in documentation. This component does not allow you to modify header. However if you look into it's file,

\vendor\laravel\framework\src\Illuminate\Mail\resources\views\markdown\message.blade.php

you will see that it uses another component @component('mail::layout'),

Just copy content of message.blade.php file into your .blade.php and replace {{ $slot }} with what you had in your file before.

And now you have all the flexibility in your file.

Plus

if you want to modify styles, go to file \config\mail.php

and change markdown section like so

'markdown' => [
    'theme' => 'default0',

    'paths' => [
        resource_path('views/vendor/mail'),
        base_path('resources/views/emails/vendor'),            
    ],
],

In this case I replaced default theme with my own \resources\views\emails\vendor\html\themes\default0.css

or, if you don't want customising paths - put your default0.css into /resources/views/vendor/mail/html/themes - it is a default path and you don't need to mention it.

Tested on Laravel 5.7

Answer 8

Laravel 5.8

I found email layout in file -> vendor/laravel/framework/src/Illuminate/Mail/resources/views/html/layout.blade.php.

Like I don't use markdown to send my emails, i need of layout default of laravel (yes, because i want :)).

What i did? I sent for me email for me of reset password, saved the email like html and then copied html to my editor and it ready to changes \o/.