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

Paleface

Yes, I want to add a company logo and tagline in the header, some links in the footer, as well as changing the CSS font styles – Paleface

Yes, it is a notification. My notification has a toMail method to send the notification as an email return (new MailMessage) etc. I'm trying to figure out how to customize the layout of new MailMessage – Paleface

My notification works correctly, I just want to have it use my own email template when it gets sent via the toMail method. – Paleface

$user->notify(new TeamInvitation()) – Paleface

My office network is blocking that link for some reason. my notification DOES work, and I receive the email correctly with the correct body text in it. I have not deleted any code from that file.. I ran the publish command and that is what I got. – Paleface

I thought that would work, but none of the changes I make there are having any effect... I think those are only applying to email sent with Mail facade, and not mail sent through notifications. – Paleface

Nothing I'm doing is having any effect. I changed both the framework source themes/default.css as well as the published themes/default.css, and the email notification still looks exactly the same. – Paleface

@BrianGiaz did you solve the problem? – Aboveboard

No, any changes I make to that file are not being reflected when the notification email is sent. – Paleface

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:

Aboveboard

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. – Symmetrize

Answer 2

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

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

Euphorbiaceous

Following @Aboveboard answer and this one worked for me - specifically this. Without this customising the look of the email was not working at all. – Allow

This was my problem - it's missing from the docs. Should be after the vendor:publish instructions – Loyalty

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.

Ranged

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

Brut

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.

Paleface

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.

Weller

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

Declarant

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/.

Eleazar