Interactive Shopping Widget for Email

Update 10/7/2015: Based on Assu’s comment below I did another check and sure enough AOL Mail now supports forms.

This example shows how you can create an interactive carousel in email that leverages the power of form support to add products to a shopping cart.

We leverage the concepts in the Tabs for Email post and this example works with the native iOS and Android mail clients as well as the Webmail versions of Yahoo! Mail and Gmail. Like the Tab example, this one doesn’t work with Outlook.com either so users on Outlook.com will see fallback content.

Interactive Email Carousel With Add To Cart


Using Amazon.com’s Add To Cart

For this example, we will use Amazon.com’s affiliate add to cart feature. I chose to use this so that you don’t have to write the “backend code” to try out this example.

The format of a form to add a product to an Amazon.com shopping cart looks like this:

<form method="GET" action="https://www.amazon.com/gp/aws/cart/add.html target=_new "> 
<input type="hidden" name="AssociateTag" value="storeid-20"/> 
<input type="hidden" name="SubscriptionId" value="[AWSAccessKeyId]"/> 
<input type="hidden" name="ASIN.1" value="B00003CWT6"/>
<input type="hidden" name="Quantity.1" value="1"/>
<input type="image" name="add" value="Buy from Amazon.com" border="0" alt="Buy from Amazon.com" src="http://images.amazon.com/images/G/01/associates/add-to-cart.gif"> 
</form> 

For this example we want the user to be able to select a few colors of an iPhone 6 case. To start off we will have to get the ASIN of the products:

Blue: B00MUQ9E7C
Pink: B00MUQ9DVO
Black: B00MUQ9DLO

Then we create the carousel using the same technique that we used to create Interactive Tabs for Email. For this example instead of tabs we use colored boxes.

Can’t wait to get started with interactive email?
Try out the Image Carousel for Email Builder.



Filling the Form Values

From the Tabs example you learned that the Tabs are driven using radio inputs. For the example instead of assigning the radio input a random name, we use ASIN.1 as the name and the ASIN tied to the different colors as values.

<input type=radio name=”ASIN.1″ value=”B00MUQ9E7C”>

We use a select input to allow the recipient to select the number of cases to put into the cart.

<select name="Quantity.1">
<option value="1">1</option>
<option value="2">2</option>
<option value="3">3</option>
</select>

The rest of the fields we’ll just use hidden fields as they are required by Amazon but not relevant to our example.

Capability Detection and Fallback

Update: Previously AOL Mail did not support the form tag, however that has since changed. In order to get forms to work in AOL Mail the submissions must go to a https link and the “target” attribute of the form must be set.

As usual we need to provide fallback for clients that don’t support forms as well as good ol Outlook 2007-2013.

In the Tabs example, we moved the content of Tab 1 outside the Tab container so that unsupported clients will still see the content of Tab 1. In this example we’ll simply hide the whole unit for unsupported clients and display a separate block for fallback content.

The unsupported clients this time are: Outlook and Outlook.com.

Expanding on the capability detection technique in the Tabs example, we add a further test for the presence of forms in addition to checking for the support of the :checked pseudo class before displaying the form contents.

