{"id":3836,"date":"2020-03-30T00:00:00","date_gmt":"2020-03-30T00:00:00","guid":{"rendered":"https:\/\/www.litmus.com\/blog\/interactive-hotspots-in-email-a-step-by-step-guide\/"},"modified":"2023-03-13T12:56:49","modified_gmt":"2023-03-13T16:56:49","slug":"interactive-hotspots-in-email-a-step-by-step-guide","status":"publish","type":"post","link":"https:\/\/www.litmus.com\/blog\/interactive-hotspots-in-email-a-step-by-step-guide","title":{"rendered":"Interactive Hotspots in Email: A Step-by-Step Guide"},"content":{"rendered":"

Interactivity continues to be one of the hottest trends in email design\u2014and interactive hotspots are one of the most popular interactive elements in a marketer’s toolkit. Hotspots let your subscribers uncover additional information when they hover or click on an item in your email\u2014and allow marketers to provide an additional layer of detail to their emails without making your email design feel too crowded.<\/span><\/p>\n

In the February edition of our monthly newsletter, we used the power of interactive hotspots to show off some exciting updates we\u2019ve made to the Litmus platform:<\/span><\/p>\n

\"\"<\/figure>\n

After we sent out the campaign, we received many questions from fellow email geeks about how exactly we created our hotspots\u2014and how we made them work in Gmail. That\u2019s why we\u2019re here to share our step-by-step guide.<\/span><\/p>\n

Read up on the details of how we designed and coded our hotspots below or check out the <\/span>hotspot code on Litmus Builder<\/span><\/a>\u2014that\u2019s where you find the exact placement of all the code elements we describe below.<\/span><\/p>\n

1. Before you get started: Important considerations<\/h2>\n

Hover or click?<\/h3>\n

There are many different ways to code interactive hotspots in email. If I wanted hotspots that <\/span>only<\/span><\/em> activate on click or tap, I would consider using the <\/span>Checkbox Hack<\/span><\/a>, for example. However, we went with hotspots that activate on <\/span>hover<\/span><\/em> for a few reasons.<\/span><\/p>\n

First, <\/span>:hover<\/strong> is better supported in email clients than <\/span>:checked<\/strong>\u2014especially in one of our largest email clients, Gmail. Secondly, interactivity is still not very common in email so I wanted to make it as easy as possible for users to discover that they <\/span>can<\/span><\/em> interact with it. After all, hovering over a hotspot and seeing a tooltip appear immediately takes less effort than hovering and <\/span>then<\/span><\/em> clicking. Because I wanted to find a way that balanced functionality and support for the widest audience possible, hovered hotspots were the way to go.<\/span><\/p>\n

Email client support: Are hotspots effective for your<\/em> audience?<\/h3>\n

Interactive hotspots are a great way to make your email more engaging and more effective, but\u2014like many interactive techniques\u2014they aren\u2019t supported in all email clients.<\/span><\/p>\n

Before incorporating this technique into your repertoire, you definitely want to consider which email clients matter most to you and your stakeholders. According to <\/span>Email Client Market Share<\/span><\/a>, 79% of <\/span>all<\/span><\/em> email clients support the fully interactive versions of this hotspot technique. But your audience\u2019s email client usage might look completely different from the global average. Take a close look at your own business\u2019 market share for the most accurate data.<\/span><\/p>\n

At Litmus, we used our Email Analytics<\/a> tracking to determine that some of our top clients are Gmail (36.8%), Apple Mail (20.0%), and iPhone (13.2%) which make up a majority (70%) of our audience. Email clients that will show the fallback version make up only 30% of our audience.<\/span><\/p>\n

With this data, it made sense for us to focus on creating a great interactive experience for our users, but this may not be the case if your audience skews more heavily towards Outlook for Windows. However, you should be constantly tracking and testing to make sure you have the most accurate and up-to-date analytics data! Email client market shares change over time as certain clients and devices become more popular (many companies have switched from Outlook to GSuite, for example), so it\u2019s best not to rely on historical knowledge as to how things have always been done.<\/span><\/p>\n

Check what level of functionality your top email clients support below.<\/span><\/p>\n

Fully Interactive – Desktop<\/strong>
\n<\/span>This is where hotspots are fully functional at desktop viewports.<\/span>
\n<\/span><\/p>\n