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

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

Talk Python's Mastodon Michael Kennedy's Mastodon