How to Use AI to Design Emails
Let's build with Zapier and AI (100+ videos)📅 2025-01-31
Transcript
[00:00] let me show you how you can start using artificial intelligence to design emails notice the button on this email for reset password or the link highlight I'll show you how to do all this with AI if you have no coding experience welcome back y'all in today's video I'm going to show you how to design any type of email and we're going to be using zapier as an automation software where we can automatically send these emails for whatever the use case may be now in today's specific video I'm going to show you an automation that I use within my software company bump ups when we onboard a new employee today's video is sponsored by zapier as you already know
[00:30] me and the zapier team we've been working together trying to create some cool videos for y'all to start leveraging within your business or personal life therefore let's jump in as this is going to be extremely valuable to make our emails look a lot more pretty great new zap within bump UPS we use Google workspace as our admin space for the entire emails that we use throughout our company so our trigger is going to be Google workspace whatever admin workspace you use for emails same daily here this will be a trigger event now the specific event that we use is going to be when the new user is created and then obviously I could test it get all the relevant data and input it for
[01:01] our next step here which is showing you how to design emails with AI so we're going to do Gmail we're going to do the action event of send email choose the email it should be sent from we're going to continue here and obviously the steps I'm about to show you right now could help you design any type of email across any platform but for now the two person will just be contact at webcafe a.com so we can actually see the email in theory though this technically should be coming from our trigger step here which would be that email data from here we'll put a subject line so we'll say like welcome to the team and then the next step here which is the most important instead of body type being plain we're doing HTML so what's great about zapier is that it
[01:32] does a lot of the heavy lifting that we would care about in a template type email such as adding your signature you know adding a label on the underlying email itself so maybe you put like a tag like business oriented attachments like PDF starter guides Etc but the real meat and potatoes and why you clicked on this video is how do we create body emails that look good with no coding experience to do this we're going to use an AI chat bot like Chad gbt this works with Gemini Claude deep seek now any type of AI model will be able to give you the kind of outputs you're looking for and the beauty of AI chat Bots is that we can
[02:03] use lay IND dictation to get really cool outputs I'm going to say we want to design the body of an email for welcoming my team at XYZ company first section is welcome message second section title it get started guide brief description and a button with dark UI that says get access to start make it linked to zapier.com obviously fill the variables with whatever is relevant to you third section says how most the messages are over slack conclude with welcoming the team Etc output with HTML CSS very important in the prompting structure output with HTML CSS include
[02:33] that line Second variables what is your company name XYZ company will be my company name for now third zappier links any type of link right so where are you linking them off to is this a Google shared doc that's within your company that is viewer access do you put that link there for now though this is a good starting step hit enter it will start generating our code if you have no clue how to code don't worry you don't have to understand any of this cuz we're going to be able to Pro back and forth with this chat to get exactly what we like this saves you hundreds of dollars
[03:04] and a bunch of time from hiring Outsourcing and Contracting for this kind of work make copy now for us to visually see what this looks like make sure you put in like an email that you have access to in the inbox so contact to web cafe.com paste all the relevant code there in the body we're going to hit continue here and then we're going to say test step we want to see what this email looks like once we test the step it's going to pop up right here and this is going to be the workflow here we are going to be able to click into this email and see how our underlying UI is rendered user interface or I guess just design of email sometimes I talk to technical but as you can see this is
[03:35] already a pretty good starting point here we have a nice little UI element of Welcome to XYZ company we got our get started guide here with our button communication and then a nice little footer this is where this becomes plug-and playay here so for example as you can probably already tell to get access to start just doesn't look good with this blue text and you know what I want this to be more left aligned so all I need to do is two things if you're using an AI chat bot that allows you to screenshot and upload images that's a good idea we can simply screenshot this
[04:05] I would attach the image and simply say you see this button make it left Aline and also the text should be white in the button don't worry if you can't upload images I'll show you how to do it alternative to this but this is just a really easy way for you to enter here it's going to Output all the code again and for us to paste over again so draft one done sometimes when dealing with outputs it's just going to give you what it changed this can be really annoying and confusing if if you've never coded before so here's a suggestion just say give me the entire code file output with
[04:37] change just ask for the entire outputs here so you don't have to kind of scour through line by line on the code and paste over that's annoying we don't we don't like that so just get the entire output here and then just copy paste copy come back over here contr a command a paste again new code continue retest St this is the workflow as you can see it messed up it didn't make that white text so we're going to go ahead and identify that in our next prompting here but what it did do correctly is it made it left aligned and when I click the button here it does take me to zapier.com obviously choose the link and
[05:09] Direction you want to take the individual if there is a link and a button within your email let's fix this little issue that we're having here where it's not changing it to White text so typically what I like to do is that you don't have to completely understand all this code what you should understand is what's being rendered or how we're visually seeing it this all incurs within the body and to keep it really simple here typically an AI chat bot will tell you exactly what each section is relevant to the code so we know this is the welcome area we know this is the get started guide therefore we know within the get started guide there's an issue with that button come over here
[05:40] get started guide I don't like this button I need to have that white text therefore what I like to do is sometimes just copy the exact section just copy it paste it we want and then just give the exact text that you want to change your element you want to change get access to start to be white text and then sometimes to re remind the AI chat box output the entire file with this change what you'll notice is this workflow works perfectly if you don't know how to code and it allows you to do really cool stuff like design an awesome first email
[06:12] or any emails that are repetitive or automated throughout your entire workflow of your business so with this change I should expect nothing to change in the email except white text copy paste new code retest step and here we go our button looks good now the text inside it being white and it's more legible therefore now you've just unlocked a very very very fundamental skill when it comes to email design that's going to circumnavigate a lot of cost to your business so make sure you leave a like if you felt like you learned something let me go to end this video off with some tips I have when doing this kind of design first things first let me just clear up some jargon
[06:43] real quick HTML is structuring when it comes to how we render design render is just how we visually see it right like this is being rendered therefore HTML is like we're putting welcome to XYZ company at the top and then we're putting footer at the bottom just the structuring of the underlying information the thing that makes it look pretty and good and basically why we click on this video is the CSS that's what makes the button look cool that's what add this little blue effect little round corners up here CSS is pretty obvious to identify within code AS
[07:13] you'll notice it's like multiple lines here font family background color header background color Etc when rendering HTML components you'll notice it's just like H1 welcome to XYZ company which like where did the design come from where why is it blue Corbin we'll simply just go to header right there and if you come up to header there we go background color padding text the Line This is not fundamental for you to understand to do the steps I just showed you but it's just nice to know therefore if you feel like you learned something in today's video make sure you leave a like it's
[07:44] completely free we're going to do more zap your content on this channel if you were at the beginning of this video and you're like Corbin what were all those zaap your automations simply on this channel there's over 100 plus videos on how to leverage Automation and AI in your business so you can check that out see about leaving it at the end here without Ado I'll see you in the next video time to start making pretty emails two random videos that's my face I'll see you in the next video