{"id":3229,"date":"2016-10-18T08:12:33","date_gmt":"2016-10-18T08:12:33","guid":{"rendered":"http:\/\/freshinbox.com\/blog\/?p=3229"},"modified":"2016-10-24T08:30:38","modified_gmt":"2016-10-24T08:30:38","slug":"interactive-hotspots-in-email","status":"publish","type":"post","link":"https:\/\/freshinbox.com\/blog\/interactive-hotspots-in-email\/","title":{"rendered":"Interactive Hotspots in Email"},"content":{"rendered":"<p><img decoding=\"async\" src=\"https:\/\/freshinbox.com\/blog\/wp-content\/uploads\/2016\/10\/pokemon-hotspot-2.gif\" alt=\"pokemon-hotspot-2\" width=\"500\" class=\"aligncenter size-full wp-image-3231\" \/><\/p>\n<div id=\"email-me\">\n  <input type=email id=\"email-me-email\" placeholder=\"Email address\"> <input id=\"email-me-btn\" type=button value=\"See Example In Your Inbox\" style=\"-webkit-appearance: none;\">\n<\/div>\n<p><BR><\/p>\n<p>As you can see from the example above, interactive hotspots, or user initiated information overlays are an effective way to deliver additional contextual information on an image.<\/p>\n<p>This article on the <a href=\"https:\/\/www.emailonacid.com\/blog\/article\/email-development\/interactive-hotspots-in-email\">Email on Acid blog<\/a> explains how to build Hotspots in email that will work in iOS Mail, Apple Mail and AOL Mail. If you&#8217;re feeling adventurous they can be made to also work on Yahoo! Mail and Gmail Webmail as well as these clients support the :hover pseudo-class.<\/p>\n<h3>Examples of Hotspot emails.<\/h3>\n<h4>Email Marketing Insights Infographics<\/h4>\n<p>This email from Email on Acid adds more context on some stats when the user triggers a hotspot overlay.<\/p>\n<p><img decoding=\"async\" src=\"https:\/\/www.emailonacid.com\/images\/blog_images\/Emailology\/2016\/hotspots\/image03.png\" width=\"500\" class=\"aligncenter size-full wp-image-3231\" \/><\/p>\n<p><a href=\"https:\/\/www.emailonacid.com\/blog\/article\/email-development\/interactive-hotspots-in-email\" target=_new>View article<\/a><\/p>\n<p><B><a href=\"http:\/\/codepen.io\/freshinbox\/pen\/kXQjQy\" target=_new>View email<\/a><\/B><br \/>\n<BR><BR><\/p>\n<h4>Nest Product Hotspots<\/h4>\n<p>Clean and simple email featuring four products with hotspots that display product detail and Buy button when clicked. <\/p>\n<p><img decoding=\"async\" src=\"https:\/\/freshinbox.com\/blog\/wp-content\/uploads\/2016\/09\/nest-hotspot.gif\" width=\"500\" class=\"aligncenter size-full wp-image-3231\" \/><\/p>\n<p><B><a href=\"https:\/\/freshinbox.com\/gallery\/nest-store-hotspots.html\" target=_new>View email<\/a><\/B><BR><BR><\/p>\n<h4>Bobbi Brown Product Hotspots<\/h4>\n<p>Here&#8217;s one of the earliest examples of interactive hotspots in email created by the folks at <a href=\"http:\/\/rebelmail.com\" target=_new>Rebelmail<\/a>. <\/p>\n<p><img decoding=\"async\" src=\"https:\/\/freshinbox.com\/blog\/wp-content\/uploads\/2016\/09\/bobbibrown-hotspot-2.gif\" width=\"500\" class=\"aligncenter size-full wp-image-3231\" \/><\/p>\n<p><B><a href=\"https:\/\/freshinbox.com\/gallery\/bobbibrown-hotspots.html\" target=_new>View email<\/a><\/B><BR><BR><\/p>\n<p><BR><\/p>\n<div style=\"padding:10px; border: 2px solid #99C731;background-color:#FFF8DC;border-radius:5px;\">\n<form action=\"https:\/\/freshinbox1.createsend.com\/t\/i\/s\/adrmi\/\" method=\"post\" id=\"subForm\">\n<span class=\"fisub_header\" style=\"font-weight:bold;\">Subscribe to the #EmailGeeks Newsletter<\/span>\n<p><input id=\"fieldEmail\" name=\"cm-adrmi-adrmi\" type=\"email\" style=\"width:90%\" required placeholder=\"Your Email Address\" \/><\/p>\n<p><button type=\"submit\">Subscribe<\/button><\/p>\n<\/form>\n<\/div>\n<style>\n#email-me-email {\n  width:150px;\n  height:20px;\n  margin-bottom: 5px;\n  background-color: #FAFCEF;\n  font-size: 14px;\n  padding: 3px 5px;\n  display:inline-block;\n  border-radius:3px;\n  margin-left:20px;\n}\n#email-me-btn {\n  cursor: pointer;\n  font-size: 14px;\n  color: white;\n  text-decoration:none;\n  text-shadow:#555555 0 1px;\n  background-color: #7DC442;\n  padding: 5px 12px;\n  border:1px solid #559621;\n  border-radius: 5px;\n  display:inline-block;\n}\n#email-me-btn:hover {\n  background-color: #78D62C;\n}\n#email-me{\n  width: 400px;\n  padding:20px 0px;\n  xborder:3px solid #888888;\n  xborder-radius: 5px;\n  margin:0px auto;\n}\n<\/style>\n<p><script src=\"\/\/ajax.googleapis.com\/ajax\/libs\/jquery\/1.10.2\/jquery.min.js\"><\/script><br \/>\n<script>\n  var theEmail = null;\n  $(document).ready(function(){\n    $('#email-me-btn').click(function(){\n      theEmail = $('#email-me-email').val();\n      sendEmail(theEmail);\n    });\n    $(\"#email-me-email\").keypress(function(e) {\n      if(e.which == 13) {\n        theEmail = $('#email-me-email').val();        \n        sendEmail(theEmail);\n      }\n    });\n  });\n  var sendEmail = function(emailAddr){\n    if(!emailAddr || emailAddr.length < 12){\n      alert('Please enter an email');\n      return;\n    }\n    $('#email-me-email').val('sending...');\n    $.ajax({\n      url: \"https:\/\/freshinbox.com\/examples\/hotspots\/mail_example.php\",\n      data: {\n        email: emailAddr\n      },\n      success: function( data ) {\n        if(data == null || data.indexOf(\"ERROR\") != -1){\n          alert(\"There was a problem sending the email \\n\"+data);\n        }else{\n          alert(\"An email has been sent to \"+emailAddr+\"!\\n (Be sure to check the spam folder just in case)\");          \n        }\n        $('#email-me-email').val('');\n      }\n    });\n  }\n<\/script><\/p>\n","protected":false},"excerpt":{"rendered":"<p>Interactive hotspots, or user initiated information overlays are an effective way to deliver additional contextual information on an image.<BR><BR><\/p>\n<p>This article goes over how to implement hotspots in email as well as showcase some examples of effective hotspot implementations&#8230;<\/p>\n","protected":false},"author":2,"featured_media":3258,"comment_status":"open","ping_status":"open","sticky":false,"template":"","format":"standard","meta":[],"categories":[28,24,25,47],"tags":[],"_links":{"self":[{"href":"https:\/\/freshinbox.com\/blog\/wp-json\/wp\/v2\/posts\/3229"}],"collection":[{"href":"https:\/\/freshinbox.com\/blog\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/freshinbox.com\/blog\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/freshinbox.com\/blog\/wp-json\/wp\/v2\/users\/2"}],"replies":[{"embeddable":true,"href":"https:\/\/freshinbox.com\/blog\/wp-json\/wp\/v2\/comments?post=3229"}],"version-history":[{"count":10,"href":"https:\/\/freshinbox.com\/blog\/wp-json\/wp\/v2\/posts\/3229\/revisions"}],"predecessor-version":[{"id":3260,"href":"https:\/\/freshinbox.com\/blog\/wp-json\/wp\/v2\/posts\/3229\/revisions\/3260"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/freshinbox.com\/blog\/wp-json\/wp\/v2\/media\/3258"}],"wp:attachment":[{"href":"https:\/\/freshinbox.com\/blog\/wp-json\/wp\/v2\/media?parent=3229"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/freshinbox.com\/blog\/wp-json\/wp\/v2\/categories?post=3229"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/freshinbox.com\/blog\/wp-json\/wp\/v2\/tags?post=3229"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}