<style>
form.formcheck .tabcheck:checked + .container{
{
  display:block !important;
  max-height: none !important;
  height: auto !important;
}
/* Gmail lang trick */
* form[lang="x-formcheck"] [lang="x-tabcheck"]:checked + [lang="x-container"]
{
  display:block !important;
  max-height: none !important;
  height: auto !important;
}
</style>
 
<form class="formcheck" lang="x-formcheck" method="GET" action="https://www.amazon.com/gp/aws/cart/add.html" target=_new >
<input type=radio class="tabcheck" lang="x-tabcheck" style="display:none !important;" checked>
<div class="container" lang="x-container" style="display:none;height:0px;max-height:0px;overflow:hidden;">
FORM CONTENT
</div>
</form>

To display an alternative block of content for unsupported clients, we reverse the logic and show the alternative content by default and hiding it if support for forms and the :checked pseudo-class is detected.

Unsupported Content

<style>
form.formcheck .tabcheck:checked + .fallback{
  display:none !important;
  display:none;
  max-height: 0px;
  height: 0px;
  overflow: hidden;
}
/* Gmail lang trick */
* form[lang="x-formcheck"] [lang="x-tabcheck"]:checked + [lang="x-fallback"]
{
  max-height: 0px;
  height: 0px;
  overflow: hidden;
}
</style>
 
<form class="formcheck" lang="x-formcheck">
<input type=radio class="tabcheck" lang="x-tabcheck" style="display:none !important;" checked>
<div class="fallback" lang="x-fallback">
  <table ><tr><td width="200" height="100" align="center" valign="center" style="border: 2px dotted blue;">
  Fallback Content for Unsupported Clients
  </td></tr></table>
</div>
</form>

Here’s what the fallback content will look like for our example:

add2cart-alt

Final Code

Below is the final HTML/CSS (link) incorporating the fallback content. (Version with fade in effect).

See the Pen xbpWzW by FreshInbox (@freshinbox) on CodePen.



Integrating This For Your Own Site

What you’ve seen is the ability to use a shopping widget in email to add a product to a shopping cart using the Amazon.com affiliate form code. But what if you want to implement it on your own e-commerce store? Many e-commerce engines may have similar “add to cart” API’s that you can leverage.

However, the folks over at RebelMail has taken it one step further. They’ve created a complete solution that not only generates interactive widgets from items in your store, the widgets allow customers to select a product, select payment and address options and perform a checkout directly in the email itself!.

Just like MixMax, RebelMail is pushing the envelope of email and I hope many more will do the same!

Subscribe to the #EmailGeeks Newsletter


Latest Comments
  1. Jaina

    More amazing stuff here, Justin! I do wonder how long that Gmail lang trick will be around for.

    My main concern is here is how forms are treated in terms of spam rating – do you have any idea?

    • Justin

      I’m still surprised the Gmail lang trick continues to work :) I hope they fix it by giving us the ability to use regular embedded styles! Spam rating-wise I don’t have any hard evidence so far whether it affects inboxing or not. From my tests I don’t notice them being sent to the junk folders but that’s hardly conclusive!

      • Jaina

        #canhasstyle – am I right? Come on Gmail!

  2. Abhishek

    Great Stuff. Although, I tried sending it to Gmail using a couple of ESPs(mailchimp and CM) but its showing the fallback content. Is there something i have to check whilst sending from an ESP?

    • Justin

      ESP’s often automatically “inline” styles, and that will cause the examples not to work. I know CampaignMonitor has the option to disable it per campaign, but not sure with MailChimp.

  3. Jim

    Great article! I forwarded the inbox example to some colleagues and it displayed the fall-back. Why is this happening?

    • Jim

      All colleagues are using enterprise Gmail, I should have specified.

      • Justin

        Hey Jim, unfortunately the style tag is completely stripped in Gmail for Businesses so the examples do not work there.

  4. Danny

    I used this example code to build an awesome widget, however, the fallback doesn’t work in Lotus Notes. You still see the tab-content below eachother. Any idea how to overcome this?

    • Danny

      Nevermind, already fixed (conflicting css). In Lotus Notes 8 however, the fallback still doesn’t work.

  5. Assu

    Hi, I’ve tried your code but it doesn’t work on AOL mail, ’cause send data is not permitted in AOL.
    There is a fix/css hacks to show fallback on AOL?
    Thanks

    • Justin

      Hi Assu, thanks for bringing this to my attention! I did some checks and found out AOL Mail now supports forms but requires that the post be sent to a HTTPS url and also to have the form target attribute set. I’ve since updated the code. Let me know if it works for you!

  6. Mujji

    Really great article regarding email in shopping cart.

Leave a Reply

Your email address will not be published. Required fields are marked *