In the last video we were able to successfully test out our mail or object.
So looks like the mailer is working correctly but there is one immediate glaring thing that's caught
my eye and that is the actual body of the e-mail.
Right now our e-mail template is just passing through the survey body which is definitely not what we
want.
Remember we want to kind of explain to users exactly what's going on here and tell them hey give us
your input click on one of these buttons and then if there is a message that is provided by the person
who authored the survey we of course do want to show it in there.
We want to assume that we're going to kind of instruct the user what they need to do.
So remember that the body of the e-mail is being produced currently by our survey template file.
So let's edit that thing and make sure that the body of the e-mail makes a little more sense than it
does right now.
So I going to change back over to my code editor.
I'm going to find my services directory inside of their email templates and then open up the survey
template file.
At present we are returning a simple div that contains the body text from the survey.
Obviously not quite what we want.
So I'm going to take all this and remove it for now rather than returning just a simple string we're
going to return an entire small snippet here.
This is going to be a multi-line string.
So to handle multiline strings very well are very elegantly with javascript.
We usually make use of tactic's strings or string templates.
So I'm going to place an opening back Tich a closing back Tich a semi-colon afterwards and then side
of here we can write as much H TMail as we want to without having to put any escape characters when
we need a newline.
OK so let's get to it.
We're going to vastly improve the template here.
We're going to add in a lot of markup which means we're going to do a pretty good amount of typing.
So let's get to it.
First off we're going to place our female tag who place our body tag and then inside of the body tag
will place a div with a style of text dash a line center like so.
So everything inside that email is going to be centered perfectly then immediately inside the div will
place and H-3 that kind of tells the user what's going on here and why they receive this email will
say I'd like your input like so.
Well then place a p tag.
So a paragraph tag and give the user a little bit more explanation of what's going on.
Please answer the following question.
We'll close out the tag place another one.
And then inside the second tag is where we're going to place the survey body so whatever body was provided
to the survey model that's where we're going to place it right in here.
So we'll put our dollar sign or curly braces and reference survey body like so then underneath this
will place the two links that a user can click on to either specify yes or no.
So give a div inside the first one.
I'm going to place an anchor tag with an H ref.
And right now we're going to use localhost we're going to send the user back to localhost or our current
re-act application.
But we will very shortly come back and do a little bit more exploration on exactly what this route should
be.
So right now we're just going to send the user to localhost but we will very shortly come back and resolve
this.
So we will say HTP colon slash slash localhost 3000.
I'll close off the anchor tag and this will be our guest button and then we're going to do the exact
same thing again for the no button.
So a Tref TTP localhost 3000 closed off the anchor tag and say no.
OK.
So a lot of typing.
But this is basically what we need for right now.
So we've got the entire body of the email.
Now of course if you wanted to you can add a tremendous amount of styling to this thing.
Do we think that we're going to change in the future inside this template is to go back and change out
this dreadful property a little bit more.
So if you want to add in a lot of pretty styling a lot of stuff to make this email much more attractive
certainly feel free to do so.
There's a lot of tools online for making great looking emails.
You can use those tools and copy all the markup directly into this file and just make sure that eventually
somewhere you place the survey body property and the two anchor tags that we need to indicate either
yes or no to this particular survey.
OK.
So I think that we should probably test this out again.
Now I did just kill those Axel's helpers to assign Axel's to the window object so we can use X Files
from the console we just remove that.
But you know I'm kind of realizing maybe we should test this out again.
So I'm going to go back to my client file client directory excuse me I'll find the index file in there
and I can put the accedes helpers back in.
So when you say import x Dio's from ASIO's and window x equals x Yes.
And I'm probably just going to leave these in here for a while.
I'll put a comment at the top right above it and just say development only X Deo's helpers like so.
So we'll just leave these in for right now and maybe we later come back and take them out.
OK so time to test this out.
I will make sure that my servers running.
Looks like it is no airs over here.
I'm going to go back over to my re-act application or refresh the page now I don't have to type out
the entire survey from scratch again.
I can press the up arrow in the console and find the survey declaration again.
So here's my survey.
But this time I'm going to give it a much more reasonable body.
I'm going to say we would love to hear if you enjoyed our services and then maybe for a subject will
give us something realistic as well and we'll say something like give us feedback and so like that whatever
you need to just catch the user's eye.
So now we've got our survey again we're going to send this up to our API using X-post post give our
route and then specify the survey.
Now again we are not really resolving their request at this point so their request will hang but we
should see that email pop up in our inbox.
So if I flip back over to Gmail Now here's my new e-mail says inbox 1.
Here's give us feedback.
All right.
Check it out.
So it says I'd like your input please answer the following question.
We would love to hear if you enjoyed our services and then you click yes or no.
Now very important at this point I'm going to open up my chrome dev tools over here inside of Gmail
and I'm going to inspect these two anchor tags.
So while we've got some deeply nested H.T. mail if I gave it just a little bit of space here let's kind
to shrink this thing down.
OK there we go.
OK.
So here's our link.
You can see that it very plainly has a crazy generated anchor tag in here.
So you and I we just defined this link right here this anchor tag we had just said oh yeah.
Take us to local home 3000.
But clearly without a doubt centigrade is absolutely positively rewriting that you are l that we specified
in there with its own custom klick tracking you are l instead.
And so this is what we're talking about earlier where we are going to rely upon said grid to track user's
clicks rather than trying to do it ourselves because the email that we provide to send grid is always
the same for everyone.
But since Great has the ability to customize these links on a per user basis so Sigurd can identify
our users we cannot.
So the link is really crazy.
But when we click on it it still ends up redirecting us back over to localhost 3000.
So send grid intercepts the link.
They say OK we're going to record some metric sphere and then they force the user onto eventually the
route that we actually specified which is localhost 3000.
OK.
So it looks like our e-mail the body of it looks a little bit better than it did before.
Again if you want to put a little bit of time into customizing this thing make it look a little bit
better certainly feel free to do so.
The only thing that we're going to do again is to customize the two anchor tags.
All right.
So let's take a quick break.
When we come back in the next section we're going to start to work on our survey route's handler a little
bit more just to make sure that this thing actually eventually resolves the request.
We're also going to inspect send grid and make sure that our Click Track team is set up properly and
then we'll continue working on our application.
So let's keep going in the next section.