so in this video i'm gonna give you some ideas for using html templates in gmail
now if you want to use html in gmail when you create a message if you want to just use their
web editor if you go to their compose there is no html option now there are some unusual ways
when you can basically write something down here and use the inspector in your browser
but it's not very convenient way of doing this for many reasons the most important one being is that
if you use a template you're probably going to be using that over and over again and going here and
trying to modify the html every time it's probably not going to be sustainable so for that reason i'm
going to exit out of this and instead we'll just open a new tab and we'll go to script.google.com
so again the link script script.google.com you want to make sure you're logged in to your gmail
account so you may already have some projects here if you do ignore them it doesn't matter
we just need a new project so i'm just going to go ahead under new project
i'm going to click on top here and rename this i'll call it gmail html templates or something
you can call it whatever you want it doesn't matter and in this editor we can actually create
html so we can go under this plus and do html and that should get a new html file started here we
can name this file whatever we want i'm just going to call it tmpl for template one hit enter and see
now i have this tmpl1 html and you can see how it started some html for me so here if you have your
template you would just copy paste it instead of this for testing we'll just put some h1 here
and we'll add some color to this hopefully you're aware of this already but if you're not
style containers are not supported in gmail so if you use them they will basically just get stripped
so basically it will not have any effect there are inliners you can use to make this happen i
will give you some options for that later in this video for right now let's just continue with our
html here so inline styles would work so i'm going to do something like color red it should be good
enough for me to test this so i'm going to go ahead and save this assuming this is the template
i want to use at this point we want to get this to our gmail so what we'll do we'll go
to this code.gs and all we're gonna need is two simple lines of code to get this done so
we'll create a constant call it html and in this we're gonna use html service
and i'm gonna do create template from file here as the file name i'm gonna pass that html file name
this tmpl1 the name of this file node.html just the name and on this we're gonna do dot evaluate
and dot get content to get that html content so all of this is case sensitive so make sure you
match uppercase lowercases and then finally to get this to gmail we'll just add this line so we'll do
create a draft in our gmail so here we're gonna have these three arguments who's gonna be getting
this email the subject line and the body if you want you can have some defaults for this
i'm just gonna leave the first one empty for the subject line i'll just call it my html email
you can leave that empty too and for body i'm gonna leave it empty again
the reason i'm leaving the body empty is because we're going to pass here html body as our
argument and that will be this html coming from here so using these two lines we're going to grab
this html file from here and create a draft in our gmail account using the second line so at this
point if you want you can rename this function we can call this create template 1 save this and if
i run this it's gonna add a draft to my gmail account so if i go ahead and click run on this
if you're running this the first time it's gonna give you a prompt to set some permissions
other times when you run this in the future you're not gonna have to do this again
so i'm gonna do review permission
click on my account if you have a free gmail account you will get this screen
where you would have to do advanced and do go to this gmail your project name on save
if you have a paid account you wouldn't get this so you would get here and finally allow
so if i go now to my gmail account now this just tells us about that permissions that we set
if i go to my draft on the left see i got this draft already made for me if i click
on this you'll see that we got that h1 with that color set so now we have our html email
here so you can basically just complete who you're sending this to whatever else you have to do maybe
change your subject line if you have to change anything else maybe instead of testing you you
want to update this text and then you can hit send and there it is you're sending your html email
and again later once you send this email you could basically reuse this so all you would have to do
is go back to again script.google.com so when you go to that script.google.com it will get you here
here you will find that script that we just made click on this and just simply run that and it will
create now another draft using that same template and you would see if i go back there it is that's
another draft and if you wanted to use other templates too so you can make different drafts
you could basically just go back here make more html files i'm going to call this one tmpl2
and basically just put your html here i'll just copy this first one paste it here and just change
this to blue color and call it another one save this so now i want to create a draft from this
so for this i'll just copy all of that what i did here paste it below and i'll just rename this to
create template 2 and change this file name here to tmpl2 to match the new file name from here
save it so now here depending on which one you run from this drop down that's the draft
that it's going to create for you so if i go now template 2 hit run it should now create that blue
now if your template doesn't have your css in lined for you then you
probably want to inline it so just to give you an example let's say i have
in one of these templates i have some sort of table so i'm just going to quickly create an
html table here i'll speed this up so you don't have to watch me writing all of this
so basically what i did here i made a table with three rows in them the first row
just contains the headers product and price with two columns and then i have my next row being the
first column coffee and the price and then t and price that would be our third row here so
if i wanted to add some styles to this table so for example if i want to have some borders
so i can actually see the table you might think that you could just go here and do style here
and then do something like thtd border one pixel solid some color
now the problem with this is that this style html element is gonna get stripped from your
email at least if you're sending this in gmail and that would be a problem because you wouldn't
be able to see those borders so just to display that in action i'm gonna take this template now
and i'm gonna create another draft let me just make sure i clear all the drafts i already have
and we'll grab this second one which will be this template 2 up here and run that to create another
template from this and if i go back and take a look see it's made the template and we can see
there is a table but there is no borders now this is where you're gonna need some sort of
inliner so you can grab whatever html you got and use some sort of inliner tool so i'm gonna
copy all of that html including that css i have here and there are many inliners you could use
i don't really have a favorite this one right here that i'm gonna use is from mailchimp
i'm not endorsing them i just know that it works so if you have recommendations for inliners
maybe posting comments so i'll just go ahead and paste that all here and if i click convert
what that's going to do basically it's gonna take all those styles from here and it's gonna
basically see in line them for each element like this so now i can grab this new code copy that go
to my gmail right here and if you want to work on this here you probably want to make a copy of this
so you have a copy to work on because this one i'm going to replace with that
new copy that was basically done with this inliner with all of this inline
borders so at this point i'm gonna save this and if i go back and rerun this
go back and take a look
this should be the latest one see now we can actually see those borders so if your template
doesn't have everything in line already you may need to use some sort of inliners so you
can actually see your css and finally let's send this email and make sure it's actually readable
so i'm just going to send it here send
so let's open our inbox that's that email that was sent through that
form and you can see it works just as it should and that should do it
thanks for watching please subscribe and i'll see in the next video