Python-powered chat apps with Twilio and SendGrid Transcripts
Chapter: Beautiful confirmation emails
Lecture: Stylized, beautiful HTML emails

Learn more about this course
Login or purchase this course to watch this video and the rest of the course contents.
0:00 But we made some awesome progress.
0:01 We have our test email, which,
0:03 given the name you might imagine,
0:04 this is transient and will not be lasting long.
0:07 This is not a great email,
0:09 but this will come through looking like you'd expect,
0:12 right? It's proper HTML somewhere else.
0:15 But it opens the door to do all the cool things,
0:17 like with the shared layout and the proper content that we can put into these sections
0:22 and so on. So let's do that now.
0:26 Over here, I'm going to create a new file called HTML file and is called
0:30 _shared_email.html. I'm gonna drop in some code because again,
0:36 this is not a Web design class.
0:38 It's not worth going through all the little nitpicky details of CSS and so on.
0:44 So here, let me just talk you through this.
0:46 We've got our email from Cloud City cakes and right at the top of this cool
0:51 banner over in our static folder.
0:53 We've got an email banner. If we look at that look like this beautiful,
0:58 we want to put that right at the top of all the emails we send, theoretically
1:02 and make that a link back to our URL here.
1:05 We've got some additional styles, like the font and whatnot.
1:09 And here we've got our content and the default is
1:12 Hey, there's no content. But remember,
1:14 all the pages will put their content in here.
1:16 So every email we send is going to use this shared layout with the same advantages
1:21 that every page has, like have all the common look and feel and used pieces
1:25 and so on. And here's our address and so on,
1:28 Right? You probably want to put the formal Canned spam type of details in here
1:32 to let the people unsubscribe. Remember,
1:34 this is not marketing. This is.
1:36 You purchase something. Here is your receipt.
1:38 You signed up and you asked us to reset your email.
1:41 Here's your email reset. So it's not exactly in the email newsletter type of marketing
1:45 category. So then what we're going to do is going to come over here and
1:49 want to say would have reciept and let's drop in some HTML here as well
1:55 And check this out. We're using our shared email template or filling in the
2:01 conduct block with all of this stuff.
2:02 Not that much stuff and check it out.
2:05 Hi, name. Thank you for ordering one of our award winning cakes.
2:10 This is your confirmation email and receipt of your purchase.
2:13 Get your WhatsApp message later when we've baked it.
2:17 And here we're using some of the details about the order making it capital.
2:20 So, like, capital S, small, capital L large and so on.
2:25 Same for the flavor. You've seen it making it look a little bit better,
2:28 because everything is lower case. And that looks a little bit weird.
2:30 More formatting. The number to actually have zero floating points instead of like,
2:36 12.000000..1 Which can happen sometimes with floating point numbers like No,
2:41 no, no. Just show it as an integer,
2:43 basically. All right, now let's rerun this and over an email service.
2:49 We need to ask for a different one.
2:52 We're going to ask for a receipt.html
2:54 this one right there. And this can go ahead and delete that it's checked
2:58 in to get up if you want to see it at that point of time.
3:01 But now it's gone. Shall we try again?
3:03 I say, Yes. Let's try, click this to trigger.
3:07 Remember, it doesn't really send the email.
3:09 It just puts it into our little output window.
3:11 For the moment, we didn't crash.
3:12 Good sign. What have we got?
3:15 Look at all that proper HTML.
3:16 Hello, world. Here's your cloud City cake.
3:20 What goes in the middle?
3:21 Hi, Mike Kennedy. Thank you for ordering one of our award winning cakes.
3:25 We're so excited for you to pick up your small, red velvet, chocolate, lemon 17 gold
3:32 coin priced cake. You'll get your WhatsApp message soon.
3:37 Fantastic. Now it doesn't quite look that great yet because we haven't sent it.
3:41 I think now we've done our debugging.
3:42 It's time to get rid of this this stuff and actually send the email.
3:48 Let's send it one more time.
3:55 Well, it's off. Let's go check our email.
3:58 Wow, Look at this, folks,
3:59 check this out. Here's our cloud City cakes.
4:01 And if I click on it,
4:02 you can see it's going to open in and ngrok here.
4:06 OfCourse you'd use cloudcity.com or whatever your real addresses.
4:10 Our cake order is being processed.
4:11 Hi, Mike Kennedy. Thanks for your order and you will receive a WhatsApp.
4:14 Look at this proper html Here.
4:17 Order details size: small, flavor: Red velvet,
4:20 etcetera, price 17 Gold coins, Love the little emoji.
4:23 Just reply if you have any questions.
4:25 Thank you, Cloud City cake team.
4:27 And here's our little footer. This part and all of this stuff up top in
4:32 the overall look and feel come from that shared layout,
4:35 just like it does for HTML pages.
4:37 We have this cool benefit for email as well.
4:40 Fantastic! I'm super excited and pleased with how this looks.