Send Transactional Emails With Twilio SendGrid

hello everyone and welcome to another episode of learn with jason today on the show we're bringing back nathaniel quinoa what is up how you doing man i'm doing good things in yourself i'm doing great i'm so happy to have you back it's always a pleasure to have you on the show uh and and especially today because this is by far the most ambitious stream we've ever done it's a five parter uh and you're coming in for part four so uh before we go it's like a long relay race right i'm hoping i can grab this pattern and take it forward to the next person except instead of a baton you gotta carry me uh yes so so um we'll talk about exactly what we're building in a second but but first for everybody who's not familiar do you want to give us a little bit of a background on yourself hi my name is nathaniel akimo i'm a developer evangelist working for this awesome company i'm pointing the wrong direction cool twitter and twilio is a company that has a couple of apis and tools and and different things that developers can use to put communications into their apps whether it's messaging video for phone calls like any form of communication we probably have an api for that and like i knew i heard on the grapevine that you were building something i might need some of our tools i thought i'd come over and help you absolutely yeah yeah and i appreciate you taking time out because i know that this has not been a light period right you you just had uh you just had signal comp happen right yes so we just had signal wrap up last week so it was last week uh thursday wednesday and thursday and it's our big event where we get to make all of our product announcements we get to show off really cool things we we had signal tv which was just where we just hang out and have really just fun and we get to like see really weird and fun projects like one of my favorites ones was uh someone had built a a phone number that you could text with just ingredients and it comes back with a recipe however you can text it with random ingredients and it comes with a random recipe because it uses gpt3 to just format your ingredients in a recipe style like piece of text so like if you throw concrete at it will be like mixed the concrete stirring like raisins and put it in the oven at 200 degrees celsius hilarious but then there are also some really serious things so people who maybe do email marketing those like cool ways to make sure that like you're hitting the right people at the right times and one thing that i've been really really like interested and excited because it just got announced it's going into private beta it's like twitter live which helps you manipulate um different like participants in a video call room and then stream that out and you can make all sorts of designs we were having a conversation about this and you were saying it was tasty yeah i'm really really excited for this one because it like the thing that's really exciting about that to me is one of the big challenges is of doing web-based streaming is that a lot of times the video kind of happens externally from the rest of the stream and that means that like a lot of things can be playful and and involved and and you know that that part is is great but then the videos are kind of held apart so i want to do silly stuff like let people choose what my hat says and and like use facial recognition to like put something on my hat right like that sounds really fun to me um but i can't do that right now because this video is not part of the website it's it's separate from it so yeah like this offering has me really excited for what's possible and i can't wait to dig into it i think it's going to be an absolute blast uh yeah we're seeing some some send good love what's up uh what's up dominius kelvin dominus kelvin uh i see linda's in the chat too brian what's up everybody welcome welcome folks welcome i am super excited for what we're gonna do today so uh you were talking about email earlier and one of the things that i think is a really common challenge whenever you're building something sufficiently uh ambitious is you're probably going to find yourself in a situation where you need to send somebody updates they're going to buy something they're going to perform an action they're going to need a reminder something's going to happen in your app that that makes sense to send them an email and not like marketing email like where you would you know you're sending out a newsletter but more like transactional email you have done something in the app or you need to do something in the app and therefore this email needs to reach you that lets you know like hey something's gonna happen like hey you're about to reach your billing threshold or hey you uh you just got an order you need to go fulfill it right and yeah it's funny actually because i found out that like email is still the most popular like channel that people want to be contacted on yeah lots of really really important things happen in email mm-hmm yeah i think my my whole life at this point is dependent on email and text messages like i don't answer my phone and yeah how many how many unread emails are you want so like this is exposing too much i'll stop i can't i i will say i'm under triple digits so i'm doing okay that's good you know i i reached inbox zero today i'm very proud of myself did you hold on you know you know what i noticed you don't have your celebratory donut today did you you already had it after you after you got hit in box zero i yeah oh you know what i completely forgot about the doughnut oh no this is my identity folks call me the donut king on my stream because every time i build something and make it work i reward myself with a doughnut i just realized i didn't bring one so don't worry right after the stream i'm gonna head over and get some donuts i'll tweet about it we'll look for the tweet all right so um so so what we want to do today we've been building this app so let me actually switch over to the pair programming view here so that we can take a look at it so what we've been working on is this swag app for jam stack conf and it what we've done thus far is over here so we have uh we have our swag here we've got the slap bracelet which you can claim for free uh we had brian robinson help us do this if you just go to this website and i'll drop this in for y'all to try it uh if you registered for jam stack conf you can go in and put in the email that you used to register for jam stack conf and you can get one of these for free so if you put in you know jason at langstor uh it will give you your code which currently just logs in the the console so this is a very like developer friendly like wait did i break this crap i probably broke this didn't i no okay we can do it we can do it do the thing yeah i bro i am literally going through this to try and get my slap wrist man i really hope i didn't break this um something is happening that i don't know what it is uh oh is this is it algolia is like not digging this thing or is it not submitting this thing do the do the thing hmm okay so uh curious curious that i can't get that to do what i want um but yeah so this should work clearly is not doing that right now uh but uh but yeah so anyways if you you can also just hit the function that we're hitting and you can find that in the code here it is a a code called it's a serverless function called claim swag which is somewhere in here this one uh so you can just post your email address as email to claim swag and that'll give you back a code and register you to get a free a free thingy um but we also have this wonderful swag pack that i have a discount code for so if you want 25 off of this thing if i can find the discount code which is in my inbox on slack oh my goodness there's really cool stickers inside that swag pack and i'm just i'm just there's there's some stickers that are really catching out the five stickers you see that one with the little nice the wonderful character that little owl that's there and with a backpack looking good looking good what a developer right we just zoom in look at this this is this is some good stuff so you can get all of this it is listed at 40 bucks but we've got a 25 off discount and you'll be able to get your uh it's two t-shirts this is a bath bomb you get a pop socket you get a bunch of stickers and so it's uh this is all from sponsors netlify algolia contentful sentry commerce layer and twilio so uh you know lots and lots of good stuff here it's it's 30 bucks and you will get uh all of this good gear that helps us you know it just helps us keep the lights on with the conference it is very expensive during a conference and this uh this makes it all possible um you know through the generous support of sponsors who pay most of the bills and then uh the things like this that that help us give away swag at less than cost that's what i'll say um but so anyways that is uh that's kind of what we've been working on and we already have this integrated with shopify so this is all this is data pulled from shopify if you go to build one of these we can claim the the bracelet and here it is and if i go to check out it's going to take me over to uh to the shopify checkout and then we get like here we go our our discount code is is done i can complete that order and get my my slap bracelet um we've got algolia set up with this command bar we've got uh we use the the shopify cart api to build this actual cart so that we can you know add and remove things from our cart it's it's really powerful really nice i screwed up some z index which is why that uh that algolia thing is over the top of it um but this is giving us the ability to very quickly build out these swag packs and uh this is you know this is powerful stuff but i currently don't have a way to know when someone has claimed anything because the the notification from shopify goes to somebody else on my team and the the sale notification goes to the person who got the swag but like i don't know if anybody's using this app so what i was hoping we could do today and what you could help me with is i want to build a transactional email that will let me know whenever somebody has ordered something on the site and for for everybody who's watching what we could do with this is we could uh we could you know use this to if if somebody needed to perform an action if we wanted to let somebody know that like hey your your cart is here but it's you haven't checked out yet you can do a follow-up using transactional email so this is just one application of how it could work i mean like the actual transactional emails coming from shopify are powered by twitter you're saying grid right so it's like oh those already going and then you can now like take that code and actually write for some of your own custom events as well but go on sorry i love that i had no idea that that sendgrid was behind shopify that's i mean that's cool though right like i love i love finding out that like all of the web is kind of powered by the same services yeah and and it's cool it's also just cool to know that like you're using something that's trusted by a company that sends as much email as shopify does like so many businesses are built on shopify they have to send probably millions if not billions of emails we send like like 100 baby especially black friday like black friday weekend and like a hunt like i don't want to say 100 billion but it's definitely in the tens of billions of emails that we send over like a two week 24 or 48 hour window that is unbelievable and so yeah so we're basically instead of trying to do um our own version of email which you can there there are open source libraries out there that'll let you send email and they're they're good but like there's a lot that goes into this so so let's start by let's take a look at sendgrid so um well actually hold on before we do that let's first and foremost everybody go follow nathaniel on twitter uh we're also well thank you if you wanna if you wanna find out more about twilio uh you've got all the videos from signal on here right like if we yeah so here's signal tv look at look at those wonderful people look at these folks this is great um so you've got lots of stuff going on here uh we've got twilio itself if you want to go look at all of the things that are happening we've just this that design of the website must have just gone out because i have literally have not seen that update yeah it looks good this looks great i love this oh good little animations what a yeah this is a good up congrats to your team on an excellent redesign that looks awesome yeah this is cool and then we're specifically using twilio sendgrid today so this is uh this is part of what we're digging into here and the thing that's nice about sendgrid is there are a huge number of concerns when you're sending email and one of the biggest challenges is how do i not end up in the spam folder because if you're if your email doesn't come in with if it looks like it's spoofed which is what a lot of the the open source libraries end up looking like unfortunately because they don't have all this this weight of like hey we're a trustworthy delivery service um you you can look like you're spoofed and then you go to spam or if you don't send the right headers if you don't get these these different domain settings right like all these things can happen that that basically make you look like spam and therefore your emails never make it to the people you're trying to send them to so can you talk a little bit about like what all is happening with sendgrid to make sure that this stuff actually works oh it's a couple of things it's like some of the things you said about all of these um headers and all of these things that can be very easy to forget but what happens is each of these um into each of these email service providers um for example like your hotmails versus your hotmails oh my gosh i just aged myself you're like your microsoft emails versus your like google emails and all of the different providers like they all have like their own secret source for figuring out what is spam and it's based on a lot of flags also based on like what people mark as spam as well and what sangria does is it really tries to understand that and then do some of the hard work for you and then also give you insights and literally tell you like this is what you're doing wrong and this is what you should do to increase deliverability and sometimes there's some really really easy wins that you can like just get straight away which is really nice as well and things like making sure that your like account is is sort of it's coming from like a right email not a spoofed email like you said because all of these things they add credibility when you're going through that inbox of the person you're trying to reach make sure you don't end up in spam yeah also like you said though having that weight of we are send grid and we do a lot of work to make sure all of the emails sent from our platform are not spam or are not like sort of malicious i would say malicious because of that we also gain extra credibility nice nice nice um i'm trying to get again uh i'm being forced to do uh two-factor off so everybody hold please while i get that set up oh see now we can shame jason he did not have jacob i'm sorry uh yeah obviously this has happened to me on stream where um i opened a new like twitter account like sometimes i do like a like a hard refresh on my demo account [Applause] [Music] i deserve that i deserve that i forgot how much the the audience in your streams get involved all right here we go uh okay so now i have a code and that code is here whoops uh using authy for 2fa to keep it all in the family you don't have to use all thief but yeah we we like it when you wait i did i did i just put in the code what are you doing uh did you get the one from your email oh wait you've already set up yeah log yeah there you go you're in oh you look like you were in okay so i'm here clicking the button right oh two factor off i got a code and now i'm going to continue you better work better work yo what are you doing what are you doing to me that's weird okay let's uh let's maybe clear clear things because i must have broken something um so we'll just i'm pretty sure that you've logged on before right yeah maybe it's even said look it even says set up 2fa required false ah killing me killing me um all right so i'm just gonna take all of this i'm just gonna get rid of all the data no more data now we're going to reload oh wait redirect to log out that's what happened i got caught in some weird loop where i like was on the logout page and it redirected me to the login page and then it redirected me to the logout page so that's my own fault for doing goofy things with the way that this works so let's uh let's get one more code in here it's going to work for sure this time uh hey all right so now i have things it's all working everything is doing what i want um oh yeah chat was chat was already on this if we had been paying attention oh someone's ringing my doorbell do you mind just giving me two secs while i quickly go absolutely yes i'm not expecting anyone or anything but give me a second all right so uh while nathaniel becomes a starry sky for us we will just dig in here and look a little bit so so what i've been using is uh i did a little bit of this ahead of time because when you're setting up uh domains you need to make sure that the domains are uh clear and i need to find here's mail settings right and so in order for me to no that's not the one i was sending authentication so you have to actually like have an authenticated domain and to do that um i will just click this button so everybody can see it and uh we'll just do a different one would you like to brand the links for this domain i don't care um hey he's back i was showing how to how to do this the domain authentication so like if um if we want to send from like jamstackconf.com and then you have some other things that we could do uh we don't need a custom return path we don't need that so then we can hit next and it'll give us this like set of c names that we can use um which i'm going to have to delete these but i've already done this so um so now if i go back to my settings and sender authentication it'll show me two and i can delete this one um so this one's gone get out of here uh so now i have my one domain that's actually like set up and configured and this is the stuff that that you have to do to avoid spam that's kind of what we were talking about right yeah because what you can do is like what you'll see later is when we're using the api you can specify oh this is the email address that i want to send from but what will happen will be like from this email but it really came from this other email which will be like sangria or have sangria in there as well and what you want it to do is to really have it authentically coming from you and that's why we bring that in yeah and it's you know it's it's really great to be able to do that because you know first of all i don't trust emails that come from not the domain that that it's sent from like that's what they tell like phishing 101 in any any corporate security training is like hey if the email comes from somebody and you don't recognize the domain probably throw it in the trash so it's uh it's you know it's good to be able to send from your own domain it's especially good when that comes in with a like it's trustworthy you have proven i own this domain i can modify the domain records for it and that's how we know that this is actually from who it says it's from um and so now that we've done that i've got that set up then uh i need to get like what do i need to do next um if we want to now what we're thinking about you would need to do is you would need to get api keys so that we can use them within our code so that we can write code that would send an email i'm going to start off screen in case this shows the keys it doesn't show the keys okay we're coming back um so you can see your api key now i already created one of these so that i could put the um so that i could put it into the app ahead of time so we wouldn't have to wait uh to make that happen variables exactly we got our environment variable set up i feel like we're doing good like any stream where we've gone like x many minutes without actually like doxing ourselves is always a win always a win i'm i'm very happy with us right now for for all the things that we've done uh i'm proud of us okay so here's our app that we've been working on and we're on the dev branch so i'm gonna go ahead and open this thing up and here it is my computer's starting to chug and that's always a concerning sign so let me start running netlify dev here and i'll just show you we uh we're using the netify cli and notify dev which will do a lot of things for us because this i this site is deployed on nullify we're able to pull in all of our secret keys that we need including the sengrid api key zander look at you go 10 subs awesome people love it i love it thank you so much um welcome everybody remember there's a there's a boop emote that i haven't seen yet and all y'all just got access to it so you can get it are we going to get buried and be we're going to find out um so here is our setup here we've got our local host and now we're running the site it's up on localhost 888 it's letting our functions load uh in the background so we've got a proxy server set up for that we've got the site running locally so that we can we can do all that dev um here we go here we go yeah i told you like the moment you called it out i was like you are asking to be buried you're like it's not it's not alone with jason's stream if i don't get buried in poops at some point um okay so now we're running and that means that we can start setting up a function and so the function that i want to set up is called send confirmation cool and so i already installed just again because i wasn't sure how much time we were going to have and i didn't want to get us into trouble there i already installed the sendgrid mail package which is an npm package for like the the sendgrid sdk now i don't know how this works i just installed it there's actually so many different i think when people think about sangria they only think about okay i'm gonna send an email but there's actually so much you can do that you can like pass emails coming in you can handle like contacts as well so there's always like different parts of the of the library for that so we're just focused on sending mail for now absolutely yeah we're we're definitely doing like the the original use case not the only use case yeah um okay so you want to go and get your your api key yes so it's already in so uh that is going to be process dot m dot send grid api key i think let me double check yeah but the one thing is we want to like add it to to mail so we we set the api key using like mail should have a method called uh set api key so if you oh yep there it is here's our auto auto complete and then just like this takes in the process perfect all right and so at this point we are authenticated sendgrid knows who we are so we can just do stuff awesome and what we probably want to do is let's say we want to just let's just practice like sending an email when this is hit when this function runs and then it's pretty simple like i think we we stick it in a try catch because like any time there's an api there is a small chance that things might not work but what we all do is uh and you've got a synchronous function which is perfect for this because i like to use a weight is we can just say like mail.send await mail.send and okay that's great so let's we get here messages like error sending email um and then in here we're going to await mail.send okay and we can see here that we've got some autocomplete happening so data so if i open this up and then i can hit the command or the control space to get our autocomplete because typescript is magic and we can just start seeing what's happening here so from that's that seems like an email field rom is going to be the email that we set up already okay or the email domain so we can like for example we might have like a no reply at jamstack.com okay so we'll we'll no reply at jams.conf.com okay so let's and then it's gonna also be who you're sending to now like usually what you'd have is you'd have whatever event that triggers this function will have some information like the old this is the email of the person we're going should we just hard code it for now um let's send it to you actually i'm going to send it to an inbox that i can show on screen so let's go support learn with jason.dev because that's an empty inbox that i can actually show us um and then you get a subject subject line and this can just be whatever we want so you made a let's see let's say someone claimed some swag and and then because like in the body it will rather than a body you kind of have two options so you can either go with text which would just be like this is the written text or you can go with html now i'm pretty sure we've seen like fancy emails with like all of the different styling that html has to offer so we can do that and we can just put in html tags like you don't need to worry about body and everything think of this as everything that would live within that body okay so we can do like uh let's do like an h3 and we'll say someone claimed jam stack comp swag and we'll say like h3 and then someone out there is looking fly uh and then we can make this like i don't know we'll we'll just link to our we'll link to our site so that we can look at it here's not that one not that one not that one oh what i'm in the wrong oh that's that's why this is weird i'm in the wrong window um here this one yeah so we'll link to this and like i don't know why you would link to the site that you definitely built and then we can do our closing paragraph tag and that's an email okay so we've gotta we got kind of a basic email going here and then when we're done we gotta oops we gotta send and just return um just say like yo this worked probably one or two hundred and uh there we go and this is like my favorite thing about like saying grid and just to be honest twilio apis as a whole like sangria the one caveat is you have to go and do a little bit of setup to make sure you're coming from an authenticated email address and from like an official emergency but other than that there's always just really really simple like pieces of code only like a few lines of code that actually go into whatever you're building as well yeah you know what i see like the dominus kelvi is like going ahead like of what we're doing we're gonna talk about templates i do want to talk about templates it's pretty yeah okay so let's do this let's get this thing sending and then we will uh i mean honestly it should be we should have this sending as soon as postman loads and so once this loads for us so we can go to uh what do we call this one send confirmation whoops whoa oh release notes uh so we'll go to send confirmation and then i if i send this as a get request because we didn't send any like we're not using any so really post or get would work in this case but gets the simplest so let's send it it says email sent okay i'll go over to my email here and switch to this inbox and hey hey look at that okay so we've got some swag we got some swag and look my my heading is bolded we've got some texts here we've got a link the link worked and opened in this browser over here right so we can see that um but also check this out it has like a jamstack conf.com click thing so it's actually part of the the jamstackconf.com setup it's like i'm clicking on my own url which is and i i'm pretty sure you can confirm this i could change that url6387 to be like my own thing right so it could be like email.jamscomp.com or something yeah absolutely so this is really powerful i have one more thing that i want to do though can i make this like come from a name believe you can i don't think i've done it myself and and but give me a second what we actually do is we would when we come from we would put something in front of it give me one second okay so i know how i do this in in like gmail so i'm i'm gonna try what i would do in gmail and see if it just works like this is this is my this is my suspicion is that if we do it like this because this is like the the node thing and it's like the standard thing so let's just let's just see what so this will add a name to that email and so damn stack it'll take a second to come through this is the thing we're so used to like really though the agency of like whatsapp and like sms tada there we go jams.com all right so and and like what i like about that is it because i've you know i've seen this format before from like writing my name in uh package.json like this is how you would specify it in package.json this is how i do it when i'm like trying to send emails uh and i want it to show up in my address book later i'll like write somebody's name and then their email like this um so that was just really intuitive it like worked the way that i expected it to work which is really nice that also means that if we were getting somebody's information like we we get a payload from like whatever web hook that we're using i could also format this to send it to like their name at their email and not have to do anything fancy i just like drop it in like this would be the name variable this would be the email variable and we're off to the races that is really slick like i that's so nice to use um good and so this is like just a simple transaction and this is like what i often think of the most basic version of sendgrid but then what happens is a lot of times for example you're you want to have a designer maybe design the app or someone else design the app and all you want to do is maybe give that design some sort of parameters say here is the name here are these things and then what you can do is when you send that off um when you send that off is you would actually have a template set up on sendgrid and you can have it so that it just goes and says okay go grab this template put in the name put in these other details and then create an email with that template so you can have like a designer work on it while you just write the code that's cool uh jordan just asked if it does reply to i just tested it while you were explaining that and it does indeed do a reply to so i i set the reply to here so it comes from no reply but it replies to real email and when i hit the reply button it showed up as real email and if we look in here um we can see that it was sent from no reply so it's it's doing what we expected all those things all those things work the way we want them to so that's always good news uh okay so so if we want to use those templates like we got 26 minutes you think we can do it 26 minutes yeah all right uh okay so i'm in senegal i feel like i've slowly learned over my development career that anytime someone says can we do it in x amount of time i'm always like like before i was like absolutely now i'm like oh let me let me think first but yeah if you go over to the design library okay designs okay so i'm just gonna here we'll create an email design uh suppose you can use a code editor or a design editor so the design editor is kind of like drag and drop no code solution but even if you have used the design editor all it does is it generates html that you can then edit on the fly as well oh nice okay so that'll probably be faster then we can probably do something quicker with the design editor yep okay so i'm gonna click on this here is my email comes with a okay so here's an unsubscribe block need one of those uh we need build here's okay so let's do an image drag and drop your images here let's go to unsplash and get uh always a corgi and here's oh that's that's how i'm gonna feel at the end of this week when i am done with nine streams eight streams a lot of streams um so we're gonna put this into my downloads folder and then we can drag where do you go here here's our corgi so we're going to put this corgi right in there we're going to insert it and then what we want some some text or maybe we do columns we can do columns yeah yeah cool things living columns then you can now add modules within them yeah so good okay so i'm happy about that that all looks good so i'm going to add uh text in this one and then actually why don't i just drag this one can i move this one in here i need to actually get up to the dragger bar don't i dragger hello drag it down drag it all the way down yeah there okay so now this should be see we can kind of do i need do i change it here how do i uh you want to change the text yeah click on it there you go like start typing oh i was already so intuitive i didn't even notice um let's see so you made uh someone claimed some swag let's celebrate by looking at this corgi okay so this is my oops that's not the button i was supposed to push i'm gonna save this oh do i need a subject and stuff probably yeah yep uh what you can do is you can still pass these things in if you go back one subject so you see there you go yeah and what's also called is so you actually have you can use like handlebars to adding all of like your dynamic data whenever you're typing so let's say you want to bring in something you can use handlebars which is pretty cool okay so i got got that i'm happy with that cool and should we test it if you click on the test your email yes so we'll go okay so that's the email that we'll send it to so this is the from email okay so we need no reply at jamstackcom.com yep okay and you want to send a test message let's do it my test message has been sent okay cool cool cool i think uh my there it is my my email was too zoomed in for the columns to work but that's also good to know that it flows and doesn't just like blow out my and cause me to side scroll um but this is great like i've now got the ability to unsubscribe i've got my unsubscribed preferences good good good uh this is great like this is doing exactly what we wanted to do so how would i like actually use this so what there is another parameter which lets you specify which template you want to use if you go back you're on top left that back button okay you should be able to get an identifier from this let's go to the edit right and what we want is we want the oh we've got the name cool you got the design name that's what we need this one then what we want say go on this is the one we need yeah this is the one we need okay and then what we do is we then go over to our code and then we just use we actually specify which um template we want to use okay so like do i get rid of all of this then so no you still want your from you still want your two and then what you're going to do if you just give me a second template id was an auto complete id and then and then yeah i'm trying to remember where to get the template from because it so there's a there's like this up here is that the template id i don't think so this is private to your account and is only visible to you it's in the dynamic template sorry to read the whole thing has been redesigned so if you go to build if you don't mind going to build the build tab uh no that's building is this you or me that's got onedrive isn't signed in oh that's me that is yeah sorry no worries um okay so we've got email body content container tag um design library your images preview duplicate single send give me a moment i'm just going to figure out where that is from where where to find that id because once we have that id we just stick it in and then that's it we've got everything we have personalizations okay i'm gonna just experiment while you're looking i'm gonna try by name because that would be dope if it were if it was smart enough to do that so let's see this is probably gonna fail no okay so that one doesn't work let's try this id up here because that looks like a unique identifier i'm going to drop this in here and send hey that one looked like it worked let's see what happens that does look like what they do look like so if that worked it should come in here momentarily go back to your template i did send it to myself right uh back to my template or to the the template on on on same grid gotcha and right at the bottom of your if you close preview look it right at the bottom of the page uh if you click on it edit and right at the bottom it used to be in this bottom corner click on test your email ah where is it gone give me one moment is it like am i too zoomed in no it's not that i don't believe so see did it show up it's it it said it sent but that it didn't actually arrive so i wonder if i just i must have just sent it like an invalid id and it like ignored it settings and i've lost the template design and and ui oh does it have to be a dynamic template my bad i've gotten mixed up okay it's okay you know what we have we still have a few minutes left we can do this again it's the same so we use the same thing for marketing for the marketing product and i got the uis mixed up so this is the template id that's the template id that really okay where is it going add a version but this this should now work right like now you can select that design yeah okay so i'm going to send this version but but if you go back you need to specify the design that it will use i do the add version add version click on the add version and then click on the design oh okay select i think this is just to make a version of it though right because it's okay my bad yeah you're right you're all right let's see let's see it's gonna do it this time i believe come on do the thing here hey look it came in it's using the the right header and now let's see if i reply it's still using my reply to header so all of the things that we wanted to happen are happening um and that happened fast enough that we can actually try to put some some stuff in here so what if we want what if i want to put in some like handlebar stuff uh can i can i define custom things and feed them in through my template like if i wanted it to be like something cool can i then specify something cool when i what you would do is when you're writing your code you're going to add something called personalizations okay and if i want to do a personalization is that in here somewhere no it's in your code editor in my code editor okay so i go oh wait wait wait sorry let me you mean this code editor yeah in in your yeah there you go gotcha and is this an object yep okay is personalization right or are you missing a comment personalizations property personalizations i think it's spelling that it doesn't like okay um okay and then so if i just put in like something cool and so the personalization then it goes to a very specific yep so did i do it the personalizations can then be used in your template if you give me a moment let me quickly find it it'd be really cool if this just worked i'm just like spamming myself with emails to try things this is this is how email design always goes for me as i like end up sending myself oh this will work 100 emails okay so i did something wrong because it doesn't like if this just works my personalizations for some reason i should log the actual error huh yeah okay so let's try that let's run this and then let's go to the logs and it says array expected for personalizations that's okay we can do that um but this and then it's gonna have a two so who the first thing one's gonna go to in the personalizations yeah um well i should probably look this up right what section of the api so that i'm not making you dictate this to me no worries i'm just sending how to send an email with dynamic templates i've just sent it in our zoom chat so you can grab it uh okay i gotta do that through dynamics always on another computer all templates my bad i should have done oh good all good um so i have an api key dynamic transactional templates and then we want to get down to these personalizations all right so this is gonna do we've got the from email we've got the personalizations we've got a template id and then it's letting us do aha okay so we start here and we do a 2 and the 2 is going to be we'll just move this one down all right so we've got that and then it wants dynamic template data so i will give it that and that is also an object and there's and then this now you can use your custom whatever field you want so it could be something cool now okay so i do that good and then where does it show me in the the template and then what we want to do is we then want to use handlebars in our template so we in so that part i was right on then is just like where is it here so just this should be something cool i believe nice okay so we've got this we've got something cool dynamic template data and that theoretically should do the thing send the email sent hey hey all right and show new messages show me potato salad let's see it came back empty so i did something wrong are there rules about naming dynamic transactional templates dynamic template data they can where did we where did we have it i put it let me go back to in the in the in the design that's what i mean uh i put it into wait here here in the design i put it in here something cool did it not like the fact that we've if you if you close that if you go to um if you hit the x on on this text module yeah and go to build oh it's build then a module is there anything to do with data coming in no let's see if we can preview yeah it doesn't show test data must be formatted as json so you can stick in that json so you can put in something cool okay so if i get it in right it it should work let me just check that we didn't get it well it just did there yeah so it does it right in the preview which means that i'm not sending it right in the code so dynamic template data change dynamic template data to that with our underscores and capital t's because we took the docks from like just creating um and try that you're right the auto complete was when we when we copied it over we copied it from like it was using curl rather than like the node library oh i got you and there's a different set of what's the word um things that you're supposed to do with naming conventions hey there we go we got it so i mean this is amazing like i i love that we were able to do this that fast we've got uh we've got like dynamic content coming in so we can send in anything here you know we could say what somebody bought we could say what time it is we like we could do all sorts of stuff and because this is all handled in a serverless function you know we can figure any data we want up here we can you know hey let's like calculate anything and then we can we can drop it in here but then what's also called is so if you remember the personalizations it was to each individual so what you can do is with one api call you can send personalized emails to multiple people right so let's say you wanted to send something to a group of people like you would have the from and the reply to and the rest of the things and then you'd bring in the template and then for the personalization you would then iterate that array at the bottom exactly let's let's do this let's let's do one um and then we can do an email let's see we got seven minutes we can get this happen support learnwithjason.dev okay so here's our emails and you're saying here now let me go down to our personalizations scroll down so you see here how we've got an array of objects right so all we need to do is is hand it people oh okay so we can dynamically or we can do something to like map an array right exactly okay so we're gonna we're gonna send back uh person name and person email right yeah and then we can also say like wow name this was dynamic okay yeah greeting oh wait person.name right so we can if i format all my javascript properly so this then should send to everybody what did i miss what don't you like did you close the map like the opening sure didn't and i'm beach balling there we go okay so that should be working and now if i go back in here i can go to design click on this and let's pass in reading right save that and then when we go out here and actually run let me make sure i didn't crash nope it's all good um so then i'm going to send error sending email what didn't you like it says bad request 400 do i get rate limited i can't be right authorization on behalf of body errors array so i probably need to like get into that body errors let's uh let's do that so what is it it's error dot response dot body dot errors error response body errors let me just try this one more time okay and now it should have logged something a little bit the two array is required for all personalization objects and must have at least one email with a valid email address i mean if you've got an array within an array this may be me being silly but when you did person maps to you've got an array it's no no yes you're absolutely right i'm i'm returning yup good call okay so what i need to return instead is just the object yeah so we can make that an object and we can make that an object and now we get an array okay yeah so let's try that one more time good catch i would have taken me the rest of the episode email sent okay it's one of those things where i've gone through it before there we go and then i'm going to take this off screen so i can open up the one in my own inbox because i don't know what else is in here um and here's the one to me and this came in with all the stuff we wanted it's got the no reply it came to my email it's got the personalization in place like that's slick that's really really really slick so the cool thing is it's then now in your hands what you want to do with it how you want to sort of make it um so basically whatever you want to build it's now up to you and then also i love the fact that you've got the unsubscribe buttons that you can then link to other things as well and it gives you some of that functionality out of the box box already yeah i mean it's just like it's just a nice like it all feels good right like what what we're getting here is you know we we didn't have to do very much work we were able to customize this very quickly we got our our email templates in place where you know we're sending something that's designed so if we work with our design team we could get something that really looked nice and all of the text could be dynamic like we could make this a header and then some body text and then like whatever our sideline is maybe like our top articles and like you can do some really incredible stuff here that i think is is just so powerful right and especially when you're working with a bigger company where you've got multiple people doing different wearing different hats like you are the developer you want to send the email you don't care about what you may not personally care about what the email looks like and then you have a designer which loves that but doesn't care about getting the data from the database and making sure everyone gets the right and thing in the thing and you can just both work together and as long as you agree on this like this is your api contract right if if they use these handlebars templates you can feed whatever data you want into that thing and it's it's just nice like it's a nice experience what's also starts getting extra deep is you can actually do more than just use handlebars because you're going to have conditionals within your email design so you can have like flags to say like this person is a javascript developer show them like the javascript tips and this person is a php developer showed them the php tips i've like not even scratched the surface personally myself but i know with the handlebars syntax there's some really really powerful cool things you can do and and i mean there's even stuff that we could do like dynamically in javascript as well right so we could do something like uh person.name equals json and we could change it to be like oops right we and so like now if it's me you can you can do some custom stuff and so we could we can split that just right inside of our functions as well so like send grid is going to give us capabilities we have a serverless function so we can use javascript like we can really start to build some stuff in here now i would caution against doing both of those things like choose one place to do logic and then do it where it makes sense um but this is you know this is a really powerful way to to kind of approach this where we've got emails coming in and i think this one is yeah we should get another email in here and this one should be dynamic and say you're a doofus but this one over here we've got the new email and it's this one's not to me so it's more you know well i don't know if we can call this formal but but you know we so there's there's layers of personalization you could do where if you have you know stuff in your database about who's a vip who's yeah you mentioned interests like all those things are just incredibly valuable and with that nathaniel we did it we got this it's it's working we got way further than i think it's the first time we've actually finished like our project on a stream or a second i think it might be first or second you're not wrong because i'm always talking way too much i like i love it so i'm getting nathaniel we're actually gonna focus and build a fake so all right everybody what we're gonna do everybody please go and uh click click click click on the follow button on nathaniel's profile make sure you go and check out uh twitch.tv twilio and also head over to this uh this this swag app here and get yourself one of those uh those swag packs they're 25 percent off and phil jason's emails with notifications from send chris yes yes please do it uh no we didn't actually set up the um we didn't set up the the web hook for this so to actually make it i i mean it's okay i don't i don't actually need these emails but uh but you know to to do it we would just go to shopify and set up a web hook that would call our serverless function and a lot of services have event driven hooks or event hooks web hooks uh in nullified we call them like build hooks where you can call a serverless function when a thing happens and that is a really powerful way to go and this is just sending right so then we also have like an inbound pass where you can set up a web for what happens when you receive an email address maybe you want to do some fancy stuff with it maybe push it to someone else or like read the contents and based on the reply send it to the right place as well lots of awesome stuff you can do with this absolutely all right y'all well we are gonna take a short break nathaniel thank you so much for your time today this was an absolute blast we're going to come back in 13 minutes with ben vinegar from the sentry team and we're going to wrap this app up by adding some error tracking so don't go anywhere we're not even going to turn the stream off we're just going to see you in 13 minutes thanks again we'll see you in a minute

Channel: Learn With Jason

Views: 426

Keywords:

Id: EYdvyc4xz24

Length: 62min 1sec (3721 seconds)

Published: Thu Oct 28 2021