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