Interactive Email – checkbox hack

I’m going to just post an example instead of going into all the detail, but here is some detail.

This hack only works in Webkit email clients, which is pretty much IOS devices, Outlook on the Mac, Apple mail, and maybe others, but doesn’t work in Outlook in general, Gmail, Yahoo, etc.

To target Webkit email clients, we use this media query:

@media screen and (-webkit-min-device-pixel-ratio: 0)

In this example, we are using the CSS Psudo element :checked to create a click event listener. Part of the hack is that we can use the <label> tag to wrap around content we want clickable. The actual form element being clicked stays hidden.


Styles
input, .webkit_content {display: none;}
@media screen and (-webkit-min-device-pixel-ratio: 0) {
  .webkit-hide {display:none;}
  #A1_result {display:none;}
  #A1:checked ~ #A1_result {display:block}
}
HTML
<div class="webkit-hide">
  Show this if it is not a Webkit email client
</div>
<!-- [if (gte mso 9)|(IE)]>
<!-->
<form class="webkit_content">
  <label for="A1">
    <input id="A1" name="radio_btn" type="radio" value="">
    Click here!
  </label>
    <div id="A1_result">
      Show this content when you click on "Click here!" above.
    </div>
  </form>
<!--<![endif]-->

AmpScript landing page

Landing Pages

Link from Email to landing page.
Insert Landing Page ID between [default] tags.

Click <a conversion=”false” alias=”here” title=”here” href=”%%microsite_base_url[default]3156318[/default]%%”>here</a> to go to the landing page.

%%=ContentAreaByName(“my contents\Fuel Like a Pro\ET_Test”)=%%

AmpScript date

Date

//This will show the current Date and Time, plus 14 days:::::

%%[
VAR @currentSystemTime
SET @currentSystemTime = DateAdd(Now() ,”14″,”D”) ]%%

hello %%=v(@currentSystemTime)=%%

————————-
// This will add a number to another number pulled from a field

%%=Add([POSTAL_CODE],300)=%%

————————-

// Today’s Date plus 14 days (with formatting – no time):

%%=Format(DateAdd(Now(), “14”,”D”), “MM/dd/yyyy”)=%%

—————————-
Today’s Date Substitution String (Short Date Format):
%%xtshortdate%%
8/14/2011
—————————-
Today’s Date Substitution String (Long Date Format):
%%xtlongdate%%
Sunday, August 14, 2009
—————————-
Today’s Date MM/dd/yyyy:
%%=Format(Now(),”MM/dd/yyyy”)=%%
08/14/2011
—————————-
Today’s Date plus 7 days (no formatting):
%%=DateAdd(Now(), “7”,”D”)=%%
8/21/2011 10:05:55 PM
—————————-
Today’s Date plus 7 days (with formatting – no time):
%%=Format(DateAdd(Now(), “7”,”D”), “MM/dd/yyyy”)=%%
08/21/2011
—————————-
FYI – Today’s Date plus 7 days (Format first; Date add second; Time stamp removed;

Defaults to midnight)
%%=DateAdd(Format(Now(),”MM/dd/yyyy”), “7”,”D”)=%%
8/21/2011 12:00:00 AM

AmpScript output

Output (render to page):

create and set a variable. Assign it’s value from a field, then render it to the page.

This example is not practical as you could just use personalization (%%FIRST_NAME%%).

%%[
var @R_F_NAME
Set @R_F_NAME = FIRST_NAME
Output(v(@R_F_NAME))
]%%

 

———-
Output (render to page):

%%[
Output(“Hello World!”))
]%%

———-
Output a variable:

%%[
var @PERSONALIZATION_ASSET_02
Set @PERSONALIZATION_ASSET_02 =
Output(v(@url))
]%%
———-
Output and Concat:

%%[
var @logo
Set @logo = nav_logo.jpg
Output(Concat(“<img src=http://targetbase.com/images/common/”,@logo,”>”))
]%%