CSS Selector on Responsive Email template - email

I am currently studying on Responsive Email template. I saw some of the templates online using Attribute Selector like this: h1[class="title"]. Why don't just just h1.title, is there any special trick for doing Email template like this?

This trick is done to stop some email clients from recognizing this tag. The most common use of this would be to hide tags that are only used in a mobile version of this email.
For instance the Yahoo.com email client, does not recognize media types or css using the bracketed format. So by using this format you can trick Yahoo mail to not parse css specifically used for the mobile version.

Related

If and For in Play Framework's email template

I am writing a email notification part of a project using Play Framework.I don't know how to use if and for loop in the email template. All I can find are using ${var} to show specific variables in the email.
The Mailer class uses the same template engine as of in HTML. So we can just use the syntax of html to write a mail template.

Keycloak's FreeMarker email template

I'm using Keycloak to send a forgot password email, and from what I've read on their docs and the FreeMarker docs, it seems like I should be able to use HTML tags just fine. However, when I use them in the password-rest.ftl file, it renders the whole tag like so:
<p>Some Text</p>
instead of just showing: Some Text
I found this (https://issues.jboss.org/browse/KEYCLOAK-681) saying that Keycloak can only send plain text emails, and I just wanted to see if anyone knew for sure since I have found some stuff that looks like the HTML tags should be usable How do you block emails from appearing as links in FreeMarker?
Any advice or thoughts on this would be greatly appreciated.
There are two sub-directories containing templates for emails. They are called text and html. When you want HTML you need to edit templates located in html directory.
Keycloak itself sends emails as multi-part messages containing both plain-text and HTML versions - email client decides which one is displayed.
I am not familiar with Keycloak, but somehow you should set the Mime type of your e-mail to "text/html" (e.g. have a look at this Stack Overflow answer).
Which version of Keycloak are you using? Comparing the source code of 'FreeMarkerEmailProvider' in tag 1.2.0.Final and on branch 1.3.x lets me assume that Keycloak is able to handle text/html at least from version 1.3.x on.
But again: I am not familiar with Keycloak...

Show/Hide content in a Gmail email body

Our organization is completely on Gmail (Google Apps), and we are trying to figure out a way to show/hide content in the body of the email and have the recipient decide whether to show the content or collapse it to hide it.
The reason why we need to do this is because we send out generic emails in various languages, so we want the recipient to simply click on their language and have the email show the text in that language.
Things we want to avoid:
Sending multiple emails out in different language (and have to manage email recipients languages and multiple emails).
Display the content for all the languages one after another in the body of the email and have the user scroll down to their language.
One way I thought of doing this is by using Javascript to show/hide a div in the email that would hold the content for each language. For example, I would have an "English" hyperlink, a "Spanish" hyperlink, a "Chinese" hyperlink, etc and on click, the JS would show the div associated to the language that was clicked.
However, I was not able to get Javascript to run in Gmail when I sent a HTML email from an email client (Thunderbird).
The solution I'm looking for should ideally only require Gmail as some of the users do not have access to browse any other site outside of Gmail from their Chrome browser.
The simple solution would just be an HTML (no javascript) email with a "table of contents" at the top showing the various languages. Clicking a language in the table of contents would jump to that language's anchor in the HTML (and thus, the correct language message body).
The hard way to do this would be to write a Gmail contextual gadget:
https://developers.google.com/google-apps/gmail/contextual_gadgets
Options that don't work:
JavaScript doesn't work in Gmail
Pseudo-selectors aren't supported, so you can't do anything like :active td { height:100px }
display:none and visibility:invisible aren't supported
Ideas that might work
Point the image to your server, and get the HTTP headers. With a combination of HTTP_ACCEPT_LANGUAGE and the IP address, you should be able to serve up the appropriate image.
In Gmail labs, there is an option to add apps by XML. You could write an app that lets you do more advanced stuff, and tell your users to install that.
Personally, I wouldn't worry about just displaying the content one after the other. Put an index of the languages at the top of the email, with anchor links to the relevant language.

Prevent hyperlinks in HTML emails (namely Outlook)

We've got some HTML emails that get sent out that show email addresses our service has blocked. When viewing the email in Outlook (and presumably in other clients as well) these plain-text email addresses get turned into clickable links that would compose a new message to this address when clicked.
Is there a way to prevent this from happening? Perhaps a meta tag with a flag that would prevent Outlook from converting these into clickable links?
Most email clients strip out META tags, Javascript, and other types of code not necessary for email. Outlook is going to do what it wants with your email, so what you may want to do is wrap the addresses with your own anchor tag and use a blank HREF. Then, style the link to look like the rest of your text.
I think a better answer is to formulate anything that you think a mail client might try to generate a link for in a way that breaks up the string a bit like this: https://stackoverflow.com/a/7625887/470749

using form buttons for spamproof email-addresses

I have been looking at some methods for spamproof email methods here. I'd like to propose a more simple approach: Since I need a couple of different email addresses I considered just using a selectbox with JS or serverside redirect, as per examples on here.
Because google doesn't spider forms (dixit Matt Cutts), and spam-harvester script don't either (I think????) this would make sense to do.
I would love to be able to do this without using a script. So why not use one form per email?
<form action="mailto:test#domain.tld" method="get">
<input type="submit" value="test#domain.tld"/>
</form>
It seems the button text can be copied but not pasted, so that's a disadvantage.
Is this approach any good? or any other recommendations?
A robot uses the text of the page to get the email. It does not care if that text is in a button or within the body so using a button will not help.
Outside of using javascript, the only solution I know of would be written text, an image or Flash.
Create an image with your email or write out the email like: "test at domain dot tld"
Flash could provide you with a more secure (but not 100%) way of allowing people to click on an email but would not work on iPhone browsers and those that do not have the plug-in.
Another way is to use a simple captcha to before displaying the email in the PHP code.
Email: (1+2 = ?) then test#domain.tld
Because:
The email address is still in the page, and thus easily harvestable
mailto: URIs as form actions often fail
The reason server side form handlers stop email addresses being harvested is because the email address is not exposed to the user.