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 cloudcity.com 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.