Email Templates for Identity

Support
, ,
#1

Hi there! I am attempting to create an autoresponse template for a confirmation email.

Here’s the code for the template:

Hey there!

Just one last quick step!

We just need you to confirm your email address by clicking HERE -->

Confirm your mail

Doing so will ensure all of us that the right person is

being matched to the right account within Stripe. You will be taken back to your account on

netlify to log in, and you will be connected to Stripe where you will be able to securely change

your personal information.

Again, that link is {{ .ConfirmationURL }}

It is reading it from the correct location, because I’m receiving the email when I test signing up. But the Confirmation link is not resolving to a valid link. Here’s what it looks like when it’s delivered:

image
image1127×317 9.77 KB

So, what am I doing incorrectly here? I copied the link for the confirmation directly from the docs.

Our API Id is: 74ee8351-4a32-48dd-bf8c-55838a99e80b

Thanks!

Scott

#2

I’m not sure why {{.ConfirmationURL }} doesn’t work, but know the following syntax does (change the path accordingly):

<a href="{{ .SiteURL }}/some/path/#confirmation_token={{ .Token }}">Confirm your mail</a>
#3

Thanks Tom! I’ll give it a shot.

#4

So…I gave this a shot. Unfortunately I’m not sure how to resolve the nomenclature. If I just want a confirmation link (i.e. click the link, returns to my site logged in), this syntax doesn’t work. I am trying this in Gmail but not sure that should matter.

When I just use href="{{ .SiteURL }}/#confirmation_token={{ .Token }}", I get the following:
image

So, what is going on here? If my siteURL is https://my-test-app.netlify.app, shouldn’t it resolve to href=“https://my-test-app.netlify.app/#confirmation_token=”?

Here is what it looks like in my template:

image
image799×281 11.9 KB

Thanks for the help!

#5

Also, when I do use the default template, I get the following:

image
image726×239 23.7 KB

Why would it be delivering through Mandrill? Isn’t that a MailChimp property? Is Netlify using MailChimp for deliverability?

Anyhow - I’m still a bit confused as to why the default template would work and a custom one wouldn’t. I don’t think it would be my mail reader, as the link resolution should happen at the Netlify server, shouldn’t it?

Thanks!

#6

Hi @scromie,

Yes, by default, we use Mandrill to send out emails. We’ve used them since before they were part of Mailchimp. :slight_smile:.

And you are correct that the link should be resolved on our side. I checked the deployed HTML file and it looks like the link is coming through as: <a href="">HERE</a> and <a href="/#confirmation_token=">Confirm your mail</a>.

Can you confirm that this HTML is not being processed by your build? It should be placed in a folder where it can be placed in your build folder after the build process is done without any changes to the file. Normally it would be named ‘static’ or ‘public’.

#7

Sorry for the delay - got distracted for a bit.

I updated the email so that I could see all of the variables:

Here’s a screenshot of my _site and development folder structure. As you can see here - the template is in src/email and ntl build generates the template in email/confirmation/index.html.

image
image269×676 12.5 KB

Here’s the template in me dev structure:

image
image952×550 19.7 KB

And here’s what is generated by ntl build:

image
image833×506 16.9 KB

This didn’t surprise me that much because I would think this would need to be resolved by the identity application on the server. If that’s a mistake, then there’s something incorrect in my setup possibly. Do I have to include a library in the email template code in order to get a proper generated template?

Here is how this looks when I actually try it (generated at the server):

image
image837×439 12.8 KB

Any ideas here?

Thanks,

Scott

#8

One more thing - the confirm link doesn’t work. It resolves to

https://mail.google.com/mail/u/0/#m_6088949816744879174_confirmation_token=

Thanks,

Scott

#9

Any ideas here? This is driving me nuts!

Thanks,

Scott

#10

Hi @scromie223,

You mentioned that you are generating the HTML file. Can you clarify what is happening to your templates during that process? I see the placeholders being removed by your build process. I recommend that you don’t generate or process your templates in any way and instead, just copy your template as-is to your build directory. Let me know if that helps.

1 Like
#11

Yeah I was going to say - building your site ideally shouldn’t play with that file at all. On my Gatsby-based identity sites (for example) the identity templates sit as fully static html files in the ./static/ folder - Gatsby never touches them. From my understanding, Identity reaches out to your site at the time of needing to send the email then hydrates the HTML with the liquid values and sends it. So the ‘time of needing to send the email’ is inevitably long after your build process - it’s when the user signs up. If your template tags aren’t in the file by then, no dice.

Alternatively, if you do need build the template files (to inject CSS or some other reasons) you would need to make sure that your SSG ignores the liquid injection tokens entirely so they don’t change during the build.

–
Jon

#12

I’d like to add that you have to make sure no layout is applied either. The identity templates should not have <html>, <head> and <body> tags.

1 Like
#13

Sorry - that was semantics when I said that the HTML template is getting built. I am not generating it at all. The file - confirmation.html - is created and placed in the email directory as shown in the screenshot above. BUT - if I can’t do any html in the template - how would I possibly style the template so it doesn’t look like a form of spam?

I’m going to remove the HTML and see if that resolves my dilemma, but I don’t think I did much more than <h1>, <h2>, <p>, <div>, and <a href=>. Are those out of bounds as well?

Thanks guys!!! I appreciate the eyes on this.

Scott

#14

Netlify Identity / Hosting doesn’t impose any restrictions on writing your Identity templates with HTML other than what @tomrutgers mentioned - the template itself needs to be a partial template of what would be already inside <body> tags - you shouldn’t make your own. This is just the difference of having a template that says:

<head>
</head>
<body>
  <h1>Thanks!</h1>
</body>

and a template that’s just

<h1>thanks!</h1>

– You want the latter.

That said, if your SSG is parsing that file or processing that file in any way (which would be implied by you saying that you ran ntl build and the markup changed), that needs to be disabled.

#15

Given that it appears that you’re using Eleventy, I would recommend creating a ./static/ folder (not nested inside of ./src/) and putting your confirmation.html inside of that, then using Eleventy’s Passthrough File Copy by adding

eleventyConfig.addPassthroughCopy("static")

to your config. That should ensure that your confirmation template is not getting parsed by the SSG.

–
Jon

#16

Jon - thank you SO MUCH! This makes a lot of sense. This should be clearly demonstrated in the documentation (unless it’s there and I missed it).

I’ll give it a shot.

Scott

#17

Is ./static necessary? It looks like we can have multiple passthroughs with eleventy so I’m attempting to specify my email folder now.

1 Like
#18

Not necessarily, and I certainly won’t claim to be an Eleventy wiz :nerd_face: but the goal it to have the SSG copy the untouched file over to the publish directory. As a general point of direction, those sorts of things tend to live outside of the project’s ./src/ directory (to help illustrate that it’s outside of the scope of the build tool, Eleventy in this case), but if you prefer it inside and can setup Eleventy to not process that file using the pass-through, by all means! :slight_smile:

–
Jon

1 Like
#19

Thanks for the guidance!

#20

That was it. I needed to add it to the .eleventy.js configuration file. THANK YOU!!!

2 Likes