Build An Uptime Monitor with Inertia

Sign in Get started

This episode is for members only

Sign up to access "Build An Uptime Monitor with Inertia" right now.

Already a member? Sign in to continue

Playing

40. Making the emails a bit friendlier

Episodes

0%

Your progress

Total: 4h 59m
Played: 0m
Remaining: 4h 59m

Join or sign in to track your progress

01. Introduction

01. Introduction and demo

02. A fresh Inertia project

02. Sites

03. Site and dashboard setup

04. Building the site selector dropdown

05. Making use of API resources

06. Setting the default site

07. Setting up Vue modals

08. Creating a site

03. Endpoints

09. Setting up endpoints

10. Enum endpoint frequencies

11. Creating the endpoint form

12. Storing an endpoint

13. Validating and authorizing endpoint stores

14. Normalizing the endpoint location

15. Displaying endpoints

16. Deleting endpoints

17. Toggling inline editing for endpoints

18. Applying a watcher to the endpoint form

19. Storing endpoint edits

04. Checking endpoints

20. Determining endpoints to check

21. Creating a job to perform a check

22. Making an HTTP request

23. Scheduling checks every second

24. Setting up the check relationship

25. Updating the job

26. Showing the last status

27. Expanded list of checks

28. The response body modal

29. Authorizing the endpoint details

30. Calculating uptime for endpoints

05. Queuing

31. Setting up queues

32. Queuing the endpoint check

06. Email notifications

33. Setting up email in Laravel

34. Site model email notification storage

35. Adding email addresses via the UI

36. Listing and deleting email addresses

07. Downtime notifications

37. Observing when to notify

38. Creating an endpoint down notification

39. Creating an endpoint recovery notification

40. Making the emails a bit friendlier

08. Extras

41. Deleting sites

42. Eager loading

43. Recovery notification bug

44. No sites fix and placeholder

Transcript

00:00

So let's finish up notifications by just making these emails look a little bit nicer and to kind of cheat here what I like to do is go ahead and generate out if we just cancel these off quickly generate out a Laravel mail which we haven't done because we're using notifications and I'm just

00:16

going to call this test but I'm going to provide the markdown option in here and I'm going to say emails and dot test that will do so what that will have done is generated out a emails test.play.php obviously we're using email but it doesn't matter and it would have also generated out a test mail class here as well as well as our example one which we can actually get rid of now as well

00:42

so over in this test.play.php file is pretty much the markdown or some of the markdown functionality that we can use in Laravel emails this will be enough for us but you can go over to the docs to find out more so I'm going to go ahead and copy that delete that emails folder and we're pretty much just going to go ahead and start to fill in what we want inside of these emails so

01:03

let's go ahead and start with the went down email we're going to paste this in we've got an introduction header here this is all markdown we've got a button here which we can press which may be useful for going through to our dashboard so let's start with the header and we're going to go and do pretty much what we did in the subject and say endpoint location went down you might want

01:24

to include the site there as well because you might have multiple sites and I'm just going to go ahead and copy and paste over some copy that I wrote earlier very very simple obviously it looks like endpoint url so we've already seen that method over in the endpoint model that just gives the site url and the location it's down we'll email you and let you know when it is recovered

01:45

now for the button itself we're going to go ahead and say visit dashboard so the user can jump straight over to the dashboard obviously click on that endpoint we could even forward them over to the endpoint index where it shows all of the checks and then they can go through and inspect this so here we're just going to go ahead and route through to the dashboard let's just make

02:05

sure that we definitely kept the name for that so let's go up here to the dashboard and yeah we did so we can reference that by name and of course remember we want to go over to the correct site that's really really important we don't just want to hit the user on the dashboard because that will go over to their latest dashboard from remember from earlier we can provide in here the site id

02:26

or we could just pass the site model into this root function and that's going to move them over to the correct dashboard which is really important and that's pretty much it so we can really just copy this and paste this over into the recovered email and just start to change over some things that we need so i'm just going to switch this up to great news and then the endpoint url has

02:50

recovered that should do it and then again we can allow the user to go over and visit the dashboard it's exactly the same thing here okay so now that we've done that let's cancel off and rerun our queue let's rerun our scheduler and let's go ahead and check out these emails let's just delete what we've got in there so far and we're going to go ahead and force this down by changing the url

03:13

let's head over and see them emails roll in okay there we go that's a much nicer email it's the laravel standard template of course you can modify it but you'll agree this looks a little bit better we can hit visit dashboard that's going to send us straight over to our dashboard for that particular site so regardless of which site this is on that's going to forward you over to the

03:33

correct one and that looks good email looks good so let's change this over to the recovered email just so we can see what this looks like and there we go great news this is recovered so there we go just tidying up them emails giving a little bit more design to these making them look a little bit better

Episode summary

In this episode, we're wrapping up our work on notifications by giving our emails a much-needed makeover. Instead of sending out plain, boring emails, we use Laravel's markdown email functionality to make things look a lot friendlier and user-friendly.

We'll start by generating a new Laravel mail using the markdown option, which gives us a template to work from. Then, we dive into editing the markdown to personalize our notification emails—adding clear headers, helpful body content, and buttons that let users hop straight to their dashboard.

We also make sure that when users click on those buttons, they're taken to the correct site-specific dashboard (not just any dashboard!). Once that's all set up, we take a look at how the emails now look in our inbox—clean, styled, and much nicer to read.

Finally, we test both the 'site down' and the 'recovered' emails, showing how the improved design and content works in both situations. This episode is all about those little touches that help your notifications feel much more professional and user-friendly.

Episode discussion

No comments, yet. Be the first!