WEBVTT NOTE Created by CaptionSync from Automatic Sync Technologies www.automaticsync.com 00:00:01.066 --> 00:00:05.766 align:middle Emails should always have a plain-text version, but they can also have an HTML version. 00:00:06.126 --> 00:00:07.446 align:middle And that's where the fun is! 00:00:07.856 --> 00:00:11.266 align:middle Time to make this email more presentable by adding HTML! 00:00:11.846 --> 00:00:16.606 align:middle In templates/email/, copy booking_confirmation.txt.twig 00:00:16.956 --> 00:00:20.296 align:middle and name it booking_confirmation.html.twig. 00:00:20.556 --> 00:00:24.326 align:middle The HTML version acts a bit like a full HTML page. 00:00:24.666 --> 00:00:31.386 align:middle Wrap everything in an <html> tag, add an empty <head> and wrap the content in a <body>. 00:00:31.386 --> 00:00:35.336 align:middle I'll also wrap these lines in <p> tags to get some spacing... 00:00:36.666 --> 00:00:39.776 align:middle and a <br> tag after "Regards," to add a line break. 00:00:40.186 --> 00:00:42.836 align:middle This URL can now live in a proper <a> tag. 00:00:43.276 --> 00:00:45.856 align:middle Give yourself some room and cut "Manage your booking". 00:00:46.786 --> 00:00:51.686 align:middle Add an <a> tag with the URL as the href attribute and paste the text inside. 00:00:51.826 --> 00:00:55.576 align:middle Finally, we need to tell Mailer to use this HTML template. 00:00:55.926 --> 00:01:02.306 align:middle In TripController::show(), above ->textTemplate(), add ->htmlTemplate() 00:01:02.306 --> 00:01:11.396 align:middle with email/booking_confirmation.html.twig: Test it out by booking a trip: Steve, 00:01:11.396 --> 00:01:15.206 align:middle steve@minecraft.com, any date in the future, book... 00:01:15.916 --> 00:01:16.946 align:middle then check Mailtrap. 00:01:18.346 --> 00:01:21.376 align:middle The email looks the same, but now we have an HTML tab! 00:01:22.136 --> 00:01:24.396 align:middle Oh and the "HTML Check" is really neat. 00:01:24.736 --> 00:01:29.676 align:middle It gives you a gauge of what percentage of email clients support the HTML in this email. 00:01:29.676 --> 00:01:34.846 align:middle If you didn't know, email clients are a pain in the butt: it's like the 90s all 00:01:34.846 --> 00:01:36.426 align:middle over again with different browsers. 00:01:36.696 --> 00:01:38.006 align:middle This tool helps with that. 00:01:38.836 --> 00:01:42.016 align:middle Back in the HTML tab, click the link to make sure it works. 00:01:42.676 --> 00:01:47.606 align:middle It does! So our email now has both a text and HTML version but... 00:01:47.836 --> 00:01:50.076 align:middle it's kind of a drag to maintain both. 00:01:50.076 --> 00:01:52.536 align:middle Who uses a text-only email client anyway? 00:01:52.886 --> 00:01:55.976 align:middle Probably nobody or a very low percentage of your users. 00:01:56.536 --> 00:02:01.666 align:middle Let's try something: in TripController::show(), remove the ->textTemplate() line. 00:02:02.196 --> 00:02:04.806 align:middle Our email now only has an HTML version. 00:02:05.506 --> 00:02:08.186 align:middle Book another trip and check the email in Mailtrap. 00:02:13.046 --> 00:02:14.496 align:middle We still have a text version? 00:02:15.096 --> 00:02:18.386 align:middle It looks almost like our text template but with some extra spacing. 00:02:18.386 --> 00:02:21.566 align:middle If you send an email with just an HTML version, 00:02:21.706 --> 00:02:26.096 align:middle Symfony Mailer automatically creates a text version but strips the tags. 00:02:26.356 --> 00:02:28.946 align:middle This is a nice fallback, but it's not perfect. 00:02:29.136 --> 00:02:29.996 align:middle See what's missing? 00:02:30.356 --> 00:02:32.076 align:middle The link! That's... 00:02:32.076 --> 00:02:33.046 align:middle kind of critical... 00:02:33.486 --> 00:02:37.596 align:middle The link is gone because it was in the href attribute of the anchor tag. 00:02:37.956 --> 00:02:39.786 align:middle We lost it when the tags were stripped. 00:02:40.256 --> 00:02:43.696 align:middle So, do we need to always manually maintain a text version? 00:02:44.216 --> 00:02:45.426 align:middle Not necessarily. 00:02:45.916 --> 00:02:46.786 align:middle Here's a little trick. 00:02:47.296 --> 00:02:53.976 align:middle Over in your terminal, run: composer require league/html-to-markdown This is a package 00:02:53.976 --> 00:02:56.266 align:middle that converts HTML to markdown. 00:02:56.816 --> 00:02:57.656 align:middle Wait, what? 00:02:57.716 --> 00:03:00.566 align:middle Don't we usually convert markdown to HTML? 00:03:00.996 --> 00:03:04.146 align:middle Yes, but for HTML emails, this is perfect! 00:03:04.236 --> 00:03:05.076 align:middle And guess what? 00:03:05.346 --> 00:03:07.196 align:middle There's nothing else we need to do! 00:03:07.196 --> 00:03:12.606 align:middle Symfony Mailer automatically uses this package instead of just stripping tags if available! 00:03:13.216 --> 00:03:15.986 align:middle Book yet another trip and check the email in Mailtrap. 00:03:23.096 --> 00:03:26.126 align:middle The HTML looks the same, but check the text version. 00:03:26.576 --> 00:03:29.536 align:middle Our anchor tag has been converted to a markdown link! 00:03:30.036 --> 00:03:32.386 align:middle It's still not perfect, but at least it's there! 00:03:32.386 --> 00:03:36.206 align:middle If you need full control, you'll need that separate text template, 00:03:36.496 --> 00:03:38.856 align:middle but, I think this is good enough. 00:03:38.856 --> 00:03:43.136 align:middle Back in your IDE, delete booking_confirmation.txt.twig. 00:03:43.856 --> 00:03:46.736 align:middle Next, we'll spice up this HTML with CSS!