Customizing Laravel’s default notification email template (Adding a logo and changing colours/style)

Christian Jombo
Feb 6 · 4 min read

Prerequisites: Knowledge of Laravel, Laravel 5.5+ Installation, a Mailtrap.io account (Here’s an article on how to get one and set it up for Laravel)
Difficulty: Intermediate

There are enough tutorials on sending custom emails with Laravel to fill several libraries. However, when I was faced with the challenge of customizing the default Laravel template, I couldn’t find any leads. In most cases, the tutorials I found simply explained the steps involved in creating a new template or making changes to the content of the default template, so I decided to take matters into my own hand.

One of the major advantages of using Laravel’s default email template is that it is drop-dead simple and works really well for most use-cases. This is especially true in situations where you are just testing things out and don’t want to bug yourself with having to write Email templates. The added benefit of using Laravel’s MailMessage methods like subject, greeting, line, action, e.t.c makes another compelling reason for its use. Having said all of these, let’s dive right into it. Now, bear in mind that I have assumed a fair knowledge of Laravel and Laravel Notifications for this tutorial. However, I will try to simplify and break things down where necessary.

STEP 1 — Create a new Laravel Notification Class
Since each notification in Laravel is represented by a separate class, we need to create a custom notification class that will be used to notify users. We’ll use the following artisan command to create a custom notification class — NewMessage.

$php artisan make:notification NewMessage

This should create the NewMessage.php class in app/Notifications, so let's open it up. Apart from the constructor, there are 3 methods in this class — via, toMail and toArray.

The via method specifies the notification delivery channel (https://laravel.com/docs/5.7/notifications#specifying-delivery-channels). By default, mail is the specified delivery channel, so we’ll keep it like so.

Next, there’s the toMail method which allows us to configure various email parameters. As a matter of fact, the toMailmethod should return the instance of \Illuminate\Notifications\Messages\MailMessage, and that class provides useful methods that allow you to configure email parameters. Some of these methods include, the line method which allows you to add a single line in a message and the action method that allows you to add a call-to-action button in a message (https://laravel.com/docs/5.7/notifications#mail-notifications).

Then, we have the toArray method, which formats the data that needs to be stored in a database (https://laravel.com/docs/5.7/notifications#database-notifications).

Let’s add the following to our toMail method, after the line that reads return (new MailMessage)

->greeting('Hello!')
->line('One of your invoices has been paid!')
->action('View Invoice', '#')
->line('Thank you for using our application!');

We’ve just simply registered a greeting, a line of text, a call to action and another line of text. Our call to action links to nowhere. In the next steps, we’ll set up our route, so we can send a mail to see what it looks like by default.

STEP 2— Setting up a route to test our custom email notification
In a real app scenario, we’d most likely be calling our notification from a controller. However, for this case, we’ll be calling it from our route, just to see it work. Open the web route file in routes/web.php and add the lines below, just after the comment on the file.

use Illuminate\Support\Facades\Notification;
use App\Notifications\NewMessage;
Route::get('/test-mail', function (){
Notification::route('mail', 'yourMailtrapEmailAddress')->notify(new NewMessage());
return 'Sent';
});

In the lines above, we are asking our route file to use Laravel’s Notification Facade and our NewMessage notification. We then set up a route ‘test-mail’ which we would visit to send our email. This was to prevent having to write complicated logic or having to do too much before we can send our email for the purpose of this tutorial. After setting up the route, we used Laravel’s on-demand notifications (https://laravel.com/docs/5.7/notifications#on-demand-notifications) to send the notification email to our Mailtrap.io email address. The ‘return Sent’ line just provides some visual feedback.

Visit the ‘test-mail’ route in your browser and then check your Mailtrap inbox to see the email that has been sent.

STEP 3— Customizing our template
To modify the HTML and plain-text template used by mail notifications, we need to publish the notification package’s resources. We achieve this by running the command below.

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

After running this command, the mail notification templates will be located in the resources/views/vendor directory. The templates directly responsible for the look and structure of our email are resources/views/vendor/notifications/email.blade.php which holds content and resources/views/vendor/mail/html/message.blade.php which defines the structure. The colors and style are controlled by the CSS file in resources/views/vendor/mail/html/themes/default.css

To replace the app name on the email template with your logo,

  1. Add your logo to the public folder
  2. Open the file resources/views/vendor/mail/html/mail.blade.php and comment out the line {{config('app.name')}}
  3. Under it, add {<img src="{{asset('yourLogoFileName')}}" alt="{{config('app.name')}}"> if the logo was added to the public folder of your Laravel installation.

You can visit the ‘test-mail’ route again to send the mail and see the result of your changes. Don’t forget to view the results in your Mailtrap inbox.

To change the email style and color, edit the resources/views/vendor/mail/html/themes/default.css file and keep testing until you are satisfied with the outcome. Below is what I got.

To make other changes to the structure of the email template, check out this excellent article by Adnan Sabanovic.

Thanks for reading. Hope this helps.

Follow me on Twitter
Add me on LinkedIn

Christian Jombo

Written by

Passionate about building amazing solutions for social and business problems using technology